Tutorial : TIPOGRAFI Bagian 1:

Mengenal Tipe
Tipografi adalah disiplin ilmu yang dipandang tidak cool tapi misterius, yang selalu di
belakang layar dan cenderung low profile. Bandingkan dengan usability misalnya—yang
akhir-akhir ini naik daun. Siapa sih yang tidak kenal Jakob Nielsen? Atau bandingkan
dengan tokoh new media Web dan Flash macam Jeffrey Zeldman dan Hillman Curtis.
Rata-rata dari kita kenal atau minimal pernah dengar namanya. Tapi kalau disuruh
menyebutkan siapa tokoh tipografi favorit, atau siapa yang menciptakan tipe Futura atau
Georgia, maka kebanyakan dari kita menggeleng. Tokoh suatu bidang seringkali
mencerminkan seberapa popular bidang tersebut. Kalau tokoh-tokoh tipografi jarang
kita ketahui, maka barangkali begitu pulalah dengan bidang ilmu tipografi. Padahal
tipografi amatlah penting bagi semua desainer, termasuk desainer Web.
Dalam seri tutorial apresiasi tipografi ini, fokus kita adalah pada tipe. Kita akan
mengenal apa itu tipe. Kita juga akan menyinggung teknologi font dan tipografi di
komputer. Lalu melihat profil beberapa perusahaan penerbit font—yang biasa disebut
digital type foundry—yang ternama seperti Adobe dan ITC. Kita pun akan mengenal
beberapa tipe popular seperti Garamond dan Bodoni. Dan terakhir kita akan
membahas desain logo yang mengutamakan permainan huruf dan tipe. Meski
demikian, tak ketinggalan akan disinggung pula aspek-aspek dasar tipografi yang baik.
Karena sifat tutorial ini pemula, maka bisa diikuti baik oleh desainer Web—yang
rata-rata, sayangnya, memang kurang mengenal tipografi dibandingkan desainer
cetak—maupun oleh umum. Alangkah baiknya jika setiap orang memahami dasar-
dasar tipografi. Apalagi karena sekarang setiap hari mau tidak mau kita berurusan
dengan huruf dan tipe di komputer. Mulai dari memilih font saat akan membuat surat,
kartu undangan, halaman web, kartu nama, dan lain-lain.
Tujuan akhir tutorial ini adalah membangkitkan kesadaran akan tipe sehingga
pembaca menyadari peran tipografi dalam desain grafis, mengenal font-font, dan
dapat memilih dan memadu font sesuai karakteristik masing-masing font. Tutorial ini
tidak akan membahas hingga ke pemakaian software Fontographer atau teknik
perancangan tipe lainnya, melainkan hanya dari sisi apresiasi.
Huruf Di Mana-Mana
Huruf dan tulisan memiliki arti amat penting bagi manusia. Bahkan, yang namanya
peradaban atau masa sejarah ditandai dengan peristiwa dikenalnya tulisan oleh
manusia. Zaman sebelum ada tulisan sering disebut zaman prasejarah. Kalau Anda
melihat ke buku atau ke layar komputer, Anda akan melihat huruf dan tulisan. Di
jalanan pun Anda akan melihat tulisan. Di pakaian, di badan mobil dan pesawat
terbang, bahkan di gua-gua purbakala Anda bisa menjumpai tulisan. Selain gambar,
huruf adalah cara manusia berkomunikasi secara visual.
Tipe/Typeface dan Font
Satu hal pertama yang Anda bisa perhatikan dari tulisan-tulisan yang berbeda itu
adalah, bahwa bukan huruf-hurufnya saja yang berbeda, melainkan jenis hurufnya
1
juga. Huruf “A” atau “a” di sebuah tulisan bisa berbeda dari huruf “A” dan “a” yang lain.
Anda tahu bahwa keduanya abjad alfabet yang sama, tapi Anda juga mengamati
bahwa jenis hurufnya berbeda. Bisa jadi yang satu lebih tebal atau gemuk dari yang
lain, bisa jadi kaki-kaki hurufnya ada yang memiliki tangkai, atau lebih pendek atau
lebih panjang, dan sebagainya. Sebuah jenis huruf yang sama kadang diberi nama
tertentu (misalnya: Times New Roman). Jenis huruf ini disebut typeface, atau
singkatnya tipe. Sekarang orang juga sering menyebut jenis huruf dengan font, karena
file yang berisi informasi sebuah typeface di komputer diberi istilah font (misalnya, di
Windows, informasi untuk menggambar tipe Arial disimpan dalam file ARIAL.TTF). Di
dalam dunia tipografi tradisional (nondigital), yaitu saat huruf dicetak menggunakan
balok-balok logam, font memiliki arti lain kumpulan balok-balok huruf logam yang
memiliki satu typeface dan satu ukuran tertentu. Belakangan barulah orang-orang
komputer memakai kembali istilah font untuk bidang tipografi digital. Kedua istilah
typeface/tipe dan font dalam artikel ini akan dipakai bergantian.
Klasifikasi Tipe
Ada banyak sekali jenis huruf yang bisa kita amati. Mungkin di komputer Anda
sendiri ada terinstal ratusan hingga ribuan file font. Sebagian font bentuknya unik dan
aneh sehingga mudah kita kenali, sementara yang lain tampak sekilas mirip-mirip semua.
Setiap saat pun diciptakan font-font baru. Produser film-film Hollywood misalnya, sering
mengeluarkan dana untuk mendesain font baru yang unik untuk filmnya.
Berdasarkan bentuknya, para pakar tipografi umumnya membagi jenis huruf ke
dalam dua kelompok besar: serif dan sans serif. Lalu ada kelompok ketiga dan
keempat yang disebut script dan dekoratif. Jenis serif dan sans serif pun berbeda-
beda, tapi mari sebelumnya mengetahui perbedaan serif dan sans serif.
Serif dan Sans Serif
Serif adalah kelompok jenis huruf yang memiliki “tangkai” (stem). Lihatlah font
Times New Roman, Bodoni, Garamond, atau Egyptian misalnya. Persis mendekati
ujung kaki-kaki hurufnya, baik di bagian atas maupun bawah, terdapat pelebaran yang
menyerupai penopang atau tangkai. Menurut sejarah, asal-usul bentuk huruf ini adalah
mengikuti bentuk pilar-pilar bangunan di Yunani Kuno. Seperti kita ketahui, bagian
atas dan bawah tiang pilar memang lebih besar agar bisa membuat pilar lebih kokoh.
Sementara sans serif (atau “tanpa” serif) adalah jenis huruf yang sebaliknya: tidak
memiliki tangkai. Ujung-ujung kakinya polos begitu saja. Contohnya Arial atau
Helvetica (Catatan: meski amat mirip dan sering saling mensubstitusi satu sama lain,
kedua font ini tidaklah mirip persis. Cobalah sekali-kali Anda cetak contoh huruf dalam
ukuran besar dan amati perbedaan-perbedaan tipis kedua font ini.) Contoh lain jenis
huruf sans adalah ITC Officina Sans, yaitu font yang digunakan di mwmag yang
sedang Anda baca ini.
Kegunaan tangkai serif.
Pada ukuran teks kecil, seperti seukuran tulisan teks di surat kabar atau buku,
umumnya tangkai pada kaki-kaki font serif membantu agar tulisan mudah dibaca.
Mengapa? Karena tangkai font serif membantu membentuk garis tak tampak yang
memandu kita mengikuti sebuah baris teks. Karena itulah kita banyak menjumpai
2
buku-buku dilayout dengan serif. Menurut penelitian, seseorang yang membaca font
serif bisa lebih tahan membaca karena tidak mudah lelah—akibat adanya bantuan dari
tangkai serif tadi. Tapi pada kondisi-kondisi berikut ini: a) huruf amat kecil (seperti
tulisan bahan-bahan di label makanan); b) huruf amat besar (seperti di plang-plang
merek) yang harus dilihat dari jauh; c) di layar monitor; huruf sans serif kadang lebih
mudah dibaca. Mengapa? Karena justru kaki-kaki font serif memperumit bentuk huruf
sehingga sedikit lebih lama dibaca. Jika huruf kecil sekali atau pada resolusi rendah
seperti di layar monitor, kaki serif bisa tampak bertindihan dan menghalangi
pandangan. Karenanya kita banyak melihat plang rambu lalu lintas menggunakan
huruf yang sesederhana mungkin agar bisa cepat dibaca, dan di halaman web banyak
dipakai font serif karena lebih mudah dibaca pada ukuran kecil/layar kasar.
Jenis-jenis serif.
Serif tiap jenis huruf pun dapat berbeda-beda. Huruf-huruf masa lama (Old Style)
seperti Garamond dan huruf-huruf masa transisi (Transitional) seperti Times New Roman
misalnya, memiliki tangkai yang sudutnya lengkung. Sementara pada huruf-huruf masa
modern seperti Bodoni, tangkainya bersudut siku. Ada lagi yang bersudut siku pula, tapi
relatif tebal/tinggi. Contohnya Egyptian. Tipe serif seperti Egyptian kadang disebut slab
serif. Beberapa huruf unik tertentu memiliki tangkai serif negatif, yaitu tangkai yang
masuk ke sisi dalam kaki sehingga ujung kaki nampak lebih kecil dari batang kakinya.
Skrip dan Dekoratif
Selain serif dan sans serif, ada pula jenis huruf “sambung” dan huruf “gaya bebas.”
Huruf sambung atau script bisa juga Anda sebut “huruf tulis tangan” (handwriting)
karena menyerupai tulisan tangan orang. Atau bisa juga disebut “huruf undangan”
karena hampir selalu hadir di kartu-kartu undangan karena dipandang indah dan
anggun. Ada berbagai macam huruf script dan handwriting, mulai dari yang kuno
hingga modern, dari yang agak lurus hingga miring dan amat “melingkar-lingkar”.
Sementara huruf “gaya bebas” mencakup segala macam jenis huruf “aneh” lain yang
sulit dikategorikan dalam ketiga kategori lainnya. Kadang huruf ini bisa diinspirasi dari
bentuk geometris tertentu, memadukan gambar atau pola tertentu, dan sebagainya. Di
komputer juga dikenal font-font “wingdings-like” yang sebenarnya adalah clipart. Tiap
hurufnya murni berupa ikon atau gambar, bukan huruf.
Umumnya jenis-jenis huruf skrip dan dekoratif digunakan untuk hiasan atau
dekorasi, bukan untuk teks maupun headline teks. Karena derajat kompleksitasnya
lebih tinggi, maka tidak cocok untuk teks karena akan menyulitkan pembacaan.
Bahan Bacaan Kali Ini
Buku. Tipografi Dalam Desain Grafis, Danton Sihombing, Penerbit Gramedia, 2001, cukup layak dimiliki.
Buku setebal 190 halaman ini dilayout cukup apik dan membahas sejarah singkat, dasar-dasar dan klasifikasi
tipe, prinsip melayout secara tipografis, dan di akhirnya menampilkan katalog sekitar 13 buah tipe terkenal.
Secara keseluruhan, buku ini bisa dibilang buku tipografi terbaik di Indonesia, meskipun memiliki beberapa
kekurangan seperti tidak adanya glosari maupun indeks. Beberapa gambar dalam artikel ini diambil dari
buku tersebut.
Situs. Microsoft typography, www.microsoft.com/typography/. Microsoft, percaya atau tidak, adalah
salah satu perusahaan yang berperan dalam mengembangkan teknologi tipe digital. Bersama Apple akhir
tahun 1980-an, Microsoft membawa teknologi font vektor TrueType ke PC maupun Mac. Dan karena
spesifikasi TrueType dipublikasikan, maka banyak font-font baru yang murah bermunculan. Microsoft pun
3
banyak membuat font dan membagikannya gratis—sebagian dibundel langsung bersama sistem operasi
dan sisanya dapat didownload dari situs tipografinya. Khusus untuk Web, Microsoft membayar beberapa
desainer beken untuk merancang antara lain tipe Verdana (sans) dan Georgia (serif). Kedua tipe ini didesain
khusus agar mudah terbaca di layar komputer, antara lain dengan cara membuat bagian x-height (perut)
relatif besar. Bagi yang belum mempunyai kedua font tersebut, saya anjurkan mengambilnya dari situs
Microsoft. (slm)

