Tuesday, August 16, 2022
spot_imgspot_imgspot_imgspot_img
HomeVisual DesignMenguasai Tipografi Responsif? Kamu Bisa Juga Loh. Yuk Baca Selengkapnya!

Menguasai Tipografi Responsif? Kamu Bisa Juga Loh. Yuk Baca Selengkapnya!

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

Da_Vinci_Units_cut_s
Unit kuno yang disajikan pada Vitruvian Man digambar oleh Leonardo Da Vinci.

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.

READABILITY
contoh dari 60 vs. 90 CPL menunjukkan masalah keterbacaan. Manakah dari contoh ini yang lebih mudah dibaca?

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

fullwidth
Sebuah fluida, 1-kolom teks berarti kita tidak mengontrol CPL.

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.

RELATED ARTICLES

Most Popular

Recent Comments