1

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

2

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

3

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

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

4

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

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/letterform_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

11

(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.

12

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

13

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.

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

16

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.