Tutorial : TIPOGRAFI Bagian 2:

Pada bagian pertama kita telah mengenal apa itu tipe serta perbedaan serif dan sans
serif. Bagian kedua ini akan membahas anatomi huruf, apa itu style dan keluarga tipe,
serta mengenal lebih jauh keluarga tipe Times.
Istilah-Istilah Anatomi
Di Gambar 1 Anda bisa melihat anatomi dasar huruf. Baseline adalah garis maya
yang menjadi lantai sebagian besar huruf. Tidak semua huruf harus tepat berlandaskan
di baseline. Kalau Anda lihat dengan teliti, hurut “t”, “p”, dan “q” tipe Helvetica tersebut
agak melewati garis baseline sedikit ke bawah. Kemudian capline (“capital line”) adalah
istilah untuk garis maya yang menjadi batas atas huruf-huruf kapital. Garis ini juga
hanyalah patokan saja, bukan berarti tidak boleh ada bagian huruf yang melebihi
capline. Coba Anda cetak atau tampilkan di layar monitor huruf “f” Helvetica—atau
beberapa tipe lain—maka Anda akan melihat tingginya sedikit lebih dari capline. Huruf
“k” juga, meskipun tidaklah terlalu sering, tingginya lebih dari tinggi huruf kapital. Sah-
sah saja.

