Dengan munculnya situs web responsif, penting untuk melihat bagaimana tipografi web berubah, dan ke mana hal itu menuju. Dalam artikel ini, kita akan mulai dengan dasar-dasar tipografi, dan menjelaskan solusi yang desainer web dapat gunakan saat berhadapan dengan tipografi responsif.

Unit Tipografi Dari Masa Lalu ke Komputer

Tipografi, selama berabad-abad, adalah sebuah domain dengan aturan kerajinan yang ketat. Typographers tinggal di dunia mereka sendiri yang diperintahkan oleh pengukuran picas, poin, ciceros, dll. Sejak saat ini, unit tipografi telah didirikan di grafis komputer:

• Font diukur dengan ukuran titik: Anda tidak akan pernah mengatakan, “saya menggunakan ukuran font 3,527 mm,” Anda akan mengatakan, “saya menggunakan ukuran font 10 titik.”
• 1 inci = 72 poin: 1 titik = 1/72 inci, atau 1 titik = 0,3527 mm. Ini telah diterima di seluruh dunia sejak 1980-an, sebelum ada beberapa poin tipografi yang berasal dari kaki, inci atau mm.
• Picas digunakan dalam PostScript: PostScript adalah bahasa komputer yang menjelaskan tampilan tata letak, dan digunakan untuk mencetak desain resolusi tinggi.
• Pixel dan EMS yang digunakan dalam CSS: web desain bisa diterjemahkan ke dalam unit CSS yang biasanya piksel tapi EMS dapat digunakan juga.

Pentingnya Karakter Per Baris (CPL)

Fokus utama perancang ketika bekerja dengan tipe adalah bahwa itu harus terbaca.

Ketika baris teks terlalu panjang itu membuat proses membaca lambat, sulit dan melelahkan. Untuk menghindari hal ini, baris teks harus mudah dikenali-ini tergantung pada proporsi tinggi baris vs. panjang garis, jarak antara huruf dan kata, dan bentuk dan berat huruf. Jumlah karakter yang Anda masukkan ke dalam setiap baris juga penting. Berikut adalah aturan dasar:

• 60 karakter maks: Gunakan ini ketika bekerja dengan baris teks (yang tidak dalam kolom).
• 45-60 karakter maks: Gunakan ini saat memasukkan teks dalam beberapa kolom.
• 70-75 karakter maks: Gunakan ini ketika menempatkan teks dalam 1-kolom.

Seperti aturan Desain, ini bisa Fine tuned tergantung pada memimpin antara setiap baris. Jika Anda ingin menguji karakter yang berbeda per baris (CPL), kemudian memeriksa situs ini, Golden ratio tipografi Kalkulator. Berikut adalah beberapa formula desain lainnya yang perlu diingat:

• Ukuran titik font dikalikan dengan 2 = lebar kolom (dalam picas)
• 1 Pica = 12 poin
• 1 em = ukuran titik tertentu saat ini

Alasan di balik menggunakan unit tipografi untuk tujuan ini adalah untuk mendefinisikan jenis hubungan yang konsisten dan mudah. Mari kita lihat aturan di atas dalam tindakan… Katakan kita ingin mencari tahu apa lebar kolom adalah dalam Ems (tidak picas), dan kita menggunakan 10 titik font:

• 10 poin dikalikan 2 = sebuah lebar kolom 20 Pica
• Jika 20 picas sama dengan 12 poin, maka 20 dikalikan dengan 12 = 240 poin
• Jika 1 em sama dengan 10 poin, maka 240 poin dibagi dengan 10 poin = 24 em

Tantangan Tipografi yang Responsif

Ada banyak tantangan yang dihadapi perancang ketika bekerja dengan tipografi yang responsif. Masalah utama adalah memiliki sedikit kontrol atas CPL ketika desain berukuran atas atau bawah. Saya telah melihat banyak situs web yang tidak mengambil dasar tipografi (misalnya CPL dan menggunakan font berkualitas tinggi) menjadi pertimbangan, tetapi sangat penting untuk melakukannya. Sangat bagus bahwa desain responsif memberi kita kemampuan untuk menggunakan seluruh lebar layar, tapi ini tidak berarti kita harus menggunakan font 16 pixel di kolom yang lebar 2.000 piksel. Dan ini tidak berarti melupakan pentingnya hinting, kerning dan aspek teknis lainnya.

Selain itu, karena desain web responsif menargetkan perangkat seluler, situs web sering kali menjalani pengawasan ketat dengan elemen yang dihapus untuk mengurangi bandwidth – elemen pertama yang akan digunakan adalah font web. Jadi jika Anda bekerja dengan sebuah perusahaan yang ingin mengoptimalkan untuk pengguna bandwidth rendah, kemudian menyederhanakan desain Anda dengan hanya menggunakan font Web-Friendly.

