TYPOGRAFI - Pembelajaran Berbasis Web

Tipografi adalah salah satu bagian penting dari desain web yang mencakup segala hal mengenai tata huruf, teks, dan paragraf yang di tampilkan sedemikian rupa untuk memberikan kenyamanan dan kesan tertentu yang ingin disampaikan kepada pembaca. Pemilihan penggunaan tipografi yang tepat, akan memberikan kesan yang baik terhadap sebuah website. Teks yang digunakan dalam tingkat kemudahan untuk dibaca (readability) dan pemilihan kualitas huruf dalam kemudahannya untuk dibaca (legibility), mempengaruhi bagaimana pengguna memproses informasi dalam konten.

Apabila readability rendah, pembaca akan menghindari konten. Sedangkan di sisi lain, apabila readability tinggi, memungkinkan pengguna secara efisien membaca dan menerima informasi dalam teks. Tipografi memegang peranan yang sangat penting dalam web design. Mengingat 95% dari web design terdiri dari font, maka pengetahuan tipografi harus menjadi prioritas utama bagi web designer dan web developer.

1.      Dasar-Dasar Tipografi

a.       Salinan Isi vs Tipe Tampilan

Salinan Isi atau bentuk teks mengacu pada konten utama dari komunikasi, yaitu, konten  paragraf. Tipe tampilan, yang juga disebut tampilan teks atau judul teks, mengacu pada teks yang digunakan untuk dekorasi dan / atau struktur, seperti logo, judul, judul, dan sub-judul.

Fokus utama untuk salinan isi adalah kemudahaan untuk dibaca-tidak ada yang ingin mencoba untuk menguraikan seluruh paragraf dari jenis huruf dekoratif sulit dibaca, terutama pada ukuran kecil. Salianan isi harus ditetapkan secara sederhana, mudah dibaca, jenis huruf yang tidak terlalu kecil.

Fokus utama dari jenis tampilan adalah untuk memperindah atau menarik perhatian. Jenis tipe tampilan seperti judul biasanya terdiri dari kalimat pendek diatur dalam ukuran huruf yang lebih besar, dalam hal ini bahkan tipografi sangat dekoratif bisa terbaca. Dengan demikian, kita memiliki lebih banyak kebebasan untuk menggunakan tipografi agak kurang dibaca untuk jenis tampilan.

b.      Jenis Huruf

Kebanyakan jenis huruf modern memiliki spasi yang proporsional. Artinya, karakter individu bervariasi dalam jumlah ruang horizontal yang digunakan, begitu juga huruf  "i" mengkonsumsi ruang kurang dari "M." Sebaliknya, jenis huruf monospace, seperti Courier New, menetapkan jumlah yang sama ruang untuk setiap karakter . Misalnya, ini "i" di Courier jenis huruf New adalah lebar sama seperti huruf "N" dan "W" di jenis huruf yang sama. Jenis huruf  monospace berguna ketika kolom karakter harus menyelaraskan secara vertikal atau ketika kita membutuhkan nuansa tampilan, berbasis mesin tik. Font berjenis ‘monospace’ adalah tipe font yang lebar setiap karakternya sama panjangnya. Huruf ‘i’ akan mengambil panjang yang sama dengan huruf ‘w’. Contoh dari font jenis ini adalah Courier, Courier New, dan Andale Mono. Biasanya font jenis ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.

Jenis huruf dikelompokkan baik sebagai serif atau sans serif. Keluarga Serif font adalah salah satu jenis font tertua, font ini sudah ada sejak tahun 1200. Salah satu jenis keluarga Serif font yang sering kita kenal adalah Times New Roman, Georgia, Book Antiqua, Palatino dan Garamond. Serif Font juga sering disebut sebagai huruf ‘bersepatu’ karena memiliki pemanjangan pada bagian serif-nya.Font-font ini mencerminkan kualitas dan ketegasan. Selain itu, serif font juga dipercaya lebih mudah dibaca, diingat, dan mudah diserap oleh otak. Surat kabar dan majalah sering sekali menggunakan font ini sebagai main tipografinya. Sans-serif font ialah font yang tidak memiliki serif sama sekali (“sans” berasal dari bahasa Perancis yang berarti “tanpa”). Keluarga Sans-serif font adalah font yang paling tepat untuk digunakan dalam web design. Karena font ini tetap nyaman dibaca di layar monitor. Sans-serif font juga cocok untuk judul, karena mereka cukup menonjol dan mudah dibaca dari jauh. Perbedaannya seperti yang ditunjukkan pada Gambar 1.