Fig 1. Anatomi dasar huruf

Kalau capline adalah garis patokan untuk tinggi huruf kapital, maka meanline
adalah patokan tinggi untuk huruf kecil. Sementara bagian tangkai huruf kecil yang
melewati ke atas meanline disebut ascender (contohnya tangkai utama huruf “d” pada
Gambar 1) dan bagian tangkai yang melewati ke bawah baseline disebut descender
(contohnya tangkai utama huruf “p”). Seperti telah disebutkan sebelumnya, ascender dan
descender dapat bebas melebihi capline dan baseline sesuai selera atau desain si
perancang tipe.
X-height
Biasanya huruf yang dijadikan patokan huruf kecil adalah huruf “x”. Karena itu jarak
antara baseline dan meanline disebut dengan x-height. Jika Anda perhatikan di
Gambar 2, maka perbandingan x-height dengan tinggi huruf kapital (alias, jarak
4
baseline-capline) bervariasi. Ada font teks yang memiliki x-height relatif besar, seperti
Georgia, dan ada yang relatif lebih kecil, seperti Adobe Garamond. X-height
merupakan salah satu faktor penting bagi legibilitas (keterbacaan), yaitu kemudahan
suatu huruf dikenali secara visual.

Fig 2. X-height berbagai tipe

X-height yang cukup besar—asal tidak terlalu besar—membantu legibilitas,
menunjukkan bahwa identitas huruf banyak berada di daerah x-height dan pada huruf
kecil. Agar membantu keterbacaan, x-height yang besar juga biasanya disertai dengan
tangkai-tangkai ascender yang cukup tinggi, agar membantu membedakan huruf
kapital dan huruf kecil.
Sementara x-height yang terlalu besar justru dapat mengurangi keterbacaan,
apalagi jika kurang didukung faktor lainnya. Contohnya adalah font Haettenschweiler,
yang memiliki x-height amat besar (81%) dan BerhardFashion, yang memiliki x-height
amat kecil (36%). Haettenschweiler misalnya, jika digunakan sebagai font teks, akan
sangat memberatkan mata karena selain faktor x-height, hurufnya memang sempit,
juga goresan-goresannya terlalu tebal, dan bentuk hurufnya kotak-kotak sehingga sulit
membedakan huruf-huruf berbentuk lengkung dan huruf-huruf siku. BernhardFashion
pun demikian; meskipun dilabeli sebagai BT (book type), namun ia bukanlah tipe ideal
untuk teks pada umumnya apalagi pada ukuran-ukuran kecil sebab ini berarti x-
heightnya menjadi ekstra kecil dan sulit dilihat.
5
 Lihat Gambar 3.

