Memahami Menulis Tipografi Untuk Web
Dalam Desain Web, subjek tipografi penting ketika mempertimbangkan semua area pengalaman pengguna. Setiap situs web memiliki kebutuhan akan teks, dan ada panduan yang dapat Anda ikuti untuk membangun tata letak yang sangat menakjubkan. Garis kisi, huruf, tinggi font, spasi teks, skema warna, dan properti serupa lainnya harus dipertimbangkan.
Pada artikel ini saya ingin mempelajari dunia tipografi web. Kami akan melihat ke dalam ide populer di balik perancangan teks halaman web yang kredibel. Sepanjang jalan saya akan memperkenalkan beberapa properti CSS3 bermanfaat desainer yang sering lupa.
Saya telah mencoba untuk lebih fokus pada teori dan ideologi untuk Web. Ini memberikan fokus yang lebih luas pada teks digital secara umum, dan Anda, perancang web kemudian dapat memilih gaya mana yang akan diterapkan untuk tujuan mana. Konteks selalu menjadi kunci dan Anda harus menentukan ini dengan tepat untuk setiap proyek yang Anda kerjakan. Pertimbangkan panduan ini sebagai paket referensi yang penuh dengan tren web modern dari inovator tipografi di seluruh dunia.
Ukur Paragraf Anda
Anda tidak perlu mengeluarkan tongkat pengukur untuk pengukuran semacam ini. Sebenarnya ukuran terkait dengan tipografi mengacu pada lebar (horizontal) dari setiap paragraf yang diberikan pada halaman Anda. Ini bukan topik yang selalu dibahas, tetapi itu mempengaruhi keterbacaan konten Anda. Sebagai aturan umum, Anda ingin membatasi satu garis panjang sekitar 75-85 karakter (tidak harus termasuk spasi).
Sekarang, ini mungkin tampak seperti peregangan untuk beberapa tata letak yang lebih luas. Terutama jika desain Anda cair dan dimaksudkan untuk beradaptasi ketika pengguna kembali ukuran jendela browser mereka. Anda selalu dapat mengatur CSS lebar maks properti di div konten utama Anda. Margin pengkodean dan ukuran font dalam unit yang dapat diukur (persentase, em) daripada piksel akan memungkinkan fleksibilitas seperti itu dalam tata letak apa pun.
Tidak ada satuan ukuran maksimum yang harus diwaspadai. Bagaimana Anda menulis konten dan membentuk kata menjadi kalimat jauh lebih penting daripada lebar setiap baris. Namun perlu diingat bahwa kalimat yang lebih panjang jauh lebih sulit dibaca dibandingkan dengan kalimat yang lebih pendek dan ringkas.
Memimpin Dijelaskan
Dalam mendesain, bersama dengan ukuran paragraf Anda, Anda juga harus mempertimbangkan ide terkemuka. Kata itu diucapkan “ledd-ing”, seperti timah yang digunakan dalam pensil. Nama ini berasal dari hari-hari yang lebih tua dari penyusunan huruf mekanis di mana strip timah ditempatkan di antara baris teks.
Memimpin masih merupakan konsep yang sangat penting dalam desain web dan berjalan seiring dengan langkah-langkah paragraf. Saat lebar paragraf Anda meningkat, Anda harus menerapkan kenaikan yang sama dengan jumlah lead, atau ruang antar baris teks. Ruang ekstra ini membuat membaca jauh lebih mudah di mata Anda.
Jika Anda membaca sekilas teks yang sangat rapat, Anda mungkin merasa sulit untuk fokus pada satu baris. Jika demikian, coba tingkatkan jumlah arahan dengan CSS tinggi garis milik. Anda selalu ingin lebih banyak ruang di antara baris teks daripada di antara kata-kata. Kalau tidak, blok teks Anda mungkin muncul sebagai koran cetak dan tidak akan mudah digunakan untuk membaca sekilas.
Teknik yang solid adalah menerapkan lebih banyak ruang daripada yang dibutuhkan semula dan menguranginya jika perlu. Tidak semua teks dibuat sama dan Anda pasti akan membutuhkan paragraf dengan format internal yang berbeda seperti kata tebal, tautan jangkar, garis bawah, dll. Dengan beberapa petunjuk tambahan, perubahan ini tidak akan terasa begitu tidak seimbang dibandingkan dengan teks lainnya.
Gunakan Ukuran Font Alami
Masih ada beberapa situs web yang memilih untuk tetap menggunakan ukuran font yang lebih kecil dari rata-rata. 11px-12px tampaknya jauh lebih banyak “standar profesional” untuk tata letak bisnis. Tetapi ukuran ini tidak membantu mayoritas pengunjung yang mencari informasi spesifik.
Umumnya browser web default ke 16px jika Anda tidak menerapkan aturan CSS. Bahkan ini dapat dianggap agak kecil jika Anda memiliki ruang ekstra di tata letak Anda untuk mengakomodasi teks yang lebih besar. Ukuran font yang lebih besar hanya terlihat lebih bagus dan lebih mudah dibaca skim untuk kata kunci relatif. Font serif tidak sering dipilih sebagai bahan paragraf, tetapi Anda masih bisa menggunakannya. Saya sarankan menggunakan ukuran teks yang jauh lebih besar untuk font berbasis serif untuk meningkatkan keterbacaan dan menarik perhatian.
Menanggapi Lingkungan Pengguna
Saat Anda mencoba berbagai jenis dan ukuran font, area konten Anda harus beradaptasi. Unit standar yang saya gunakan adalah ems karena mereka dapat dengan mudah kembali ukuran berdasarkan ruang yang tersedia dan resolusi layar. Ini mengoptimalkan kinerja di sisi pengguna yang paling penting.
Tetapi ketika Anda memiliki konten yang sangat fleksibel itu membuat tata letak Anda rentan terhadap hasil kereta. Konten di area footer atau sidebar Anda mungkin berakhir miring atau tidak seimbang di beberapa browser. Atau Anda mungkin mengalami kesulitan dalam mengarahkan gambar atau bentuk media lain dalam teks utama Anda. Ada beberapa alternatif lain untuk menggunakan ems jika Anda memerlukan tata letak gaya tetap - tetapi cobalah kedua solusi untuk melihat mana yang paling Anda sukai.
Ingatlah bahwa lebar tetap dan ukuran paragraf akan mengunci banyak pengaturan dalam desain Anda. Ini bagus untuk konten yang mencakup banyak efek estetika stasioner - pikirkan gambar latar belakang atau banyak widget sidebar yang pas. Ini juga merupakan proses sederhana untuk membangun area konten cairan di kolom kiri dengan sidebar tetap di sebelah kanan.
Gaya Berdasarkan Konteks
Beberapa trik CSS lain yang sangat rapi telah disembunyikan dari desain utama. Secara khusus ada tren disalin dari pekerjaan cetak yang dapat diterapkan dalam konteks yang tepat.
Banyak perancang web bahkan tidak pernah menggunakan properti CSS indentasi teks. Anda memberikan nilai untuk indentasi baris pertama paragraf yang ditargetkan oleh aturan ini. Unit mengikuti opsi teks standar seperti piksel, poin, ems, persentase ... Ini tentu bukan tren yang akan Anda temukan di sebagian besar blog. Tapi itu memberikan ritme halaman yang bagus saat membaca blok teks yang besar.
Ada jenis pemilih CSS yang dikenal sebagai a elemen semu. Ini dapat menargetkan bagian tertentu dari pemilih konten apa pun. CSS3: pemilih pseudo huruf pertama sangat cocok untuk membuat gaya mewah pada paragraf penting. Anda dapat meramaikan setiap huruf pembuka paragraf - mirip dengan buku cerita yang cukup dongeng - menggunakan huruf tebal, miring, atau bahkan mengubah jenis huruf. Lihat contoh indah drop caps ini yang mencakup beberapa kode CSS tambahan yang dapat Anda manfaatkan.
Bermain dengan Spasi Huruf
Saya yakin banyak dari kita telah mendengar istilah pelacakan sebelumnya tetapi tidak pernah menyadari bahwa ini adalah ide yang sama dengan properti penspasi huruf CSS. Kedua konsep ini satu dalam satu yang sama, terkait antara tipografi cetak dan digital. Unit ini berhubungan dengan ruang antar huruf dalam satu baris teks. Ini adalah efek yang sangat bagus untuk diterapkan pada header dan bahkan beberapa blok konten yang lebih kecil di dalam situs Anda.
Sangat penting untuk tidak membingungkan istilah jarak antar huruf dengan kerning. Keduanya terkait dengan tipografi dan jarak antar huruf. Namun kerning secara khusus mengacu pada jarak antara 2 huruf dalam satu kata. Properti penspasian surat berlaku untuk seluruh elemen teks, baik itu kata atau paragraf atau tajuk atau tautan jangkar. Ingatlah ini ketika Anda bermain-main dengan ide-ide baru untuk gaya.
Saya sering menggunakan beberapa piksel / titik spasi huruf pada header dengan semua huruf besar. Ini memecah karakter individu dengan beberapa ruang ekstra dan juga muncul sebagai sangat didefinisikan “menuju” melihat. Penspasian huruf negatif juga berfungsi dengan baik dalam konteks yang benar. Saya biasanya menempel pada unit yang lebih kecil, mungkin -0.03em atau -0.1em paling banyak.
Menggabungkan dan Mencocokkan Jenis
Konsep desain di balik tipografi web tentu saja merupakan bentuk seni, bukan ilmu pengetahuan. Ada pedoman yang bisa Anda ikuti, tetapi tidak ada aturan yang Anda miliki. Ini berarti Anda memiliki kebebasan yang sangat besar untuk bereksperimen dengan mencampur dan mencocokkan berbagai font yang Anda miliki.
Sejauh ini kombinasi tipografi yang paling populer mencakup serif / sans-serif split untuk konten header dan paragraf. Saya suka beralih keduanya, tetapi lebih sering saya akan menggunakan font serif di bagian header. Tanda dan goresan ekstra pada setiap huruf membuatnya tampak lebih tersanjung sebagai teks halaman dominan.
Selain itu font sans-serif lebih bersih dan lebih mudah untuk digabungkan bersama dalam kalimat. Itu tidak berarti font serif tidak akan berfungsi dalam paragraf. Sebenarnya ada banyak contoh bagus! Tetapi konsep yang kurang dikenal bernama x-height sangat penting untuk membedakan kompleksitas jenis huruf. Dari melihat baseline beberapa kata, Anda akan mengetahui bagaimana font tersebut “cocok” satu sama lain.
Perlu juga dicatat pentingnya ruang antara elemen-elemen yang berbeda ini. Anda mungkin akan menggunakan 2 atau 3 gaya tajuk yang berbeda, sehingga masing-masing akan lepas dengan tampilan yang berbeda. Saya cenderung menjaga elemen h2 / h3 saya sedikit lebih dekat dengan blok paragraf berikut, karena ini menyiratkan ada korelasi antara konten.
Korelasi ini sangat berguna ketika Anda menggunakan dua tipografi yang benar-benar berbeda tepat di sebelah satu sama lain. Saya sarankan tidak lebih dari 3 keluarga font yang berbeda per set konten. Setelah terlalu banyak penyesuaian kata-kata Anda tampak campur aduk dan seluruh halaman tampak seperti campur aduk font yang disalahartikan.
Kesimpulan
Harapan saya konsep-konsep ini akan menjelaskan masalah rumit tipografi digital. Mungkin sulit benar-benar masuk ke pekerjaan sebagai desainer, terutama jika keseluruhan topiknya asing bagi Anda. Tetapi teruslah belajar dan pastikan untuk berlatih banyak hal!
Minggu depan: Tetap disini karena kami akan melihat beberapa alat dan sumber daya yang bermanfaat untuk tipografi web yang lebih baik.
Lebih…
Berikut ini lebih banyak tulisan terkait tipografi:
- Etalase Desain Web dengan Tipografi Cantik
- Tipografi yang Lebih Baik Untuk Situs Web Modern
- Panduan Cepat untuk Tipografi: Belajar dan Terinspirasi