c.       Format dan Kontras

Karakteristik lain dari sekedar desain jenis huruf dapat membuat penekanan dan kontras tipografi:

·         Ukuran: besar vs kecil

·         Berat: bold vs tidak berani

·         Warna: Anda mendapatkan ide

·         Bentuk: italic, SEMUA CAPS, atau CAPS KECIL vs tidak miring (juga disebut roman), bukan topi (juga disebut huruf kecil)

·         Direction: apakah jenis horizontal atau di beberapa sudut lain, seperti berjalan secara vertikal, atau di jalan melengkung

·         Rhythm dan spasi: karakter yang s p a c e d berbeda, atau bahkan ... terisolasi. (Kita akan membahas jarak secara lebih mendalam, pada bagian berikutnya.)

·         Hiasan: pola, bevels, bayangan, dan bercahaya, seperti yang ditunjukkan pada Gambar 2.
Tekstur: bagaimana blok dari jenis mengatur dirinya menjadi bentuk, baik berat (spasi erat teks) atau lebih ringan (banyak spasi teks) dalam merasa.

Gambar 2. Hiasan Teks

d.      Spasi/Jarak

Leading adalah istilah yang biasa digunakan untuk jarak baris tiap baris sebuah paragraf. Leading, sangat berpengaruh pada kenyamanan baca sebuah teks. Jarak yang dibuat oleh leading ini membuat mata lebih rileks dan mudah dalam membaca teks.

Faktor lain yang menentukan berapa besar leading yang pas adalah besarnya teks dan panjangnya baris. Baris yang panjang memerlukan leading lebih besar supaya pembaca mudah menemukan baris selanjutnya. Begitu pula dengan ukuran huruf yang besar.

Gambar 3. Contoh Leading Teks

Kerning adalah istilah untuk jarak antar huruf dalam sebuah kata, kalimat, atau paragraf. Jarak antar huruf ini berpengaruh banyak terhadap kemudahan membaca serta keindahan dari kata atau kalimat tersebut. Kerning yang buruk dapat menyebabkan teks sulit atau salah dibaca. Kerning lebih bersifat mengharmoniskan hubungan antara huruf-huruf yang apabila didekatkan dengan huruf tertentu lainnya maka akan timbul celah yang berlebihan. Secara umum tingkat kerapatan huruf terbagi menjadi 5 jenjang, yaitu:

1.      Very Tight

2.      Tight

3.      Normal

4.      Loose

5.      Very loose

Pemberian kerning tidak berpengaruh pada lebar tipisnya huruf, tetapi hanya jarak antar huruf. Susunan huruf yang menggunakan kerning very tight hingga tight akan mengakibatkan halaman teks menjadi tampak gelap (kehitaman), sedangkan kerning loose dan very loose akan menyebabkan perwajahan pada bodytext menjadi pucat dan memberi kesan tidak menggairahkan. Perhatikan contoh berikut:

Gambar 5. Kerning

 

e.       Justifikasi

1)      Rata Kiri

Rata kiri paling mudah dibaca, karena mata akan mudah menangkap saat membaca baris berikutnya. Spasi antar huruf dan antar kata tetap atau tidak berubah sesuai karakteristik hurufnya. Sisi kanan paragraf akan terlihat tidak rata atau bergerigi, yang mengesankan tidak rapi dan tidak lengkap. Namun justru hal ini dapat mengurangi kebosanan pembacanya.

2)      Rata Tengah

Meskipun bentuknya secara menyeluruh enak dipandang, rata tengah akan lebih sulit dan lebih lambat untuk dibaca. Karena saat perpindahan baris, pembaca agak lama menemukan baris berikutnya. Sebaiknya tidak membuat artikel panjang dengan perataan rata tengah. Namun rata tengah cocok untuk tulisan pendek seperti puisi, pengumuman singkat dan yang lain. Artikel panjang dengan rata tengah akan melelahkan pembacanya.

3)      Rata Kanan