Fig 3. Contoh teks dengan font berbeda x-height

Di Gambar 3, x-height font Georgia yang lebih besar membuatnya tampil lebih
padat dan gelap ketimbang Adobe Garamond. Ini karena daerah putih di atas tinggi
huruf kecil lebih sedikit, sehingga lebih sering terisi. Contoh kasus lainnya adalah di
lembaran-lembaran majalah mwmag, yaitu saat tipe huruf teks diganti dari Adobe
Garamond (di edisi 4 dan sebelumnya) ke Officina Sans (di edisi 5, 6). Selain ketebalan
goresannya yang lebih, Officina Sans juga memiliki x-height yang lebih besar sehingga
tampil lebih padat dan penuh.

Istilah Anatomi Lainnya

Gambar 4 adalah pelengkap Gambar 1, menerangkan bagian-bagian umum
sebuah huruf. Sebuah huruf dibentuk dengan goresan-goresan (stroke). Goresan
pertama biasa disebut dengan basic stroke, contohnya goresan vertikal pada huruf
“E”. Di ujung stroke huruf-huruf bertipe serif, seperti telah dibahas pada bagian tutorial
sebelumnya, akan dijumpai tangkai atau hiasan yang disebut serif. Sementara pada
tipe sans serif, ujung stroke polos-polos saja dan biasa disebut terminal. Gambar 5
menjelaskan lagi bagian-bagian huruf tertentu, yang banyak memakai istilah seperti
badan manusia. Apex adalah ujung lancip huruf “A”. Arm adalah goresan horisontal
pada huruf “T”. Ear adalah cuplikan di huruf “g” pada sebagian besar font serif.
6
Counter adalah ruang negatif yang terbentuk dalam sebuah huruf, seperti pada huruf
“p” atau “c”. Daftar istilah yang lebih lengkap bisa Anda jumpai misalnya di halaman
Web ini:
www.adobe.com/support/techguides/printpublishing/typography_basics/letterf
orm_anatomy/main.html. Sempatkanlah membacanya untuk mengetahui sebutan
untuk bagian-bagian dalam sebuah huruf.

Fig 4. Stroke, stem, serif, terminal

Fig 5. Beberapa istilah anatomi huruf lain: apex, arm, counter, ear
7
Keluarga Tipe
Kalau Anda mengintip direktori font Windows misalnya, maka kemungkinan besar
Anda akan melihat empat buah file font bernama times.ttf, timesbd.ttf, timesbi.ttf, dan
timesi.ttf. Mengapa empat buah file font untuk menyimpan informasi font “Times New
Roman”? Karena sebetulnya Times New Roman bukanlah satu tipe, melainkan satu
keluarga tipe, yang terdiri dari empat buah tipe. Cobalah perhatikan Gambar 6. Bisakah
memperhatikan perbedaan jenis huruf keempatnya? Kalau masih belum jelas, cobalah
melihat Gambar 7, Gambar 8, dan Gambar 9.

Fig 6. Keluarga tipe Times New Roman

Fig 7. Oblique vs Italic

8
 Fig 8. Outline vs Bold

Fig 9. Outline+Oblique vs Bold+Italic

