Memahami Tipografi 10 Alat dan Sumberdaya Bermanfaat
Dalam artikel terakhir saya tentang Memahami Tipografi, saya menulis tentang apa yang masuk ke dalam desain tipografi dan cara memanipulasinya untuk memperbaiki tata letak situs web Anda dan untuk meningkatkan pengalaman pengguna. Dalam artikel ini, saya mendaftar 10 alat favorit saya untuk tipografi di web.
Ini dapat membantu membangun kisi-kisi HTML dan area konten, membuat gaya CSS, menghasilkan nama font, dan banyak hal keren lainnya. Lihatlah beberapa tautan di bawah ini dan pastikan untuk memberi tahu kami pendapat Anda di area diskusi pos.
Bacaan yang Disarankan: Memahami Tipografi: Menulis Untuk Web
Matriks font
Panduan online ini diposting oleh blog desain 24ways. Ini fitur tabel matriks semua font web standar yang akan Anda temukan secara default dari berbagai vendor perangkat lunak. Judul populer termasuk program Windows, Mac OS X, Microsoft Office, dan Adobe Creative Suite.
Pemeriksaan Kontras Warna
Kontras warna sering menjadi masalah ketika Anda menjelajah di luar model standar hitam-putih. Ketika Anda menemukan kecocokan, rasanya seperti kesempurnaan desain. Namun pilihan kombo warna yang buruk terlihat sangat buruk dan akan memengaruhi desain keseluruhan secara negatif. Alat web kecil ini dapat membantu Anda memilih satu set warna yang cocok satu sama lain untuk tata letak gaya apa pun.
HTML-Ipsum
Apakah Anda memerlukan alat Lorem Ipsum yang dapat melakukan lebih dari sekedar output teks? Generator HTML online ini akan membuat blok kode untuk elemen halaman yang paling umum. Beberapa contoh termasuk daftar tidak berurutan, daftar definisi, formulir web, tabel, dan banyak solusi lainnya.
Typechart
Typechart adalah salah satu alat favorit saya sebagai pengembang CSS. Saya sering mencari untuk mencocokkan font tertentu pada sistem saya dengan proyek web, tetapi saya tidak punya waktu untuk memeriksa seluruh koleksi saya. Alat luar biasa ini memungkinkan Anda menyaring pilihan-pilihan keluarga font yang populer dan bahkan mengunduh kode CSS yang tepat!
PX-to-EM.com
Kecuali jika Anda mengatur ulang ukuran teks peramban default Anda kemungkinan akan memiliki masalah mencocokkan ems dengan piksel. Aplikasi dalam peramban ini menyediakan tabel konversi dan antarmuka pengguna untuk px ke em. Ini adalah alat yang sangat sederhana, tetapi ia menawarkan panduan praktis dengan fungsionalitas yang sangat sederhana - dan Anda tidak dapat mengalahkan label harga gratis.
Set Tipe CSS
Saya tidak menyarankan untuk tetap menggunakan Set Tipe CSS terlalu lama karena ini benar-benar alat pemula. Ini memungkinkan Anda untuk menghasilkan kode CSS berdasarkan pada properti font spesifik yang Anda pilih. Meskipun sangat berguna pada awalnya, seiring waktu ia menjadi penopang untuk bersandar. Dan Anda tidak akan bisa termotivasi untuk menguasai properti CSS sendiri. Tetapi jika Anda perlu menghemat waktu pada suatu proyek, alat ini tidak dapat diabaikan.
membalik tipikal
Berikut adalah satu contoh perpustakaan pratinjau font yang sangat unik. membalik tipikal termasuk beberapa font yang asli untuk Sistem Operasi Anda. Ini secara otomatis memindai direktori font Anda untuk mengambil solusi paling aman di web. Anda dapat membandingkannya berdampingan dan dengan mudah memilih di antara opsi favorit Anda. Ini adalah penghemat waktu hebat lainnya yang Anda bookmark dan jangan pikirkan sampai menit terakhir.
Kotak Tipografi
Ada banyak pembicaraan tentang mendesain grid di HTML dan CSS. Anda mungkin memahami konsep tentang cara kerja kisi, dan mengukur situs web dalam piksel tidak berbeda. Tutorial grid oleh CSS-Trik ini lebih seperti upaya yang dipandu untuk memperkenalkan dasar-dasar tipografi untuk era digital. Ini adalah topik yang jauh lebih maju di bidang desain web. Tetapi jika Anda memiliki kesabaran saya sarankan memeriksa rincian untuk melihat bagaimana properti kotak ini benar-benar dapat mempengaruhi tata letak halaman Anda.
WhatTheFont!
Kita semua telah menemukan logo atau gambar dengan font yang tidak dapat diidentifikasi. WhatTheFont telah berkeliling di Internet selama beberapa tahun dan ini masih menjadi favorit saya. Anda memilih gambar untuk diunggah dan skripnya akan menganalisis teks di dalam gambar untuk mencocokkan tipografi yang serupa. Aplikasi ini bahkan akan menautkan Anda ke produk eksternal tempat Anda dapat membeli setiap font sesuai keinginan Anda.
Kalkulator Baseline / Line-Height
Akhirnya alat yang sangat ampuh untuk menghasilkan ketinggian garis dan sifat ritme. Cukup masukkan nilai untuk ukuran font dasar dan tinggi baris, atau sertakan kode CSS khusus Anda sendiri ke samping. Aplikasi ini akan menghasilkan pratinjau dalam beberapa gaya yang berbeda sehingga Anda bisa mendapatkan gambaran tentang bagaimana properti ini akan terlihat di situs web Anda sendiri.
