15 Çevrimiçi Tipografi Araçları Tüm Tasarımcıların Bilmesi Gerekenler
Tipografi, herhangi bir tasarımın temelidir, çünkü okuma, web'de yaptığımız en temel şeylerden biridir. Seçtiğiniz tipografi, aşağıdakiler de dahil olmak üzere, bir web sitesinin birçok yönü üzerinde etkilidir okunabilirlik, ruh hali ve genel kullanıcı deneyimi. Tasarımcılar ve geliştiriciler için önemlidir Tipografinin temel prensiplerini bilir için okunaklı hoş tasarımlar oluşturun.
Daha önce font eşleştirme araçları hakkında konuşuyorduk ve bugün oluşturduğunuz ve / veya tasarladığınız web sitelerinde daha iyi bir okuma deneyimi elde edebilecek araçlar yazacağız..
İşte size yardımcı olacak eklentiler, çevrimiçi araçlar ve komut dosyaları. harika başlıklar yarat ve okunabilir metni temizle.
tip plakası
Tasarım seçimlerini sizin için yapmaz, ancak yaygın tipografik şablonlar için stil ile doğru işaretlemeyi tanımlar. Ayrıca, metin kopyasının doğru şekilde nasıl stillendirileceği konusunda da ipuçları verebilir..
Çıkış yapmak: Demo | belgeleme
Gutenberg
Gutenberg, geliştiriciler ve tasarımcılar için esnek ve kullanımı kolay bir tipografi başlangıç kitidir. Taban tipi boyutunu, çizgi yüksekliğini ve maksimum genişliği ayarlamanıza yardımcı olacaktır. Gutenberg açık kaynaklı bir projedir, bu nedenle katkıda bulunmak, uyum sağlamak ve değiştirmek için çekinmeyin.
Çıkış yapmak: Demo | belgeleme
Lettering.js
Lettering.js, karakter aralığı türü üzerinde kontrol sağlayan bir jQuery eklentisidir. Kolayca editoryal tasarım elde etmenize ve kodu yönetmenize olanak sağlar. Web sitesi, ilham için bu eklentiyle yapılmış harika tipografi örnekleri içeriyor.
Çıkış yapmak: Demo | belgeleme
Typebase.css
Typebase.css özelleştirilebilir bir tipografi stil sayfasıdır. Hem saas hem de daha az versiyon içeriyor ve kolayca modern web projelerine dönüştürülüyor.
Çıkış yapmak: Demo | belgeleme
FitText
FitText, web sitenizin yazı tipi boyutlarını esnekleştirecek bir eklentidir. Çeşitli ekran çözünürlükleri için ölçeklenebilir başlıklar elde etmenize yardımcı olacaktır; Başka bir deyişle, tipografinizi duyarlı hale getirin. Yalnızca büyük metinleri görüntülemek için yapılmıştır.
Çıkış yapmak: Demo | belgeleme
Kerning.js
Kerning.js, tipografinizi CSS ile otomatik olarak dönüştürmenize, ölçeklemenize ve değiştirmenize yardımcı olur. Kerning.js ile başlamak kolaydır.
Çıkış yapmak: Demo | belgeleme
Typesettings.css
Typesettings.css minimalist web projeleri veya blogları oluşturmak için oyun alanınızdır. Burada kullanılan tüm tipografi stilleri, grafik tasarım temellerinden ilham almıştır..
Çıkış yapmak: Demo | belgeleme
Sırt çantası
Sırt çantası ile yazı tipi boyutunda yeni, duyarlı özellik sayesinde şaşırtıcı sıvı tipografi üretebilirsiniz. Duyarlı tipografi oluşturmak son derece kolay.
Çıkış yapmak: Demo | belgeleme
FlowType.JS
En okunabilir tipografi, satır başına 45 ile 75 karakter içerir, ancak bu dengeyi bulmak geliştiriciler için zorlu bir görevdir. FlowType.JS, yazı tipi boyutunu ve ardından belirli bir öğenin genişliğine bağlı olarak satır yüksekliğini değiştirir..
Çıkış yapmak: Demo | belgeleme
Blast.js
Blast.js, tipografiyi düzenlemeyi kolaylaştırmak için metinleri ayırmanıza yardımcı olacaktır. 4 yerleşik sınırlayıcı içerir: karakter, sözcük, cümle ve öğe. Özel ifadeleri ve ifadeleri de eşleştirebilir..
Çıkış yapmak: Demo | belgeleme
slabText
slabText, mevcut yatay alanı tam olarak doldurmak için başlıkları satırlara ayıran basit bir komut dosyasıdır. Komut dosyası, kullanılabilir genişliği piksel font boyutuna bölerek her satırda ayarlanması gereken ideal karakter sayısını hesaplar..
Çıkış yapmak: Demo | belgeleme
Türü Ölçeği
Tür Ölçeği ile projeniz için doğru tür ölçeği önizleyebilir ve seçebilirsiniz. Kural yok - sadece font boyutu, ölçek ve farklı web fontlarıyla oynayın.
Çıkış yapmak: Demo | belgeleme
dizgi
Tipografik, tipografiyi duyarlı hale getirmenize yardımcı olur. Yapmanız gereken tek şey sadece birkaç yazı tipi seçmek, birkaç ayar yapmak ve iyi duyarlı tipografi elde etmek.
Çıkış yapmak: Demo | belgeleme
tipik ola
Typi, duyarlı tipografiyi kolayca yapmak için kullanabileceğiniz bir saas karışımıdır. HTML ve diğer öğeler için font boyutunu ve satır yüksekliğini oluşturur. Ayrıca, Typi'nin çizgi yüksekliklerini hesaplamak için dikey bir ritim işlevi vardır..
Çıkış yapmak: Belgeler
Lining.js
Lining.js eklentisi ile web tipografisi üzerinde tam kontrol elde edersiniz. Safari, Google Chrome, Opera ve Mozilla Firefox gibi en popüler tarayıcılarda desteklenir..
Çıkış yapmak: Demo | belgeleme
Bonus: 2 Diğer Araçlar!
Web Türü Durumu
Web Türünün Durumu, web'deki tür ve özellikler için destek hakkında güncel veriler sunan bir web sitesidir. Tam olarak ihtiyacınız olanı bulmak için karakter aralığı, büyük harf aralığı, CSS yazı tipi yükleme ve daha fazlası gibi arama veya kategorileri kullanabilirsiniz..
Typograph
Tipografisi, tek harfli sözcüklerden sonra aralıksız boşluk bırakmanıza, sayı ve birimi birbirine bağlamanıza izin veren harika bir web ve taslak eklentisidir. Ayrıca çift boşlukları kaldırır, girer, noktalar ve diğer yazım hataları yapar, böylece okunması kolay temiz ve güzel bir tipografi elde edebilirsiniz..
Çıkış yapmak: Belgeler