Pada Gambar 7 bagian atas, kita memiringkan sumbu x huruf Times New Roman
biasa—alias huruf Times yang bukan bold maupun italic, atau yang disebut juga
“roman”—ke kanan. Efeknya adalah, huruf tersebut tampil miring ke kanan. Tapi
perhatikan Gambar 7 bagian kanan bawah, di mana kita benar-benar menggunakan
tipe Times New Roman Italic. Huruf “Q” maupun huruf “a” tipe Times Italic jenisnya
sama sekali berbeda dengan huruf Times yang roman—perhatikan ekor huruf “Q” italic
dan bentuk perut huruf “a” italic. Huruf-huruf pada Times Italic tidak dibentuk dengan
hanya memiringkan tipe romannya, melainkan benar-benar bentuk dan jenis yang
berlainan.
Pada Gambar 8 bagian atas, kita memberi border/outline pada huruf roman
sehingga hasilnya, di bagian kanan atas, huruf menjadi lebih tebal. Tapi di Gambar 8
bagian kanan bawah kita benar-benar menggunakan tipe Times Bold. Lagi-lagi, Times
roman dan Times Bold merupakan dua tipe berbeda. Perhatikan karakter bintang pada
Times Bold, jumlah pucuknya menjadi lima dan pucuk-pucuknya pun tidaklah terlalu
tebal seperti jika kita memberi border. Begitu juga, serif-serif Times Bold tetaplah lancip
tidak menjadi tumpul seperti jika kita memberi border.
Pada Gambar 9 Anda bisa melihat perbedaan yang sama antara huruf Times
roman yang dimiringkan dan dioutline dibandingkan dengan Times Bold Italic. Times
9
Bold Italic adalah tipe yang berbeda dari Times roman; ini bisa dilihat dari karakter
bintangnya yang tetap tegak, juga landasan huruf “i” telah berubah.
Jadi, ada empat buah tipe untuk Times New Roman, masing-masing untuk versi roman,
bold, italic, dan bold italic. Keempat tipe ini, meskipun dinamai Times New Roman dan
dimaksudkan untuk dipakai berbarengan, namun oleh desainernya secara hati-hati
telah dibuat berbeda agar tetap tampil serasi. Lihat perbandingannya dalam teks di
Gambar 10.

Fig 10. Contoh teks keluarga Times

