15 Alat Tipografi Web Berguna, Perpustakaan Dan Rangka Kerja

Berurusan dengan tipografi di web memang unik. Setiap pelayar mempunyai algoritma sendiri untuk membuat fon yang boleh membawa kepada ketidakpastian yang tidak dijangka. Terdapat hanya beberapa sifat CSS yang boleh anda gunakan untuk mengawal fon, seperti font kerning, smoothing font, membuat DropCaps dan lain-lain. Selain itu, kita harus berurusan dengan banyak isu susun atur ketika datang ke fon.

Berita baiknya ialah terdapat sumber yang boleh anda gunakan untuk mengambil alih roda ketika datang ke tipografi laman web. Disini adalah 15 alat web, perpustakaan dan rangka kerja anda boleh gunakan untuk itu.

Lagi mengenai Hongkiat:

9 Plugin WordPress Untuk Lakukan Lebih Banyak Dengan Font Anda
20 Best Plugin WordPress Typography Untuk Meningkatkan Kebolehbacaan
Ikon UI yang Lebih Baik Dan Sharper Dengan Font Web

TypeRendering

Secara ringkas, TypeRendering berfungsi sama dengan Modernizr, kecuali ia hanya mengenalpasti enjin penyemak imbas untuk penyajian fon. Perpustakaan ini menambah kelas tersuai berdasarkan penemuannya yang boleh digunakan untuk memohon peraturan gaya tertentu untuk penampilan jenis.

KerningJS

Kerning tidak boleh digunakan untuk digunakan di web lagi - font-kerning sokongan masih kurang pada masa ini - tetapi harta standard baru akan datang. KerningJS adalah perpustakaan Javascript yang memberikan anda beberapa sifat baru untuk kawalan kerning yang lebih baik, contohnya -surat-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Perlu diingat bahawa contoh di atas adalah tidak standard dan hanya berkenaan dengan KerningJS.

DropcapJS

Walaupun membuat dropcap boleh dilakukan dengan standard CSS semasa, hasilnya belum sempurna. Kadang-kadang ia tidak dapat dielakkan. DropcapJS, yang dibangunkan oleh Adobe Web Platform, telah diamanahkan dengan misi untuk membolehkan pereka web untuk menggunakan dropcap yang sempurna dengan mudah.

LiningJS

LiningJS adalah perpustakaan JavaScript yang menambah talian kelas dalam setiap baris perenggan anda. Ini membolehkan anda menyusun garis secara berasingan. Ia menyerupai idea :: nth-line (), :: nth-last-line () dan :: garis lepas pseudo-kelas yang tidak hadir dalam CSS masih lagi. Inilah contoh bagaimana kita menyusun baris pertama perenggan dengan LiningJS:

 p .line [first] font-weight: 600; teks-transform: huruf besar;

Di samping itu, LiningJS juga menyokong aliran perenggan Cina.

UnderlineJS

UnderlineJS adalah pustaka JavaScript yang menjadikan teks menggariskan lebih baik. Lihat demo untuk melihat apa yang saya maksudkan, pastikan untuk berlegar di atas garisan. Bandingkan demo dengan output garis bawah CSS semasa teks-dekorasi standard dan anda mungkin akan menjadi penggemar garis bawahJS juga.

FlowType

Plugin ini secara dinamik akan menyesuaikan saiz fon berdasarkan lebar bungkus tertentu. FlowType membantu anda menggunakan nombor aksara yang sesuai setiap baris pada mana-mana lebar skrin. Perpustakaan dilengkapi dengan pilihan di mana seseorang boleh menetapkan lebar skrin min / max, saiz fon min / max, dan nisbah fon.

HatchShow

HatchShow memperluaskan saiz fon untuk mengisi keseluruhan lebar bekasnya. Plugin berfungsi keluar dari kotak dengan algoritma; secara ringkas, ia mengukur lebar kontena, dan panjang watak fon dan menambahkan saiz font yang sesuai.

GridLover

GridLover adalah alat yang hebat untuk menghasilkan gaya asas untuk susunan tipografi (saiz, ketinggian baris, dan margin) dengan UI slider yang mudah. Ia menjana gaya dalam SCSS, KURANG, dan Stylus supaya anda boleh menyertakannya dengan segera dalam projek anda tanpa mengira CSS-Preprocessor yang anda gunakan.

TypeScale

TypeScale adalah alat dalam talian yang akan membantu anda dengan mudah menentukan saiz fon yang sesuai untuk laman web anda. Alat ini menyediakan GUI intuitif yang mudah untuk memasukkan saiz font asas, skala, dan keluarga font yang anda mahu gunakan. Hasilnya akan divisualisasikan untuk anda supaya anda dapat bermain-main dengan skala, untuk mendapatkan nilai yang tepat. Cukup ambil CSS sebaik sahaja anda selesai.

Skala Modular

Skala Modular adalah alat untuk menghasilkan penanda fon yang sesuai untuk badan dan teks tajuk. Ia mengeluarkan output dalam Sass yang harus digunakan bersempena dengan perpustakaan Sassnya. Secara bergantian, anda boleh menggunakan JavaScript .

Font-To-Lebar

Font-To-Width (FTW) adalah perpustakaan Javascript yang membuat fon sesuai dengan bekas lebarnya. Ia akan menentukan saiz fon bersama-sama dengan jarak kata yang diperlukan untuk fon. Sekiranya anda ingin membuat tajuk cantik, ini adalah perpustakaan yang mungkin anda ingin cuba.

FFFFallback

FFFFallback, alat berguna yang membolehkan anda mencari tumpuan font terbaik yang akan menurunkan anggun. Alat ini datang dalam bentuk bookmarklet, yang akan menganalisis keluarga font di halaman anda dan mencadangkan satu set fon untuk digunakan sebagai sandaran.

Pasangan Pair

Google Font adalah salah satu perpustakaan font web paling popular yang digunakan oleh berjuta-juta, dan menjadi tuan rumah di atas 500 keluarga font. Pasangan Pair adalah koleksi Font Google yang dipasangkan, di mana anda boleh mencari kombinasi pelbagai antara keluarga font dan muka jenis dengan mudah. Pasangan Fon membuat pilihan pasangan fon sedikit kurang menggembirakan.

TypeSettings

TypeSettings adalah koleksi peraturan CSS yang ditetapkan untuk menentukan penanda fon yang betul, irama menegak, dan nisbah responsif tipografi. TypeSettings datang dalam Sass dan Stylus yang membolehkan fleksibiliti untuk memenuhi keperluan projek anda dengan menyesuaikan pembolehubah.

Typeplate

Typeplate mungkin salah satu kit permulaan yang paling lengkap untuk menubuhkan typography. Kapal Typeplate dengan beberapa gaya tipografi asas yang menangani skala, warna, modal kecil, dropcap, indentasi, hyphenation, blockquote, blok kod dan banyak lagi perkara.

Sekarang Baca: Pameran Reka Bentuk Web dengan Typography Cantik