Tipografi, web sitesi tasarımının ayrılmaz bir parçasıdır. Kullandığınız tipografi ve yazı tipleri, bir web sitesi tasarımının çeşitli yönlerinde büyük bir rol oynar. Okunabilirlik, kullanıcı deneyimi ve hatta bir makalenin veya sayfanın algılanan uzunluğu gibi faktörleri etkiler. Web tasarımcılarının tipografi ile doğru bir şekilde web sitesinin ve içeriğinin amacını doğru bir şekilde iletmelerini sağlamak çok önemlidir.
Web tasarımının hemen hemen her bölümünde olduğu gibi, daha etkili olmanıza yardımcı olacak çeşitli araçlar vardır. Tipografi farklı değil.
Bu makalede, harika web sayfaları oluşturmanıza yardımcı olmak için tipografi için 20 JS Kütüphanesi / Eklentisine bakacağız. Bu araçların bazıları dul ve yetimler gibi korkunç şeylerle bile uğraşıyor.
1. FlowType.js
FlowType, belirli bir öğenin genişliğine göre yazı tipi boyutunu otomatik olarak yeniden boyutlandırmanıza yardımcı olan duyarlı bir jquery eklentisidir. Web sitesi tipografisinin okunabilmesi için satır başına yaklaşık 45 ila 75 karakter olmalıdır. Yalnızca CSS medya sorgularına sahip çoğu ekran için bunu başarmak zor olabilir. Flowtype, okuyucunun kullandığı ekran veya tarayıcı türü ne olursa olsun satır başına mükemmel bir karakter sayısı olmasını sağlamak için yazı tipi boyutunu ayarlar.
2. Blast.js
Blast.js şunları yapmanızı sağlar: tipografik animasyon, yan yana yerleştirme, stil, arama ve analiz. Araç, tipografik manipülasyonu etkinleştirmek için metni ayırmanıza olanak tanır. Yerleşik karakter, kelime, cümle ve öğe sınırlayıcıları vardır. Blast ayrıca ifadeler ve özel düzenli ifadelerle de eşleşir.
3. Textillate.js
Textillate.js, CSS3 metin animasyonları oluşturmak için basit bir eklentidir. Eklenti, herhangi bir metne CSS3 animasyonlarının uygulanmasına yardımcı olmak için farklı kütüphaneleri birleştirir. Bunu kullanmak için tek yapmanız gereken textillate.js ve projenize bağımlılıklarını eklemektir.
4. Widowtamer.js
Widowtamer.js, web sayfalarınızda tipografi dulları otomatik olarak düzelten bir JavaScript eklentisidir. Eklenti yalnızca duyarlı sitelerle çalışacak şekilde tasarlanmıştır.
5. jQuery WidowFix
JQuery WidowFix, dulları düzeltmenize yardımcı olacak bir jQuery eklentisidir. Son iki kelime arasına aralıksız bir boşluk ekleyerek bunları düzeltir. Alet hafif ve kullanımı kolaydır.
6. Slab Text
Slab Text, büyük, kalın başlıklar oluşturmanıza yardımcı olacak bir jQuery eklentisidir. Ayrıca, görünüm alanı boyutunuz ne olursa olsun, başlığınızdaki sözcük kombinasyonlarının aynı satırda kalması için görünüm genişliğinizi yeniden boyutlandırabilirsiniz.
7. Kerning.js
Kerning.js, web türünüzü gerçek CSS kurallarıyla otomatik olarak ölçeklendirmenizi sağlayan basit bir jQuery betiğidir. Herhangi bir bağımlılık olmadan gelir, bu yüzden web sayfanıza eklediğinizde ve bazı CSS kuralları eklediğinizde, sayfanız otomatik olarak güzelleştirilir.
8. Lettering.js
Lettering.js, radikal web tipografi için bir jQuery eklentisidir. Eklenti size tam harf kontrolü sağlar. Lettering.js ile kolayca yapılabilecek bazı şeyler Kerning Type, Editoryal Tasarım ve Yönetilebilir Kod’dur.
9. React Text Gradient
React Text Gradient, sitenize metin gradyanları eklemenizi sağlayan harika bir eklentidir. CSS ile metin gradyanları oluşturan bir React bileşenidir. Bileşen, bir web sitesi arka plan klibinin olup olmadığını tespit eder ve ardından degradeyi metnin üzerine uygular.
10. Typed.js
Typed.js bir tarayıcıda cümleleri yazan, silen ve sonraki dizeye geçen bir JavaScript kütüphanesidir. Aracın kullanımı oldukça kolaydır ve sınırsız sayıda dizeler oluşturabilirsiniz. Kütüphane hikaye anlatımı için harikadır.
11. FitText
FitText, web türünü şişirmek için kullanılan bir jQuery eklentisidir. Eklenti, metni bir üst öğenin genişliğini dolduracak şekilde otomatik olarak ölçeklendirir. Eklenti, kullandığınız tarayıcı türü ne olursa olsun sayfanın düzeninin bozulmamasını sağlar.
12. TypeButter
TypeButter web için optik karakter aralığıdır. Bu eklenti, güzel tasarlanmış metinler oluşturmanıza olanak tanır. Typebutter ayrıca başlıklarınızı Karakterize Etmenize olanak tanır ve metnin okunmasını zorlaştıran karakterler arasındaki boşlukları kaldırır. Tek yapmanız gereken eklentiyi yüklemek ve yazı tiplerinizdeki gereksiz boşlukları kaybedecek.
13. Font-To-Width
Font-To-Width, yazıların kaplarına sığmasını sağlayan bir komut dosyasıdır. Metni sığdırmak için yazı tipi boyutunu ölçeklemek yerine, Font-To-Width bir genişlik veya genişlik değişkeni seçer ve ardından gerektiği gibi harf ve sözcük ayarlamalarına izin verir. Bu komut dosyasının başlıklar veya kısa metin parçaları için yapıldığını unutmayın. Çok satırlı metin gövdesi için değildir. Ayrıca, Chrome gibi alt piksel aralığını destekleyen tarayıcılarda en iyi sonucu verir. Boşlukları tamsayı değerlere yuvarlayan tarayıcılarda yuvarlama hataları gösterilir.
14. Font Flex
Font Flex, dinamik yazı tipi boyutları için bir jQuery eklentisidir. Eklenti, metninizi esnek ve her ekrana uyarlanabilir hale getirir. Hafif jQuery uzantısı, duyarlı veya uyarlanabilir CSS mizanpajlarıyla kullanılmak üzere tasarlanmıştır.
15. TextTailor.js
TextTailor.js, metnin üst öğenin yüksekliğini doldurmasına veya sığmadığında kısalmasına izin veren bir jQuery eklentisidir. Görüntüleri ve sabit yazı tipleri içeren yayınlarla mükemmel çalışır.
16. Type Rendering Mix
Tür Oluşturma Karışımı ile, metni oluşturmak için Temel Metin kullanan tarayıcıların yazı tipi ağırlığını azaltabilirsiniz. Ayrıca, kenar yumuşatma uygulanmadığında web yazı tiplerini devre dışı bırakmanıza olanak tanır. Ayrıca, bazı metin rasterleştiricilerinde kötü görüntüleniyorsa web yazı tiplerini devre dışı bırakabilirsiniz.
17. Textualizer
Textualizer, her karakteri canlandırırken metin bulanıklıkları arasında geçiş yapan bir jQuery eklentisidir. Metin geçiş yaparken, bir sonraki bulanıklaştırma için ortak olan herhangi bir karakter ekranda bırakılır ve yeni konumuna taşınır. Sahip olduğu bazı efektler slideLeft, slideTop, fadeIn ve rasgele.
18. Jumble
Jumble, başlıklarınıza renk ekleyen ve bunları canlandıran bir jQuery eklentisidir. Parlaklık ve doygunluk tonuna bağlı olarak renk karıştırması için parametreler ayarlayabilirsiniz. Ayrıca, karışabileceğiniz iyi bir renk yelpazesi de sağlanır.
19. Arctext.js
Arctext.js, CSS3 ve jQuery kullanarak metin eğmenize izin veren bir jQuery eklentisidir. Metni 300 yarıçapına kadar eğebilir, metnin yönünü değiştirebilir, döndürülmemiş harfler oluşturabilir ve metni ayarlayabilir veya canlandırabilirsiniz. Eklenti her harfin doğru dönüşünü hesaplar ve ayarlanan yarıçapın arkına dağıtır.
Farklı JS Kütüphaneleri / Eklentileri ile Tipografiyi Keşfetmek
Bir web geliştiricisi olarak, verimli olmak ve web tasarımlarınızdan en iyi şekilde yararlanmak için bir araç cephanesine sahip olmanız gerekir.
Sadece becerilerinize güvenmek web tipografisini atlatmayı zorlaştırabilir. Tipografi için JS kitaplıklarını / eklentilerini kullandığınızda, metninizin görünümü, hissi ve işlevi üzerinde kontrolünüz vardır. Dullar ve yetimlerle kolayca başa çıkabilir, özel efektler ekleyebilir ve arkadaşça bir UX oluşturabilirsiniz.
Web tasarım, yazılım ve dijital pazarlama alanında deneyimli bir ekibimiz var . Etkileyici, kullanıcı deneyimi ön planda olan, arama motoru dostu web siteleri üretiyoruz. Beklediğiniz geri dönüşüm oranı için yeni stratejiler üretiriz.