Kadang-kadang, di komputer kita sebuah keluarga tipe tidaklah lengkap file-file
fontnya. Misalnya, kita mengkopi file font dari komputer rekan kerja, tapi lupa
mengambil semua font di keluarga ybs. Jadi hanya ada times.ttf. Jika kita ingin
membentuk huruf miring, maka program atau OS bisa mensimulasikannya dengan
cara memiringkan sumbu x atau memberi outline. Versi miring jadi-jadian ini disebut
“oblique.” Seperti bisa dilihat pada Gambar 10, kita kadang-kadang melihat teks
oblique di surat kabar, majalah, atau barang cetak lainnya—padahal sebetulnya ada
tipe khusus italicnya. Huruf oblique ini, apalagi jika tingkat kemiringannya cukup besar
(lebih dari 15 derajat), tidaklah tampil optimal. Sayang sekali, sebagian desainer tidak
menyadari bahwa salah satu file fontnya hilang, sehingga menghasilkan huruf-huruf
yang oblique dan tidak optimal. Semoga kini Anda bisa melihat perbedaan oblique dan
menggunakan tipe italic sebisa mungkin.
Tentu saja, tidak semua keluarga tipe memiliki versi italic. Jika Anda benar-benar butuh
huruf yang tampil miring, maka oblique menjadi salah satu solusinya.
Times
Nama lengkap: Times New Roman (dari perusahaan Monotype) atau Times Roman
(nama dari Linotype).
Jenis: serif, transisional.
Perancang: Stanley Morison.
Latarb belakang dan sejarah: Bersama Arial, Times barangkali adalah keluarga tipe
yang paling banyak Anda jumpai di halaman-halaman web maupun di materi cetak—
sampai-sampai beberapa desainer bosan setengah mati melihatnya. Ini karena font TTF
Times New Roman termasuk yang pertama-tama dikemas Microsoft di sistem operasinya
10
(Windows 3.1) sehingga menjadi tipe serif default. Nama “Times” berasal dari nama surat
kabar terkenal di Inggris, The Times, dan memang dibuat khusus untuk media tersebut.
Dirancang pada tahun 1931 oleh desainer yang terkenal sebagai pakar tipografi, Stanley
Morison, dan digambar oleh Victor Lardent dari Monotype Corporation. Menurut Stanley,
“Ketebalan, karakteristik, dan pengaturan lebar/ukuran Times disesuaikan dengan
kebutuhan editorial surat kabarnya.” Stanley bersama Monotype menyusun beberapa
anggota keluarga Times, antara lain Italic, Condensed, dan Headline. Times diinspirasi
oleh tipe huruf yang telah popular sebelumnya yaitu Plantin.
Karakteristik: Karena termasuk tipe transisional, tingkat kontrasnya—perbedaan
ketebalan antara stroke yang tebal dan tipis—cukup tinggi. Serifnya pun tajam-tajam.
Ascender dan descendernya pendek.
Pertimbangan pemakaian: Times banyak dipakai untuk teks bodi majalah dan
koran. Saya menganjurkan Anda mencari dan mencoba tipe lain dulu sebelum
memutuskan menggunakan Times karena saat ini Times terlalu overused.
Pertimbangan kombinasi: Times cocok dikombinasikan dengan tipe-tipe sans
serif seperti Arial, Futura, Gill Sans, atau Impact. Karena formal, Times tidak cocok
dipadankan dengan Comic Sans misalnya.
Bahan Jalan-Jalan Kali Ini
Situs. Identifont, http://www.identifont.com/, adalah situs direktori font. Fitur unik situs ini adalah
setiap font telah didata karakteristik huruf-hurufnya, sehingga dengan menjawab sederetan pertanyaan
mengenai huruf-huruf yang Anda jumpai di sebuah logo atau teks, Anda bisa mencari font apa yang
digunakan logo tersebut. Pertama-tama Anda akan ditanya huruf apa yang Anda punya (mis: “mwmag”). Lalu
misalnya ditanya, huruf tersebut miring atau tegak. Lalu huruf “g”-nya memiliki telinga atau tidak. Lalu
ketebalan huruf seperti apa, dst. Jika ada pertanyaan yang tidak bisa Anda jawab, Anda pilih saja “Not Sure”
dan Identifonrt akan menyuguhkan pertanyaan lain. Sistem pakar di Identifont akan terus memberi
pertanyaan sampai ia bisa mempersempit jumlah ‘tersangka’ hingga di bawah sekitar 30 typeface. Baru
setelah itu Anda dapat membrowse dan memilih dengan manual sampai ditemukan ‘si dia’ yang Anda cari.
Dengan database berisi lebih dari 4000 font, ada kemungkinan yang cukup besar font yang ingin Anda
temukan bisa terlacak di sini. Saya telah mencoba tiga buah logo (situs “detikcom”, koran “REPUBLIKA”, dan
kondom “Sutra”) dan berhasil menemukan font yang digunakan masing-masing logo, meski mencari type
Italic sedikit lebih susah ketimbang tipe Roman. Kemungkinan memperoleh hasil dengan sistem Identifont
pun biasanya lebih baik daripada sistem lain yang mencoba mengenali langsung file logo GIF atau JPG kita.
Ditambah lagi, sambil mencari kita bisa belajar mengenal karakteristik huruf.
Dalam mencari font, akan membantu jika Anda memiliki gambar yang cukup mendetil, sebab kadang
ditanya apakah ujung huruf “A”-nya runcing atau tidak, atau apakah serifnya satu arah atau dua. Sulit
menjawabnya jika Anda hanya punya logo berukuran 100x100 piksel misalnya.

11
 READABILITY DAN USABILITY TIPOGRAFI WEB

Readability atau keterbacaan (mudah tidaknya sebuah tipe atau font untuk dibaca)
tidak hanya terkait dengan pemilihan font, dalam beberapa kasus, hal ini tidaklah
menjadi faktor utama. Panjang baris,? kekontrasan, keseimbangan teks dengan
whitespace, ukuran teks, dan perpaduan antara faktor-faktor tersebut ternyata lebih
menentukan.?
Berikut adalah hal-hal yang berpengaruh terhadap readability dan usability tipografi:
Rataan Teks
Meratakan teks pada sebelah kiri namun tidak meratakan pada sebelah kanan (tidak
justify) meningkatkan kecepatan dalam membaca karena baris lurus pada sebelah kiri
dapat meningkatkan kemudahan dalam mencari baris baru.
Panjang Baris
Terdapat beberapa pendapat pada panjang baris yang dapat meningkatkan ketebacaan.
Namun pada umumnya, setiap baris terdiri dari 9 sampai 10 kata pada setiap baris dapat
meningkatkan kecepatan membaca dan pemahaman (Scottconnect).
Leading (Line Height)
Pergunakan leading atau jarak baris yang lebih lebar dari default. Mempergunakan
leading 130% dapat memberikan perbedaan yang besar terhadap halaman Web yang
Readable.
Pemilihan Huruf
Dalam memilih huruf, sesuaikan dengan tema Web. Bila Anda menggunakan lebih dari 2
font maka Web akan nampak seperti “catatan acak”, font berbeda hanya digunakan
untuk memberi penekanan atau untuk membedakan antara konten pada Web.
Italic
Hindari pergunaan italic untuk teks dengan ukuran kecil, karena teks italic relatif lebih
sulit untuk ditampilkan pada kotak-kotak pixel maka teks italic akan terlihat kasar. Bila
Anda harus menggunakan italic, hindari penggunaan untuk teks yang cukup panjang.
Kegunaan Kapital
Menggunakan huruf kapital pada seluruh teks akan mempersulit dalam membaca,
bagaimanapun huruf kapital pada awal kalimat lebih mempermudah dalam membaca.
Kekontrasan
Pergunakan teks yang kontras dengan warna latar, anda dapat membaca artikel
“Mengapa Harus Kontras” pada Design World.
Garis bawah pada links
Garis bawah dipergunakan untuk membedakan apakah teks tersebut adalah link atau
bukan. JAdi jangan memberikan penekanan pada kata dengan garis bawah tapi tanpa
link.
(Pupung Budi Purnama)
Sumber: www.designworld.master.web.id