Rata kanan juga sulit dibaca, karena kita membaca dari kiri ke kanan. Namun masih lebih terbaca rata kanan dibanding rata tengah. Pembacaan saat perpindahan baris akan menyulitkan mata pembaca karena bentuk rata kiri yang acak.

4)      Rata Kiri Kanan Penuh

Hampir sama dengan perataan Rata kiri kanan, namun dapat menimbulkan spasi antar huruf yang sangat extrim, sehingga terlihat agak ompong. Perataan ini sangat rapi dan cocok bila dipadukan dengan background kotak.

Gambar 6. Justifikasi

f.       Tipografi dan Desain Web

Selain pedoman tipografi standar, ada tambahan tipografi dan format untuk menangani di web. Misalnya, kita bisa memanipulasi karakteristik tipografi dengan HTML dan CSS (ukuran, warna, huruf tebal, italic, dan sebagainya), tetapi efek lain seperti bevel atau drop shadow dapat diterapkan hanya dalam gambar grafis. Dapat dilihat pada pembahasan teks HTML dan teks grafis secara lebih mendalam.

2.      Teks HTML

Teks HTML merupakan teks yang tertanam dalam tag HTML dan yang menerima instruksi dari HTML dan / atau CSS. HTML adalah singkatan Hyper Text Markup Language, Pengertian HTML adalah salah satu bahasa yang paling umum dan paling sederhana untuk menulis di web. Sama seperti orang yang berbeda bahasa berbicara pun berbeda, Internet juga memiliki bahasa sendiri. Dan dengan bantuan bahasa HTML, kita dapat mengupload data di internet seperti yang kita inginkan.

a.       Jenis Huruf HTML

Untuk menentukan jenis font dari sebuah text HTML, kita bisa menggunakan property CSS : font-family.  Berikut adalah contoh penulisan kode CSSnya :

body {font-family: Georgia, Times, serif;}

Typographers telah lama berpendapat bahwa salinan isi dicetak lebih mudah dibaca dalam jenis huruf serif, karena serif memberikan isyarat dengan cepat dianggap bentuk surat. Dalam con-trast, sans serif mungkin lebih mudah dibaca di monitor, karena resolu-tion monitor sangat rendah sehingga serif tidak dapat ditampilkan dengan jelas-mereka cenderung berdarah bersama-sama. Tapi, tentu saja, kata kunci di sini berpendapat-ini perdebatan mungkin begini terus, dan setidaknya satu studi telah menunjukkan bahwa sans serif signifi-signifikan meningkatkan pembacaan layar hanya dalam ukuran yang lebih kecil dari tipe 12-point.

b.      Ukuran Huruf HTML

HTML menggunakan skala 1 sampai 7 untuk ukuran font, dengan 1 menjadi yang terkecil, 3 menjadi ukuran default, dan 7 menjadi yang terbesar. Meskipun apa yang muncul untuk menjadi ukuran umum, sistem operasi yang berbeda mungkin menggunakan nomor yang berbeda dari piksel untuk membangun font pada setiap ukuran. Tabel 1. menjelaskan Windows vs Mac perbedaan OS dalam hal ini.

Dalam HTML, untuk mengatur ukuran huruf menggunakan tag <font size=”ukuran huruf”>

c.       Ukuran Teks Mutlak

Contoh penulisan ukuran teks mutlak :

.largeText {font-size:18px;}

d.      Ukuran Teks Relatif

Dengan ukuran teks relatif, ukuran font saat ini berlaku ditambah atau dikurangi dengan proporsi tertentu:

.largeText {font-size: 110%;}

.largeText {font-size: 1.1em;}

e.       Ukuran Teks Mutlak vs Relatif

·         Ada dua alasan utama untuk memilih ukuran teks relatif:
Ukuran teks mutlak dapat menggantikan pengaturan ukuran font pengunjung, aksesibilitas sehingga merendahkan untuk tunanetra.

·         Seperti yang kita lihat pada Tabel 1, resolusi teks berubah ketika kita melihat Windows PC vs Mac membagi. Jika ukuran mutlak digunakan, menentukan ukuran teks 24 piksel hasil dalam 1/3 "(24/72) pada Mac tetapi 1/4" (24/96) pada PC, perbedaan yang substansial. Di sisi lain, karena basis mereka ukuran font sekitar yang sama, relatif ukuran teks diterapkan di atas font dasar yang sama harus menghasilkan teks yang kira-kira ukuran yang sama.