Pendekatan Goldilocks (dan Kendalanya)

Ketika browsing melalui artikel yang berkaitan dengan tipografi responsif, mudah untuk melihat bahwa tipografi responsif memiliki banyak makna untuk berbagai orang. Berikut adalah daftar solusi yang mungkin Anda temukan:

• Menggunakan ukuran teks dan relatif yang lebih besar
• Gunakan font untuk ikon (mereka resizable dan dapat ditata dengan CSS)
• Menggunakan web font yang dioptimalkan untuk perangkat mobile (menggunakan font yang berbeda untuk jenis layar yang berbeda)
• Gunakan timbangan yang bermakna berdasarkan rasio emas
• Gunakan rasio CPL yang tepat (50-75)
• Ukuran jenis dasar skala untuk mencocokkan ukuran layar perangkat dan resolusi (ketika menggunakan EMS di CSS semua ukuran font dinyatakan sebagai proporsi untuk ukuran font dasar)
• Sesuaikan ukuran font berdasarkan jarak antara wajah dan monitor (konsep yang paling tidak biasa yang saya temui)

Masing-masing konsep memiliki penalaran baik di belakang mereka-nilai font, mengisyaratkan dan Optical scaling berhubungan dengan kualitas jenis, dan rasio emas modular adalah subjek yang menakjubkan, bukan hanya untuk jenis tetapi desain pada umumnya. Tapi kita hanya akan membahas konsep yang berhubungan langsung dengan RWD filsafat dan alur kerja:

• Ukuran jenis dasar timbangan untuk mencocokkan ukuran layar perangkat dan resolusi
• Gunakan rasio CPL yang tepat (50-75)

Beberapa orang berurusan dengan masalah ini karena menggunakan unit relatif seperti Em dan % (tidak mutlak atau unit tetap seperti titik) – keuntungannya adalah bahwa semua ukuran teks terikat pada satu parameter. Namun, konsep ini lebih tua dari RWD sendiri, dan tidak mengambil CPL atau resolusi layar ke akun. Salah satu solusi yang tidak mengambil CPL dan resolusi layar ke akun adalah pendekatan Goldilocks.

Hal yang unik tentang pendekatan ini adalah dengan kurang dari 3KB dari CSS, itu di klaim untuk membuat layout yang melestarikan sekitar 66 CPL per kolom dan menyesuaikan ukuran font untuk perangkat yang berbeda (dengan memperhitungkan resolusi!). Ini adalah prestasi cukup baik, dan semua tanpa satu baris kode JavaScript! Tapi… dunia tidak sempurna dan prestasi ini masih memberlakukan beberapa kendala:

1. Pendekatan Goldilocks bergantung pada ukuran font default browser untuk menentukan ukuran em. Sebagai hasilnya, kita kehilangan beberapa tingkatan kontrol atas bagaimana halaman terlihat karena sulit untuk menjaga hal di EMS, karena gambar selalu diukur dalam piksel.
2. Tidak memungkinkan kita untuk menggunakan tata letak cairan.

Solusi Tipografi Responsif Saya

Sementara saya sangat menghargai kesederhanaan pendekatan Goldilocks, saya ingin solusi yang memungkinkan saya untuk menggunakan 100% dari real estat layar (tidak peduli ukuran), dan memungkinkan saya selalu memiliki 60 CPL saat menggunakan tata letak cairan. Saya menemukan tidak ada. Ini sedikit mengejutkan mengingat jumlah situs RWD dibuat baru-baru ini. Tapi solusi yang saya temukan sangat sederhana.

Bagaimana jika bukan mengukur lebar kolom dalam unit em, kita mengubah nilai ke piksel. Ingat, 1 em sama dengan ukuran titik spesifik saat ini. Jadi, kami solusi untuk memungkinkan penskalaan cairan kolom teks sambil menjaga 60 CPL akan:

• Menerapkan beberapa layout kolom: Anda bisa melakukan ini dengan menggunakan hitungan kolom CSS.
• Ubah lebar kolom dari EMS menjadi piksel: Anda dapat melakukan ini dengan menggunakan persamaan sederhana ini-tubuh Font-Size = lebar kolom dalam piksel/lebar kolom yang diinginkan di unit em

Lihat contoh ini yang saya buat dengan menggabungkan solusi jenis responsif ini. Ini adalah setup konservatif berdasarkan aturan lama dari 24 EMS kolom. Skrip memeriksa lebar kolom dalam piksel, membagi angka ini dengan 24 dan menetapkan nomor ini ke ukuran font tubuh. Ini bukan kerangka CSS-itu hanya contoh cara lain untuk membuat tipografi responsif sambil menjaga teks dioptimalkan untuk keterbacaan dalam tata letak fluida.

sumber: 99designs.com