Human-Computer Interaction User Interface Design

Typography

Most people think typography is about fonts. Most designers think typography is about fonts. Typography is more than that, it’s expressing language through type. Placement, composition, type choice.

Mark Boulton

Topik bahasan:

  1. Istilah dalam tipografi
  2. Legibility & readability
  3. Display type & text type
  4. Font style
  5. Pemilihan font

Penjelasan Tipografi dalam bentuk video dapat diakses pada:

PENGANTAR

Sebelum membahas tentang tipografi, terdapat beberapa istilah yang perlu dipahami, sebagai berikut.

KARAKTER

Komponen terkecil dari bahasa tulisan. Huruf/ letter, angka-angka, tanda baca dan simbol-simbol lain termasuk dalam karakter.

HURUF

Satuan dalam alfabet (yang dalam bahasa Latin terdiri dari 26 buah).

TYPEFACE

Typeface refers to a family of fonts sharing the same name, like “Arial” or “Georgia.” Typeface adalah karakter-karakter yang didesain khusus untuk digunakan bersama-sama. Karakter-karakter ini memiliki desain dan proporsi yang serupa dan konsisten. Istilah typeface lebih mengarah pada bentuk/ desain huruf yang digunakan.

FONT

A font is a choice of typeface and size and style, like roman, italic, oblique, boldface, etc. Font pada jaman dahulu adalah satu set metal type dari suatu typeface, yang sama ukuran dan sama style-nya. Satu set huruf untuk teks yang berukuran 9.4 point misalnya, adalah sebuah font. Satu set yang berukuran 20 point adalah font yang berbeda, walaupun keduanya tetap menggunakan desain typeface yang sama.

SERIF & SANS SERIF

Serif adalah bentuk tambahan pada huruf berupa semacam kait. Ada typeface yang memiliki serif, ada juga yang tidak. Typeface jenis serif muncul lebih dulu dibandingkan jenis sans serif (tanpa serif).

TIPOGRAFI

Tipografi dimaknai sebagai segala disiplin yang berkenaan dengan huruf. Pada prakteknya, saat ini tipografi telah jauh berkolaborasi dengan bidang-bidang seperti multimedia dan animasi, web dan online media lainnya, sinematografi, interior, arsitektur, desain produk, dll. Topogarafi adalah seni dan ilmu menampilkan teks (atau “pengaturan type” seperti yang disebut oleh print designer).

LEGIBILITY & READABILITY

Legibility berhubungan dengan kemudahan mengenali dan membedakan masing-masing huruf atau karakter. Legibility menyangkut desain atau bentuk huruf yang digunakan. Satu jenis huruf dikatakan legible apabila masing-masing huruf atau karakter-karakternya mudah dikenali dan dibedakan dengan jelas satu sama lain.

Readability berhubungan dengan tingkat keterbacaan suatu teks. Teks yang readable berarti keseluruhannya mudah dibaca. Apabila legibility lebih membahas kejelasan karakter satu per satu, readability tidak lagi menyangkut huruf satu per satu, melainkan keseluruhan teks yang disusun dalam satu komposisi.

Legibility bisa menciptakan readability, karena biasanya jika kita mudah membedakan masing-masing karakter, maka keseluruhan teks akan lebih mudah dibaca. Penilaian terhadap tipografi adalah melalui indera penglihatan, oleh karena itu diharapkan agar desainer benar-benar memahami hal ini agar pesan yang disampaikan dipahami secara tepat oleh pembaca.

Kombinasi Huruf dan Jaraknya

Huruf- huruf tertentu, bila diletakkan saling bersebelahan dalam jarak yang sangat dekat, dapat mengakibatkan orang salah mengenalinya. Pasangan huruf ini antara lain:
I + J = U
c + l = d
r + n = m
l + 3 = B
Kasus ini lebih sering terjadi pada jenis huruf sans serif.

Huruf Kapital dan Huruf Kecil

Bandingkan penggunaan huruf kapital pada keseluruhan teks di bawah ini:

TEKS YANG SELURUHNYA HURUF KAPITAL, LEBIH RENDAH LEGIBILITY DAN READABILITY-NYA DIBANDINGKAN HURUF KECIL ATAU VARIASI HURUF BESAR DAN KECIL. PADA TEKS YANG KESELURUHANNYA HURUF BESAR, TIDAK ADA PERBEDAAN TINGGI PADA TIAP HURUFNYA, SEHINGGA TERLIHAT SEPERTI GARIS HORIZONTAL YANG LURUS. INI MEMPERSULIT ORANG DALAM PENGENALAN KARAKTER.

dibandingkan dengan penggunaan teks kombinasi huruf kapital dan huruf kecil:

Teks yang seluruhnya huruf besar, lebih rendah legibility dan readability-nya dibandingkan huruf kecil atau variasi huruf besar-kecil. Pada teks yang keseluruhannya huruf besar, tidak ada perbedaan tinggi pada tiap hurufnya, sehingga terlihat seperti garis horizontal yang lurus. Ini mempersulit orang dalam pengenalan karakter.

Jarak Antarhuruf dan Antarkata

Jarak antar huruf dan antar kata memiliki pengaruh terutama bukan dalam hal legibility tetapi dalam hal readability. Mengatur jarak antar huruf dan antar kata artinya mengatur ruang negatif sebuah teks.