12
 APA ITU TYPOGRAPHY ? Sumber: www.sunardipw.blogspot.com

Tipografi adalah ilmu yang mempelajari tentang seni dan desain huruf (termasuk
simbol) dalam aplikasinya untuk media komunikasi visual melalui metode penataan
layout, bentuk, ukuran dan sifatnya sehingga pesan yang akan disampaikan sesuai
dengan yang diharapkan.
Secara modern, tipografi berkaitan dengan penataan huruf pada media elektronik,
baik dari segi tampilan maupun outputnya ke berbagai media cetak.
Sedangkan secara tradisional, tipografi berkaitan dengan penataan huruf melalui
media manual berupa lempeng baja yang timbul atau karet (stempel) yang timbul yang
berkenaan dengan tinta dan akan dituangkan ke permukaan kertas.
Kenapa Harus Belajar Tipografi?
Tipografi memegang peranan penting dalam segala hal yang berkenaan dengan
penyampaian bahasa non verbal (menggunakan tulisan) dalam segala bentuk publikasi,
karena kita harus tahu berapa ukuran tulisan yang akan kita gunakan, efek dan bentuk
yang akan kita tampilkan sehingga muatan emosi dan sifat dari pesan yang muncul
sesuai dengan tujuan komunikasi yang ingin kita sampaikan kepada publik.
Sebagai contoh, dalam bahasa verbal, kita tidak mungkin berteriak dengan bentakan
untuk merayu/membujuk seseorang sehingga menuruti atau memahami kemauan kita.
Begitu juga dalam tipografi, kita tidak mungkin membuat tulisan dengan bentuk tegas dan
keras (seperti larangan atau bentakan emosi) untuk publikasi yang bersifat membujuk atau
menawarkan sesuatu produk atau jasa. Untuk itulah kita harus belajar tipografi.
Dari Mana Harus Belajar Terlebih Dahulu Tentang Tipografi?
Ada beberapa tahapan yang harus kita lalui.
1. Pengenalan Anatomi Huruf.
Kita tidak mungkin dapat menilai seseorang itu cantik atau jelek, kalau kita tidak tahu
apa itu wajah. Dan kita juga tidak bisa menilai seseorang itu anggun dan menarik, kalau
kita tidak tahu apa itu tangan, kaki, badan, dsb. :). Begitu juga dengan Tipografi, Anda
tidak mungkin dapat mengenali dengan baik sifat-sifat huruf yang akan Anda gunakan
apabila Anda tidak mengetahui unsur-unsur yang membentuknya.
2. Pengenalan Bentuk dan Penerapannya pada Publikasi.
Pada tahap ini Anda harus belajar bagaimana baris-baris teks itu disusun dalam
format yang benar. Memberi efek pada tulisan dengan benar. Mengatur jarak antar huruf,
jarak antar baris dan sebagainya sehingga tulisan dapat dibaca dengan baik oleh publik.
Mengatur besar kecilnya tulisan yang sesuai. Mengatur perataan yang proporsional
sesuai degan sifat materi yang disampaikan dan sebagainya.
3. Mempelajari Legibility Teks dalam Publikasi.
Disini Anda diminta jeli dalam mengeksplorasi perbedaan antara berbagai jenis
keluarga tulisan (typeface) dan tahu menempatkan huruf sesuai dengan citra yang akan
ditampilkan. Eksperimen sangat diperlukan untuk menempa keahlian pada tahap ini.
Kalau Anda sudah menguasai ilmu tipografi, maka Anda akan menguasai sebagian
unsur yang diperlukan oleh seorang desainer grafis.
Sebagai rekomendasi bacaan untuk belajar Tipografi, baca buku:
Tipografi Dalam Desain Grafis, karya Danton Sihombing, terbitan Gramedia.

13
 TIPOGRAFI: LEADING
Dalam penyajian teks untuk media cetak maupun digital, kita akan berkaitan dengan
apa yang dinamakan dengan Leading (baca: ledding). Apakah Leading itu? Leading
adalah jarak antar baris yang memungkinkan sebuah baris dapat jelas terbaca diantara
baris lainnya. Menggunakan Leading dengan baik juga akan turut dalam membangun
keterbacaan dari huruf yang dipergunakan.

