15 Faydalı Web Tipografi Araçları, Kütüphaneler ve Çerçeveler
Web'de tipografi ile başa çıkmak gerçekten ilginçti. Her tarayıcının fontları oluşturmak için kendi algoritması vardır beklenmeyen tutarsızlıklara yol açabilir. Yazı tipi karakter aralığı, yazı tipi düzgünleştirme, DropCaps oluşturma vb. Gibi yazı tipleri üzerinde denetim sahibi olmak için kullanabileceğiniz birkaç CSS özelliği vardır..
İyi haber şu ki, web sitesi tipografisi söz konusu olduğunda tekerleği devralmak için kullanabileceğiniz kaynaklar var. Burada 15 web araçları, kütüphaneler ve çerçeveler bu amaçla kullanabilirsiniz.
Hongkiat hakkında daha fazlası:
- 9 WordPress Eklenti, Yazı Tiplerinizle Daha Fazlasını Yapın
- Okunabilirliği artırmak için en iyi 20 WordPress Tipografi Eklentisi
- Web Fontları ile Daha İyi ve Daha Net UI Simgeleri
TypeRendering
Kısaca, TypeRendering Modernizr'e benzer şekilde çalışır, ancak yalnızca font oluşturma için tarayıcı motorunu tanımlar. Bu kütüphane, tür oluşturma için belirli stil kurallarını uygulamak için kullanılabilecek keşiflerine göre özel sınıflar ekler.
KerningJS
Karakter aralığı henüz web’de kullanılmak üzere özelleştirilemez - Yazı tipi karakter aralığı Şu anda destek hala zayıf - ancak yeni bir standart mülk yolumuza geliyor. KerningJS örneğin daha iyi karakter aralığı kontrolü için birkaç yeni özellik sunan bir Javascript kitaplığıdır. -letter-kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Yukarıdaki örneğin standart olmadığını ve sadece KerningJS için geçerli olduğunu unutmayın..
DropcapJS
Bir dropcap oluşturma mevcut CSS standartlarıyla yapılabilir olsa da, sonuç henüz mükemmel değil. Bazen düpedüz istenmeyen. Adobe Web Platform tarafından geliştirilen DropcapJS, web tasarımcısının kolayca mükemmel bir dropcap uygulamasına izin verme misyonuyla görevlendirilmiştir..
LiningJS
LiningJS ekleyen bir JavaScript kütüphanesidir. hat paragrafınızın her satırında sınıf. Bu, çizgiyi ayrı ayrı şekillendirmenizi sağlar. Fikrini simüle eder :: n'inci-dizisi (H), :: n'inci-son dizisi (H) ve :: son satırı Hala CSS'de bulunmayan sözde sınıflar. İşte bir paragrafın ilk satırını LiningJS ile nasıl biçimlendirdiğimize bir örnek:
p. satır [ilk] font-ağırlık: 600; metin dönüşümü: büyük harf;
Ek olarak, LiningJS ayrıca Çin paragraf akışını desteklemektedir.
UnderlineJS
UnderlineJS Metnin daha iyi altını çizen bir JavaScript kütüphanesidir. Ne demek istediğimi görmek için gösterime göz atın, satırların üzerine geldiğinizden emin olun. Gösterimi, geçerli CSS'nin altı çizili çıktısıyla karşılaştırın text-decoration Standart ve muhtemelen altı çizili JS hayranı olacaksınız.
FlowType
Bu eklenti, belirli bir sarmalayıcı genişliğine göre yazı tipi boyutunu dinamik olarak ayarlar.. FlowType Herhangi bir ekran genişliğinde, her satır için ideal sayıda karakter uygulamanıza yardımcı olur. Kütüphane min / max ekran genişliğini, min / max yazı tipi boyutunu ve yazı tipi oranını ayarlayabilen seçeneklerle gelir.
HatchShow
HatchShow kabının genişliğini doldurmak için yazı tipinin boyutunu genişletir. Eklenti algoritma ile kutunun dışında çalışır; Özet olarak, kabın genişliğini ve yazı tipi karakterinin uzunluğunu ölçer ve yazı tipinin uygun boyutunu ekler.
GridLover
GridLover Kolay kaydırıcı UI ile tipografi düzenleme (boyut, çizgi yüksekliği ve kenar boşluğu) için temel stilleri oluşturmak için harika bir araçtır. SCSS, LESS ve Stylus'ta stilleri oluşturur, böylece hangi CSS Ön İşlemciyi kullandığınıza bakmaksızın projenize hemen dahil edebilirsiniz.
TypeScale
TypeScale web siteniz için doğru font boyutunu kolayca belirlemenize yardımcı olacak çevrimiçi bir araçtır. Araç, kullanmak istediğiniz temel font boyutunu, ölçeğini ve font ailesini eklemek için basit ve sezgisel bir GUI sağlar. Sonuçlar sizin için görselleştirilecektir, böylece sadece doğru değeri elde etmek için ölçekle birlikte oynayabilirsiniz. Tamamladığınızda CSS’yi alın.
Modüler Ölçek
Modüler Ölçek Gövde ve başlık metni için ideal yazı tipi ölçekleme oluşturmak için bir araçtır. Sass kütüphanesi ile birlikte kullanılması gereken Sass'ta çıktı. Alternatif olarak, JavaScript kullanabilirsiniz .
Font-To-Genişlik
Yazı Tipinden Genişliğe (FTW) yazı tipini genişlik kabına sığdırmak için kullanılan bir Javascript kitaplığıdır. Yazı tipi boyutunu, yazı tipi için gereken sözcük boşluğu ile birlikte belirler. Güzel bir başlık oluşturmak istiyorsanız, denemek isteyebileceğiniz kütüphane budur..
FFFFallback
FFFFallback, incelikle bozulacak en iyi yazı tipi yığınını bulmanızı sağlayan kullanışlı bir araçtır. Araç, sayfanızdaki font ailesini analiz edecek ve geri dönüş olarak kullanılacak bir dizi font önerecek bir bookmarklet biçiminde gelir.
Yazı Tipi Çifti
Google Font, milyonlarca kişi tarafından kullanılan en popüler web font kütüphanesinden biridir ve 500 fontun üzerinde bir ailenin ev sahipliği yapar.. Yazı Tipi Çifti yazı tipi aileleri ve çeşitli yüzleri kolayca yazabileceğiniz çeşitli bir kombinasyon bulabileceğiniz eşleştirilmiş Google Fonts koleksiyonudur. Yazı Tipi Çifti, daha az ezici olan yazı tipi eşleştirmesini seçmeyi sağlar.
TypeSettings
TypeSettings uygun yazı tipi ölçeklendirmeyi, dikey ritmi ve yanıt veren tipografi oranını tanımlamak için ayarlanan bir CSS kural koleksiyonudur. TypeSettings, değişkenleri ayarlayarak proje ihtiyaçlarınızı karşılama esnekliği sağlayan Sass ve Stylus'ta gelir.
tip plakası
tip plakası Muhtemelen tipografi kurmak için en eksiksiz başlangıç kitlerinden biridir. Typeplate, ölçekleme, renkler, küçük büyük harf, dropcap, girinti, tireleme, blok alıntı, kod bloğu ve daha birçok şeyi içeren bir avuç temel tipografik stil ile birlikte gelir.
Şimdi Oku: Güzel Tipografi ile Web Tasarımlarının Vitrini