3.      Format HTML

a.       Warna

Sebaiknya warna tulisan dan warna background dibuat dengan paduan yang serasi sehingga akan menampilkan typografi yang baik dan menjadi enak untuk dibaca. Untuk mendapatkan warna design yang efektif, mulailah dengan memilih warna yang bisa merepresentasikan sebuah tujuan dan gagasan dari situs Anda. Susunan warna yang anda buat sebaiknya bisa cocok atau sesuai dengan tujuan dari situs Anda.

Jika misalnya situs yang Anda buat adalah situs komunitas, maka lebih kuat moodnya dengan warna warna yang hangat.Hal ini untuk membuat suasana bisa terlihat lebih santai. Jika situs Anda adalah  sebuah situs Informasi,lebih tepat disebut blog, dimana artikel/tulisan anda yang akan mendominasi, maka sebaiknya warna yang disusun simple dan tidak mengganggu konten.
Misalnya tidak menggunakan background gambar secara penuh dengan warna yang mencolok,hal ini akan membuat tulisan menjadi kurang nyaman jika dibaca.Selain itu,backgound gambar yang besar bisa membuat muat halaman menjadi berat,sehingga pengunjung akan malas menemukan artikel kita yang lain.

Dalam penggunaan warna pada font, hindari warna yang terlalu kontras. Gunakanlah warna yang lebih lembut dan cocok dengan desain web secara keseluruhan.

b.      Tekanan

Penekanan pada teks tertentu adalah hal yang lumrah untuk sebuah bacaan. Biasanya, untuk menekankan sebuah teks digunakan bold, Italic dan underline. Lalu, mana yang paling baik ? Relatif. Itu tergantung pada jenis teks yang ditekankan. Bold, memiliki kesan yang lebih mendalam. Disusul oleh underline, kemudian italic. Namun, teks apapun yang anda tekankan jangan pernah menggunakan 2 style sekaligus. Jangan menekankan sebuah teks dengan menggunakan bold sekaligus italic.

Gambar 7. Contoh Penekanan yang baik dan buruk

c.       Dekorasi

Properti text-decoration memberikan kemampuan untuk menghias teks, yang dapat diisikan dengan nilai-nilai berikut: none, underline, overline, line-through, blink, and inherit. Mayoritas penggunaan properti ini dilakukan untuk menghilangkan garis bawah pada teks dari link, tetapi tentunya kita dapat menggunakan text-decoration untuk berbagai keperluan lain.

Kegunaan tiap-tiap properti sendiri sama seperti namanya: overline memberikan teks garis di atas tulisan, underline memberikan garis di bawah tulisan, line-through membuat teks dicoret, dan blink membuat teks berkedip. Dari seluruh properti, yang tidak disarankan untuk digunakan ialah blink, karena properti ini membuat pengguna sulit membaca teks. Nilai line-through sendiri dapat digunakan untuk menandakan teks yang akan dihapus dari sebuah dokumen (semantik: tag del) atau teks yang telah tidak relevan atau akurat (semantik: tag s).

Berikut adalah contoh penggunaan properti text-decoration:

4.      Spasi Teks HTML

Properti letter-spacing dan word-spacing digunakan untuk mengatur jarak antar huruf dan jarak antar kata. Mengubah garis default dan spasi karakter dapat meringankan keseluruhan "grayness" dari halaman hambar. Secara khusus, meningkatkan terkemuka dari HTML default spasi tunggal dapat meningkatkan pelacakan dari satu baris ke yang berikutnya, terutama pada baris lagi teks mata. Memimpin dikendalikan dengan CSS:

.largerLeading1 {line-height:1.1em}

.largerLeading2 {line-height:110%}

Ekstra jarak antara huruf atau kata-kata dapat digunakan untuk penekanan, seperti Gambar 8. menunjukkan bagaimana huruf spasi / pelacakan dan kata jarak dapat dikendalikan oleh CSS (di browser yang lebih baru), menggunakan absolut (piksel) atau relatif (ems dan persentase) spasi teks.

Industri cetak memiliki standar spasi lain yang harus kita ikuti di web, juga:

■ Gunakan hanya satu ruang, bukan dua, pada akhir kalimat. Untungnya, ini adalah default di HTML, karena tidak mengakui beberapa ruang yang berdekatan.
■ Gunakan baik indent pada awal paragraf, atau spasi ganda antara paragraf (ini adalah pilihan yang lebih mudah otomatis dalam HTML), tetapi tentu saja tidak baik.

■ Idealnya, memungkinkan baris kosong otomatis sebelum tag header, tetapi menggunakan CSS marjin styling untuk menghilangkan baris kosong otomatis setelah tag. Dengan cara itu, header lebih dekat dan lebih visual terhubung ke konten yang memperkenalkan:
h1 {margin-bottom: 0em;}

Sayangnya, setiap <p> tag segera setelah tag header akan menambah jarak ekstra kembali, sebagai <p> tag yang biasa dilakukan. Oleh karena itu, kami juga harus menghapus spasi ekstra dari orang-orang <p> tag:

p.firstParagraph {margin-top:0em;}

5.      Tata Letak Teks HTML

Melakukan pelurusan (align) teks merupakan bagian penting untuk mendapatkan ritme dan alur pembacaan sebuah dokumen. Selain itu, kita juga dapat memperbaiki permasalahan seperti river dengan memiliki pelurusan teks yang benar. Pelurusan teks pada CSS diatur dengan menggunakan properti text-align, yang dapat diisikan dengan lima nilai, yaitu: left, right, center, justify, and inherit. Seluruh nilai tersebut sama artinya dengan nilai pelurusan teks pada program pengolah kata seperti Microsoft Word, sehingga penjelasan lebih lanjut tidak akan dilakukan lagi.

6.      Karakter Khusus HTML dan Merek Tanda Baca

Aturan tipografi untuk mencetak konten hanya sebanyak bantalan ketika konten yang muncul di web. Ringkasan aturan lebih berharga berikut.
■ Jangan gunakan tanda seru yang berlebihan dalam teks! (Lihat saja betapa menyebalkan ini !!!) Menggunakan berbagai tanda seru mencairkan kekuasaan mereka ke titik bahwa mereka semua menjadi tidak berarti!

■ Gunakan en strip (tanda hubung lebar huruf N, seperti ini -) untuk memisahkan kata-kata bergabung, dan garis em benar (panjang, lebar huruf M, seperti ini -) untuk memisahkan klausa kalimat. Seringkali, kita palsu em dasbor dengan dua tanda hubung, tapi em dasbor benar terlihat lebih profesional.

en dasbor
Contoh: "panjang garis Batasi 30-70 karakter."
Kode HTML: & ndash; atau -

em dasbor
Contoh: "Email-seperti surat siput-mendapatkan pekerjaan."
Kode HTML: & mdash; atau –

■ Gunakan tepat "keriting" kutipan:

Contoh: "kutip keriting" versus "kutipan langsung" kode HTML:
Curly meninggalkan kutipan ganda: & ldquo; atau "Curly kanan ganda quote: & rdquo; atau "Curly kiri kutip tunggal: & lsquo; atau 'Curly hak tunggal quote: & lsquo; atau '

■ Gunakan elips benar (...), yang merupakan simbol tunggal, sebagai lawan tiga periode terpisah (...).

Contoh: "em dash, en dash, quotes keriting ..."
Kode HTML: & hellip; atau …

■ Kode Gunakan HTML untuk karakter khusus lainnya yang sesuai. Misalnya, Anda mungkin ingin menanamkan ampersand, "&" (& amp;), ruang (& nbsp;), atau simbol copy-benar "©" (& copy;). Lihat situs web buku untuk daftar kode lainnya.

7.      Teks Grafik

Gambar 9. Teks Grafik

Banyak konsep tipografi umum disajikan sebelumnya untuk teks HTML, termasuk perbedaan dalam tipografi, ukuran, dan format, masih berlaku untuk teks yang disimpan sebagai gambar. Perbedaan utama adalah bahwa kita memiliki lebih banyak kebebasan dalam teks grafis menggunakan efek, filter, dan tipografi kita menyenangkan, apa pun karena kita tidak perlu khawatir tentang apakah atau tidak pengunjung memiliki jenis huruf.