Pada tipografi tradisional, kita mengenal istilah Body Clearance, yaitu jarak minimum
antara Ascender satu baris dengan Descender baris yang ada diatasnya. Pada jaman
dahulu, orang menggunakan cetakan untuk membuat huruf pada kertas hingga bila
bagian atas satu lempengan ditempelkan pada bagian bawah lempengan lain, maka ia
akan memiliki jarak terkecil dari huruf pada lempengan bawah dengan yang berada
diatasnya, itulah yang disebut Body Clearance.

Leading pada jaman dahulu dipergunakan lempengan yang memiliki ukuran tertentu
untuk memisahkan lempengan satu dengan yang lainnya.

Pada zaman modern, istilah Leading tetap dipergunakan seperti pada editor-editor
teks maupun grafis. Pada Photoshop, leading dapat Anda tampilkan melalui panel tab
Charachter.

14
Pada Web, Leading dapat kita atur menggunakan CSS (Cascading Style Sheet), untuk
mengatur leading sebuah paragraf, Anda dapat mempergunakan:

p {line-height: 20px;}

Dengan demikian, jarak antar baris akan mempergunakan ukuran 20px.

Leading akan berpengaruh banyak pada tampilan teks atau huruf, jadi
mempertimbangkan Leading dengan baik adalah langkah yang tepat untuk
membangun teks yang enak dibaca dan menarik.

(Pupung Budi Purnama)

Sumber: www.designworld.master.web.id

TIPOGRAFI WEB: FONT WEB SAFE

Dunia publikasi Web, berbeda dengan dunia publikasi pada media cetak. Perbedaan
dasarnya dalam dunia Web segala sesuatunya lebih mengikat dan dibatasi oleh berbagai
hal. Dalam dunia cetak, dengan bebas Anda dapat menentukan segala hal yang dirasakan
perlu, Namun dalam dunia Web, apa yang Anda gunakan sangat tergantung pada audiens
Anda. Diantara keterbatasan yang harus dipertimbangkan oleh seorang desainer,
diantaranya adalah penggunaan huruf dalam halaman Web. Bila dalam media cetak Anda
bebas menentukan huruf yang Anda suka, tidak demikian dengan dunia Web karena
bermacam-macamnya keadaan dari audiens hingga kita harus menggunakan huruf yang
terbilang aman dan dapat dibaca dengan baik oleh audiens.
Dalam artikel seri Tipografi Web ini, kita akan mengenal berbagai macam karakter huruf
yang dipergunakan dalam Web dan berbagai teknologi baru yang dapat dipergunakan
seperti CSS formating, Web Font Embedding, dan lain-lain. Namun kali ini kita akan
15
mengenal huruf-huruf yang “Web safe” dan dapat dilihat dengan baik dalam berbagai
sistem operasi.
Diantara banyak huruf yang ada di PC kita, hanya ada beberapa huruf yang terbilang Web
Safe diantaranya adalah:
Times New Roman
Times new roman adalah jenis huruf serif yang sering Anda lihat ada surat kabar atau
majalah. Font ini didesain untuk kemudahan membaca pada media cetak, demikian juga
pada layar monitor. Pada pengguna Windows, font ini adalah default. Pada pengguna Mac
dan Linux (Times) huruf ini dapat ditampilkan pula dengan baik. Namun, pada penggunaan
ukuran yang kecil 9/10px huruf ini mulai sulit untuk dibaca.
Arial
Arial adalah huruf Sans-serif yang sering dipergunakan dalam Web. Terlihat lebih
sederhana dan lebih mudah dibaca pada berbagai ukuran. Pada sistem operasi Linux, tidak
terdapat huruf Arial, namun digantikan oleh Helvetica yag memiliki karakteristik yang
kurang lebih sama.
Verdana
Tipe ini sangat baik dalam menampilkan huruf-huruf dengan ukuran kecil, seperti tanggal,
caption, atau copyright. Font ini terkesan lebih lebar, oleh karena itu, untuk Web font ini
jangan dipergunakan dengan ukuran besar.
Comic Sans
Huruf ini terkesan bersahabat dan informal, namun jarang dipergunakan di Web karena
karakteristiknya tersebut. Somic sans terdapat di kebanyakan sistem operasi Windows.
Georgia
Huruf serif ini didesain khusus untuk kemudahan membaca di layar monitor. Huruf ini
dapat menggantikan jenis huruf Times New Roman, huruf ini terlihat lebih rapi dan elegan
di layar monitor dari pada Times New Roman.
Trebuchet
Huruf ini memang jarang dipergunakan, namun huruf ini kebanyakan sudah terinstall pada
OS yang ada karena font ini dapat di download secara bebas.
Helvetica
Pada sistem operasi Linux, Helvetica adalah pengganti dari Arial, namun huruf ini terlihat
lebih rapih dari arial.
Pada artikel mendatang kita akan mengetahui cara menggunakan huruf pada halaman
Web, semoga bermanfaat bagi Anda.

16