15 Alat Tipografi Web Yang Berguna, Perpustakaan Dan Kerangka Kerja
Berurusan dengan tipografi di web benar-benar unik. Setiap browser memiliki algoritma sendiri untuk merender font yang dapat menyebabkan perbedaan yang tidak terduga. Hanya ada beberapa properti CSS yang dapat Anda gunakan untuk memiliki kontrol atas font, seperti font kerning, font smoothing, dalam membuat DropCaps dll. Selain itu, kita harus berurusan dengan banyak masalah tata letak ketika datang ke font.
Kabar baiknya adalah ada sumber daya yang dapat Anda gunakan untuk mengambil alih kemudi ketika datang ke tipografi situs web. Di sini adalah 15 alat web, perpustakaan, dan kerangka kerja Anda dapat menggunakannya untuk tujuan itu.
Lebih lanjut tentang Hongkiat:
- 9 Plugin WordPress Untuk Melakukan Lebih Banyak Dengan Font Anda
- 20 Plugin Tipografi WordPress Terbaik Untuk Meningkatkan Keterbacaan
- Ikon UI Lebih Baik Dan Lebih Tajam Dengan Font Web
TypeRendering
Pendeknya, TypeRendering bekerja mirip dengan Modernizr, kecuali hanya mengidentifikasi mesin browser untuk rendering font. Perpustakaan ini menambahkan kelas khusus berdasarkan pada penemuannya yang dapat digunakan untuk menerapkan aturan gaya khusus untuk rendering jenis.
KerningJS
Kerning belum dikustomisasi untuk digunakan di web - font-kerning dukungan masih buruk saat ini - tetapi properti standar baru akan datang kepada kita. KerningJS adalah pustaka Javascript yang memberi Anda beberapa properti baru untuk kontrol kerning yang lebih baik, misalnya -huruf-kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Perlu diingat bahwa contoh di atas tidak standar dan hanya berlaku untuk KerningJS.
DropcapJS
Meskipun membuat dropcap dapat dilakukan dengan standar CSS saat ini, hasilnya belum sempurna. Terkadang itu benar-benar tidak diinginkan. DropcapJS, yang dikembangkan oleh Adobe Web Platform, dipercayakan dengan misi untuk memungkinkan perancang web menerapkan dropcap sempurna dengan mudah.
LiningJS
LiningJS adalah perpustakaan JavaScript yang menambahkan baris kelas di setiap baris paragraf Anda. Ini memungkinkan Anda mendesain garis secara terpisah. Ini mensimulasikan gagasan :: nth-line (), :: nth-last-line () dan :: baris terakhir pseudo-class yang masih tidak ada dalam CSS. Berikut adalah contoh bagaimana kami menata baris pertama paragraf dengan LiningJS:
p .line [pertama] font-weight: 600; text-transform: huruf besar;
Selain itu, LiningJS juga mendukung aliran paragraf bahasa Mandarin.
Garis BawahJS
Garis BawahJS adalah pustaka JavaScript yang membuat garis bawah teks lebih baik. Lihat demo untuk melihat apa yang saya maksud, pastikan untuk mengarahkan kursor. Bandingkan demo dengan garis bawah keluaran CSS saat ini dekorasi teks standar dan Anda mungkin akan menjadi penggemar underlineJS juga.
Jenis aliran
Plugin ini secara dinamis akan menyesuaikan ukuran font berdasarkan lebar bungkus tertentu. Jenis aliran membantu Anda menerapkan jumlah karakter ideal per baris pada lebar layar berapa pun. Perpustakaan dilengkapi dengan opsi di mana seseorang dapat mengatur lebar layar min / max, ukuran font min / max, dan rasio font.
HatchShow
HatchShow perluas ukuran font untuk mengisi seluruh lebar wadahnya. Plugin bekerja di luar kotak dengan algoritma; Singkatnya, ini mengukur lebar kontainer, dan panjang karakter font dan menambahkan ukuran font yang tepat.
GridLover
GridLover adalah alat yang hebat untuk menghasilkan gaya dasar untuk pengaturan tipografi (ukuran, tinggi garis, dan margin) dengan UI slider yang mudah. Itu menghasilkan gaya dalam SCSS, KURANG, dan Stylus sehingga Anda dapat memasukkannya langsung dalam proyek Anda terlepas dari CSS-Preprocessor yang Anda gunakan.
JenisSkala
JenisSkala adalah alat online yang akan membantu Anda menentukan ukuran font yang tepat untuk situs web Anda. Alat ini menyediakan GUI intuitif sederhana untuk menyisipkan ukuran font dasar, skala, dan keluarga font yang ingin Anda gunakan. Hasilnya akan divisualisasikan untuk Anda sehingga Anda dapat bermain-main dengan skala, untuk mendapatkan nilai yang tepat. Ambil saja CSS setelah Anda selesai.
Skala Modular
Skala Modular adalah alat untuk menghasilkan penskalaan font yang ideal untuk teks isi dan judul. Ini output dalam Sass yang harus digunakan bersama dengan perpustakaan Sass-nya. Sebagai alternatif, Anda dapat menggunakan JavaScript .
Lebar font
Lebar Huruf (Lebar) adalah pustaka Javascript yang membuat font pas dengan wadah lebarnya. Ini akan menentukan ukuran font beserta jarak kata yang diperlukan untuk font tersebut. Jika Anda ingin membuat berita utama yang cantik, ini adalah perpustakaan yang mungkin ingin Anda coba.
FFFFallback
FFFFallback, alat praktis yang memungkinkan Anda menemukan tumpukan font terbaik yang akan terdegradasi dengan anggun. Alat datang dalam bentuk bookmarklet, yang akan menganalisis keluarga font pada halaman Anda dan menyarankan satu set font untuk digunakan sebagai cadangan..
Pasangan Font
Google Font adalah salah satu pustaka font web paling populer yang digunakan oleh jutaan orang, dan menampung lebih dari 500 keluarga font. Pasangan Font adalah kumpulan Google Font yang dipasangkan, di mana Anda dapat menemukan berbagai kombinasi antara keluarga font dan mengetikkan wajah dengan mudah. Pasangan Font membuat pemilihan pasangan font sedikit kurang luar biasa.
Pengaturan Type
Pengaturan Type adalah kumpulan aturan CSS yang ditetapkan untuk menentukan penskalaan font yang tepat, ritme vertikal, dan rasio tipografi yang responsif. TypeSettings hadir dalam Sass dan Stylus yang memungkinkan fleksibilitas untuk memenuhi kebutuhan proyek Anda dengan menyesuaikan variabel.
Typeplate
Typeplate mungkin salah satu kit starter paling lengkap untuk mengatur tipografi. Typeplate mengirim banyak gaya tipografi dasar yang membahas penskalaan, warna, modal kecil, dropcap, indentasi, tanda hubung, blokquote, blok kode, dan banyak lagi hal lainnya.
Sekarang Baca: Etalase Desain Web dengan Tipografi Cantik