Kita dapat mengontrol teks grafis anti-aliasing untuk membuat jenis lebih mudah dibaca dan kurang pixelated. Anti-aliasing dapat membuat teks hampir illegible. teks yang sangat kecil menjadi "lembek" saat anti-alias, dengan huruf berlari bersama-sama dan menjadi tidak jelas. Sebagai jenis menjadi lebih besar, anti-aliasing bisa mendapatkan lebih kuat, meskipun kuat anti-aliasing meningkatkan ukuran file gambar.
Terminologi untuk teks anti-aliasing bervariasi agak antara program editing gambar. Terminologi untuk anti-aliasing di Fireworks dan Photoshop tercantum dalam sidebar bawah.

8.      Jenis Penekanan Dalam Gambar

Bila menggunakan jenis huruf dengan stroke sangat tipis, membuat teks tebal sering tidak memberikan cukup penekanan untuk itu untuk menampilkan baik terhadap latar belakang. Satu perbaikan adalah untuk membuat salinan persis dari teks anti-alias asli dan posisi itu langsung di atas aslinya. Dengan menggandakan efek dari anti-aliasing, jenis muncul bahkan lebih kuat dari yang berani saja. Anda mungkin harus menentukan jarak surat yang lebih luas dari biasanya, meskipun, untuk mencegah karakter dari berjalan bersama-sama.
Cara lain untuk menekankan jenis, terutama ketika jenis mengapung di atas latar belakang warna-warni, adalah dengan menggunakan tidak hanya mengisi warna tetapi juga stroke garis. Gambar 10. menunjukkan kontras tinggi

9.      Teks dan Aksesibilitas

Aksesibilitas telah ditangani seluruh bab, sehingga hanya rekap harus dibutuhkan di sini:

·         Gunakan ukuran teks relatif pada body copy (ems dan persen), agar tidak menimpa pengaturan teks-ukuran yang pengunjung telah ditentukan dalam browser mereka. (Perhatikan bahwa browser yang lebih baru memungkinkan pengunjung untuk menimpa pengaturan situs web font-size, termasuk ukuran mutlak.)

·         Pastikan bahwa teks latar kontras nilai (tingkat terang atau gelap warna) dengan latar belakang sehingga teks tersebut dapat dibaca bahkan untuk orang-orang yang buta warna.

·         Mempekerjakan tag header HTML (<h1>, <h2>, dll) untuk memberikan tunanetra dengan garis besar struktur hirarkis halaman.

·         Sertakan atribut alt pada semua gambar, termasuk gambar teks grafis. Ini adalah cara yang paling penting untuk membuat konten gambar diakses oleh tunanetra. Jika gambar dekoratif saja, tanpa makna yang melekat, gunakan tag alt kosong (alt = "") untuk menghindari keterlambatan pembaca layar berbicara deskripsi berarti.

Pemilihan penggunaan tipografi yang tepat, akan memberikan kesan yang baik terhadap sebuah website. Tipografi menjadi salah satu elemen yang sangat penting, karena akan mempengaruhi kenyamanan dalam membaca, selain dapat menambah keindahan desain. Teks yang digunakan dalam tingkat kemudahan untuk dibaca (readability) dan pemilihan kualitas huruf dalam kemudahannya untuk dibaca (legibility), mempengaruhi bagaimana pengguna memproses informasi dalam konten. Apabila readability rendah, pembaca akan menghindari konten. Sedangkan di sisi lain, apabila readability tinggi, memungkinkan pengguna secara efisien membaca dan menerima informasi dalam teks.

Keterbacaan yang baik dipengaruhi oleh banyak faktor. Selain penggunaan huruf yang tepat, elemen hirarki (hierarchy) diperlukan dalam tata letak tipografi, yaitu untuk mendefinisikan bagaimana membaca konten, urutan membaca, serta membedakan header dan teks. Sedangkan kontras (contrast) merupakan faktor yang menentukan apakah teks mudah dibaca. Kontras yang baik akan memberikan kemudahan mata untuk memindai teks dengan cepat, sekaligus akan terbaca dengan mudah. Faktor lain yang penting dalam keterbacaan adalah tinggi huruf (type size), tinggi baris (line height), spasi huruf (letter spacing), dan panjang baris (line length) serta kombinasi warna.

Sumber :

Penny MCintire. 2008. Visual Design for The Modern Web. US of America