15 Alat Tipografi Online Semua Desainer Harus Tahu

Tipografi adalah dasar dari desain apa pun, karena membaca adalah salah satu hal paling mendasar yang kami lakukan di web. Tipografi yang Anda pilih berdampak pada banyak aspek situs web, termasuk keterbacaan, suasana hati, dan pengalaman pengguna secara keseluruhan. Sangat penting bagi desainer dan pengembang untuk melakukannya mengetahui prinsip dasar tipografi untuk buat desain yang enak dibaca.

Kami telah berbicara tentang alat penyandingan font sebelumnya, dan hari ini kami akan berbagi dengan Anda mengetik alat yang dapat Anda capai pengalaman membaca yang lebih baik di situs web yang Anda buat dan / atau desain.

Berikut adalah plugin, alat online, dan skrip yang akan membantu Anda buat tajuk berita luar biasa dan bersihkan teks yang bisa dibaca.

Typeplate

Ini tidak akan membuat pilihan desain untuk Anda, tetapi akan menentukan markup yang tepat dengan gaya untuk template tipografi umum. Itu juga bisa memberi Anda tips tentang cara menyalin teks gaya dengan benar.

Periksa: Demo | Dokumentasi

Gutenberg

Gutenberg adalah kit starter tipografi yang fleksibel dan mudah digunakan untuk pengembang dan desainer. Ini akan membantu Anda untuk mengatur ukuran tipe dasar, tinggi garis dan lebar maks. Gutenberg adalah proyek sumber terbuka, jadi silakan berkontribusi, mengadaptasi, dan memodifikasinya.

Periksa: Demo | Dokumentasi

Lettering.js

Lettering.js adalah plugin jQuery yang memberi Anda kontrol atas jenis kerning. Ini memungkinkan Anda untuk mendapatkan desain editorial dengan mudah dan mengelola kode. Situs web ini menampilkan contoh tipografi luar biasa yang dibuat dengan plugin ini untuk inspirasi.

Periksa: Demo | Dokumentasi

Typebase.css

Typebase.css adalah stylesheet tipografi yang dapat disesuaikan. Ini mengandung kedua versi saa dan lebih sedikit dan mudah dimodifikasi ke proyek web modern.

Periksa: Demo | Dokumentasi

FitText

FitText adalah plugin yang akan membuat ukuran font situs web Anda fleksibel. Ini akan membantu Anda mencapai tajuk yang dapat diukur untuk berbagai resolusi layar; dengan kata lain, buat tipografi Anda responsif. Itu dibuat untuk menampilkan teks besar saja.

Periksa: Demo | Dokumentasi

Kerning.js

Kerning.js membantu Anda mengubah, membuat skala, dan memodifikasi tipografi Anda dengan CSS secara otomatis. Sangat mudah untuk memulai dengan Kerning.js.

Periksa: Demo | Dokumentasi

Typeettings.css

Typesettings.css adalah taman bermain Anda untuk membuat proyek web atau blog minimalis. Semua gaya tipografi yang digunakan di sini terinspirasi oleh dasar-dasar desain grafis.

Periksa: Demo | Dokumentasi

Ransel

Dengan Rucksack Anda dapat menghasilkan tipografi cairan yang luar biasa berkat properti baru yang responsif pada ukuran font. Membuat tipografi responsif dibuat sangat mudah.

Periksa: Demo | Dokumentasi

FlowType.JS

Tipografi yang paling mudah dibaca berisi antara 45 dan 75 karakter per baris tetapi untuk menemukan keseimbangan adalah tugas yang menantang bagi pengembang. FlowType.JS mengubah ukuran font dan selanjutnya ketinggian garis berdasarkan lebar elemen tertentu.

Periksa: Demo | Dokumentasi

Blast.js

Blast.js akan membantu Anda memisahkan teks untuk mempermudah memanipulasi tipografi. Ini berisi 4 pembatas built-in: karakter, kata, kalimat, dan elemen. Itu juga dapat mencocokkan ekspresi dan frasa khusus.

Periksa: Demo | Dokumentasi

slabText

slabText adalah skrip sederhana yang membagi headline menjadi baris untuk mengisi ruang horisontal yang tersedia dengan sempurna. Script menghitung jumlah karakter yang ideal untuk ditetapkan di setiap baris dengan membagi lebar yang tersedia dengan ukuran font piksel.

Periksa: Demo | Dokumentasi

Jenis Skala

Dengan Jenis Skala Anda dapat melihat dulu dan memilih skala jenis yang tepat untuk proyek Anda. Tidak ada aturan - hanya bermain-main dengan ukuran font, skala dan font web yang berbeda.

Periksa: Demo | Dokumentasi

Berkenaan dgn percetakan

Tipografi membantu Anda membuat tipografi responsif. Yang perlu Anda lakukan hanyalah memilih beberapa font, mengatur beberapa pengaturan dan Anda akan mendapatkan tipografi responsif yang bagus.

Periksa: Demo | Dokumentasi

Typi

Typi adalah campuran saa yang dapat Anda gunakan untuk membuat tipografi yang responsif dengan mudah. Ini menciptakan ukuran font dan ketinggian garis untuk HTML dan elemen lainnya. Selain itu, Typi memiliki fungsi irama vertikal untuk menghitung ketinggian garis.

Periksa: Dokumentasi

Lining.js

Dengan plugin Lining.js, Anda akan mendapatkan kontrol penuh atas tipografi web. Ini didukung pada sebagian besar browser populer seperti Safari, Google Chrome, Opera, dan Mozilla Firefox.

Periksa: Demo | Dokumentasi

Bonus: 2 Alat Lebih Banyak!

Status Jenis Web

Keadaan Jenis Web adalah situs web yang menawarkan data terkini tentang dukungan untuk jenis dan fitur di seluruh web. Anda dapat menggunakan pencarian atau kategori, seperti kerning, spasi modal, pemuatan font CSS, dan lainnya untuk menemukan apa yang Anda butuhkan..

Tipografi

Typograph adalah web yang luar biasa dan plugin sketsa yang memungkinkan Anda untuk menempatkan spasi tanpa putus setelah kata-kata satu huruf, hubungkan nomor dan unit. Ini juga menghilangkan spasi ganda, masuk, titik dan kesalahan ketik lainnya, sehingga Anda dapat mencapai tipografi bersih yang indah yang mudah dibaca.

Periksa: Dokumentasi