Jarak antar huruf yang terlalu dekat atau dempet menyebabkan rendahnya legibility dan readability. Pembaca jadi sulit mengenali karakter dan sulit menangkap kata per kata karena kurangnya ruang negatif dalam teks, padahal ruang negatif yang cukup adalah salah satu penunjang legibility.

Contoh jarak antarhuruf terlalu dekat

Jarak antar huruf yang terlalu renggang juga menyebabkan rendahnya readability. Pembaca jadi sulit menangkap kesatuan kata karena huruf-huruf yang saling berjauhan.

Contoh jarak antarhuruf yang terlalu renggang

Jarak antar kata yang terlalu sempit (kata-kata saling berdekatan) membuat pembaca sulit menangkap awal dan akhir dari sebuah kata. Walaupun mungkin legibility-nya cukup, tetapi hal ini menurunkan readability.

Contoh jarak antarkata yang terlalu sempit

Jarak antar kata yang terlalu lebar (kata-kata saling berjauhan) membuat mencari-cari kata berikutnya. Walaupun mungkin legibility-nya cukup, tetapi hal ini menurunkan readability.

Contoh jarak antarkata yang terlalu lebar

Jarak Antarbaris

Seperti jarak antar huruf dan kata, pengaturan jarak antar baris juga berpengaruh besar terhadap readability.

Mata sulit membaca teks dengan jarak antar baris yang terlalu besar, karena harus mencari baris selanjutnya yang letaknya jauh dari baris pertama. Kondisi seperti ini akan menurunkan readability.

Contoh jarak antarbaris terlalu besar

Teks Putih di Atas Background Hitam

Pilihan paling legible pada hal ini adalah teks hitam di atas background putih, namun sering kali orang membuat kebalikannya, teks putih di atas background hitam atau berwarna gelap.

Penggunaan teks putih di atas background hitam

DISPLAY TYPE & TEXT TYPE

Semua teks yang berfungsi sebagai penarik perhatian, digolongkan dalam display type. Teks-teks di luar display type yang fungsinya untuk dibaca dengan seksama disebut dengan text type.

Perbandingan display type dengan text type dapat dilihat pada gambar di bawah ini.

Display type cenderung mudah terlihat, berukuran besar dan singkat. Text type lebih memerlukan konsentrasi untuk membacanya, berukuran kecil dan panjang.

Perbedaan penggunaan display type dengan text type dapat dilihat pada tambeel berikut.

DISPLAY TYPE
TEXT TYPE
Untuk menarik perhatian pembaca Fungsi Untuk isi naskah, penjabaran pesan
Berukuran besar (12pt ke atas) Ukuran Berukuran kecil (12pt ke bawah)
Semua jenis. Menggunakan typeface dengan desain yang menarik Jenis huruf dan desain Serif dan sans serif. Typeface dengan legibility tinggi
Sedikit/ singkat Jumlah kata Banyak/ panjang
Judul, subjudul, pull quote Penerapan Body text, caption
Legibility tidak harus tinggi Legibility Legibility harus tinggi

FONT STYLE

Berikut adalah beberapa gaya umum yang dapat Anda gunakan untuk membangun kontras.

Beberapa jenis font style
  • Italic dan boldface membuat kontras dalam orientasi dan nilai, masing-masing, tanpa secara substransial mengubah bentuk huruf. Beberapa tipografi tidak memiliki bentuk italic, dan sebagai gantinya adalah oblique yang merupakan vers miring dari normal roman style.
  • Small caps adalah style berguna yang lain. Seperti italic, small caps terkadang adalah font yang dirancang tangan yang disertakan pada keluarga typeface (seringkali sedikit lebih lebar (wider) dan lebih ringan (lighter) dari huruf kapital) dan kadang-kadang hanya secara otomatis dihasilkan dengan menyusutkan font.

PEMILIHAN FONT

Prinsip-prinsip desain dapat digunakan dalam proses pemilihan font.

Simplicity & Contrast

Petunjuk untuk menerapkan simplicity dan contrast dalam pemilihan tipografi adalah:

  • Jangan gunakan lebih dari 2 atau 3 typeface, misalnya satu untuk bodytext, satu untuk display text.Jangan gunakan dua typeface dari kategori font yang sama, misalnya hanya menggunakan sans serif.
  • Gunakan size, weight, style (misalnya italic/ small caps), hue untuk membentuk kontras, tetapi 4-5 jenis variasi font harus cukup.

Serif vs Sans Serif

Jika ditanya, mana yang lebih baik: serif atau sans-serif? Jawabannya adalah semuanya tergantung penggunaan, mood dan proyek individual. Jawaban terbaik biasanya tidak terlalu clear – banyak proyek desain yang besar menggabungkan kedua style. Ini berlaku untuk proyek untuk versi cetak atau digital.

Serif dan sans-serif dapat bekerja di sejumlah aplikasi. Kuncinya, seperti halnya teknik atau tools desain lainnya, gunakan tipografi yang baik dengan tujuan sesuai konten.

Tools

Beberapa tools yang dapat digunakan dalam pemilihan font adalah:

  • Browser developer tools untuk memeriksa CSS style untuk melihat jenis font yang digunakan dalam sebuah website.
  • Indentifont: http://www.identifont.com, untuk mengidentifikasi nama sebuah font.
  • WhatTheFont: http://myfonts.com/WhatTheFont, untuk menemukan nama font.

Beberapa contoh penggunaan tipografi dalam desain dapat dilihat pada gambar-gambar di bawah ini.

REFERENSI

Visits: 3507

Similar Posts