Web Typography

Ketika "Typography" Membuat Bingung

Saya harus jujur kalau tahu sedikit tentang tipografi. Saya selalu berusaha untuk memahami tentang "vertical rhythm" dan "math" seperti pembicaraan Tim Ahren tentang interaksi antara "Type Design" dan "Rendering Technology". Saya memiliki perspektif yang berbeda karena saya bukan orang yang membuat keputusan dalam desain, tapi saya adalah orang yang menerapkannya dan sering kali memperbaikinya ketika sebuah project sudah "keluar jalur".

Saya telah melihat projek-projek dengan ribuan deklarasi font-size dan judul. Salah satu proyek bahkan memiliki lebih dari sepuluh ribu deklarasi margin. Jadi sementara aku menghargai eksplorasi kreatif, aku juga ingin membangun pola dalam tipografi dan pastikan kita tidak memilih untuk tidak memilih. Atau, memilih semua hal.

Menganalisa Typography Sebuah Website

Hampir semua projek-projek saya selalu di mulai dengan mengevaluasi CSS yang sudah ada. Saya selalu mencari duplikasi di CSS menggunakan Grep. Dimana nantinya developer kami bisa membuat fungsi yang baru tanpa menulis CSS yang baru. Lalu team kami akan meng-screenshoot beberapa halaman lengkap dengan findingnya.

Dengan cara ini, kita bisa melihat perbedaan visual yang sangat halus, dan mungkin tidak akan disadari oleh "user". dengan memperbaiki perbedaan-perbedaan ini, maka kita akan bisa membuat sebuah design yang konsisten. Dan pada saat yang sama, tentunya coding kita akan lebih ramping dan performance akan meningkat.

Sering kali typography sebuah website membuat kita bias. Designer datang dan pergi pada sebuah projek dan kadang-kadang tidak  mengingat bagaimana tipe font Verdana 16 px bisa ikut tersisip di dalam coding smiley

OTOMATISASI

Dulu kami sering melakukan hal ini dengan mencatat di notepad. Kami akan mengecek sebuah website, ambil screenshoot dan dengan teliti mendokumentasikan informasi yang kami temukan. Kita tidak perlu melakukan hal itu berulang-ulang, karena sudah sangat jelas sekali kalau semua tugas kalau bisa di otomatisasi. Untuk hal ini, saya akan mengenalkan sebuah plugin untuk melihat jenis-jenis font yang digunakan oleh sebuah website untuk browser mozilla firefox.

www.type-o-matic.net

1. Silahkan klik link alamat website yang diatas. Dan ingat ini hanya untuk Mozilla Firefox.
2. Nantinya plugin ini akan bisa digunakan kalau sudah menggunakan Plugin Firebug.
3. Kalau sudah masuk ke websitenya Type-o-matic, silahkan download filenya.
4. Install pluginnya dengan membuka filenya menggunakan firefox. "Open With > Firefox.exe"
5. Sekarang kita akan test dengan menuju ke website yang ingin kita lihat font apa saja yang di pakai di website itu.
6. Tekan F12 atau klik kanan di website tersebut dan pilih "Inspect element with Firebug".
7. Disamping tab "Cookies" ada tab "Typography". Silahkan di klik.
8. Sekarang klik "Persist" lalu klik "Generate Report" untuk melihat hasilnya.

Jadi tidak perlu repot lagi untuk melihat satu per satu  font apa saja yang dipakai di sebuah website. Tinggal kita mencontoh website yang sudah terkenal

Selamat mencoba