15 Alat Tipografi Dalam Talian Semua Pereka Perlu Tahu
Tipografi adalah asas bagi setiap reka bentuk, kerana bacaan adalah salah satu perkara yang paling asas yang kita lakukan di web. Tipografi yang anda pilih mempunyai kesan ke atas pelbagai aspek laman web, termasuk kebolehbacaan, mood, dan pengalaman pengguna keseluruhan. Ia penting untuk pereka dan pemaju untuk ketahui prinsip asas tipografi kepada membuat reka bentuk yang menyenangkan dibaca.
Kami telah bercakap tentang alat pasangan font sebelum, dan hari ini kami akan berkongsi dengan anda jenis alat yang boleh anda mencapai pengalaman membaca yang lebih baik di laman web yang anda bina dan / atau reka bentuk.
Berikut adalah plugin, alat dalam talian, dan skrip yang akan membantu anda membuat tajuk utama yang hebat dan teks boleh dibaca bersih.
Typeplate
Ia tidak akan membuat pilihan reka bentuk untuk anda, tetapi akan menentukan markup yang tepat dengan gaya untuk template tipografi biasa. Ia juga boleh memberi anda petua tentang cara menyalin salinan teks dengan betul.
Semak: Demo | Dokumentasi
Gutenberg
Gutenberg adalah kit pemula typografi yang fleksibel dan mudah digunakan untuk pemaju dan pereka. Ia akan membantu anda menetapkan saiz asas, lebar baris dan lebar maksimum. Gutenberg adalah projek sumber terbuka, jadi jangan ragu untuk menyesuaikan, menyesuaikan dan mengubahnya.
Semak: Demo | Dokumentasi
Lettering.js
Lettering.js adalah plugin jQuery yang memberikan anda kawalan ke atas jenis kerning. Ia membolehkan anda untuk mendapatkan reka bentuk editorial dengan mudah dan menguruskan kod. Laman web ini memaparkan contoh tipografi tipografi yang dibuat dengan plugin ini untuk inspirasi.
Semak: Demo | Dokumentasi
Typebase.css
Typebase.css adalah lembaran gaya tipografi yang disesuaikan. Ia mengandungi kedua-dua saas dan kurang versi dan mudah diubahsuai ke dalam projek web moden.
Semak: Demo | Dokumentasi
FitText
FitText adalah plugin yang akan menjadikan fon laman web anda fleksibel. Ia akan membantu anda mencapai tajuk utama yang boleh terbaca untuk pelbagai resolusi skrin; dengan kata lain, membuat tipografi anda responsif. Ia dibuat untuk memaparkan teks besar sahaja.
Semak: Demo | Dokumentasi
Kerning.js
Kerning.js membantu anda mengubah secara automatik, skala, dan mengubah tipografi anda dengan CSS. Sangat mudah untuk memulakan dengan Kerning.js.
Semak: Demo | Dokumentasi
Typesettings.css
Typesettings.css adalah taman permainan anda untuk membuat projek web atau blog yang minimalis. Semua gaya tipografi yang digunakan di sini diilhamkan oleh asas reka bentuk grafik.
Semak: Demo | Dokumentasi
Rucksack
Dengan Rucksack anda boleh menghasilkan tipografi tipografi yang mengagumkan terima kasih kepada harta yang baru dan responsif pada saiz fon. Mewujudkan tipografi responsif dibuat sangat mudah.
Semak: Demo | Dokumentasi
FlowType.JS
Tipografi yang paling mudah dibaca mengandungi antara 45 dan 75 aksara setiap baris tetapi untuk mencari keseimbangan itu merupakan tugas yang mencabar untuk pemaju. FlowType.JS mengubah saiz fon dan seterusnya ketinggian baris berdasarkan lebar unsur tertentu.
Semak: Demo | Dokumentasi
Blast.js
Blast.js akan membantu anda memisahkan teks untuk memudahkan manipulasi tipografi. Ia mengandungi 4 pembatas yang terbina dalam: watak, perkataan, ayat, dan unsur. Ia juga boleh menyesuaikan ungkapan dan frasa adat.
Semak: Demo | Dokumentasi
slabTeks
slabText adalah skrip mudah yang memisahkan tajuk utama ke dalam baris untuk mengisi ruang mendatar yang sempurna. Skrip mengira bilangan watak yang ideal untuk menetapkan setiap baris dengan membahagikan lebar yang tersedia dengan saiz fon piksel.
Semak: Demo | Dokumentasi
Jenis Skala
Dengan Skala Jenis, anda boleh pratonton dan memilih skala jenis yang sesuai untuk projek anda. Tiada peraturan - hanya bermain-main dengan saiz font, skala dan fon web yang berbeza.
Semak: Demo | Dokumentasi
Typographic
Typographic membantu anda membuat respons tipografi. Apa yang perlu anda lakukan hanyalah memilih beberapa fon, menetapkan beberapa tetapan dan anda akan mendapat tipografi responsif yang bagus.
Semak: Demo | Dokumentasi
Typi
Typi adalah campuran saas yang boleh anda gunakan untuk membuat tipografi responsif dengan mudah. Ia mewujudkan saiz fon dan ketinggian baris untuk HTML dan unsur-unsur lain. Juga, Typi mempunyai fungsi irama menegak untuk mengira ketinggian baris.
Semak: Dokumentasi
Lining.js
Dengan plugin Lining.js, anda akan mendapat kawalan lengkap mengenai tipografi web. Ia disokong pada pelayar yang paling popular seperti Safari, Google Chrome, Opera, dan Mozilla Firefox.
Semak: Demo | Dokumentasi
Bonus: 2 Alat Lebih!
Negeri Jenis Web
State of the Web Jenis adalah laman web yang menawarkan data terkini tentang sokongan untuk jenis dan ciri-ciri di seluruh web. Anda boleh menggunakan carian atau kategori, seperti kerning, jarak modal, memuatkan fon CSS, dan banyak lagi untuk mencari apa yang anda perlukan.
Typograph
Typograph adalah web yang hebat dan plugin lakaran yang membolehkan anda meletakkan ruang yang tidak pecah selepas perkataan satu huruf, sambungkan nombor dan unitnya. Ia juga menghilangkan ruang ganda, memasuki, titik dan kesilapan yang lain, supaya anda dapat mencapai tipografi yang indah yang mudah dibaca.
Semak: Dokumentasi
