Beberapa waktu lalu saya menulis sedikit referensi tentang font stack.

Penggunaan font terkadang menjadi masalah tersendiri. Kita pasti ingin menggunakan font yang bagus untuk mendukung tampilan dan keterbacaan. Akan tetapi hal tersebut sulit terealisasi karena terkendala kompatibilitas sistem operasi. Tidak semua OS memiliki font yang kita gunakan.

Saya tidak berbicara masalah font embedding. Saya ingin membahas masalah kontrol dari sisi pengguna. Jika beberapa waktu lalu diperlukan JavaScript untuk mengubah ukuran font, sekarang tidak lagi karena browser modern telah memiliki fungsi tersebut.

Ok, saya tahu semua itu, Lalu apa hubungannya dengan penggunaan font pada desain web?

Good question! Hubungannya adalah, jika kita bisa memberikan kontrol pada user untuk mengatur ukuran font kenapa tidak memberikan keleluasaan untuk memilih font yang diinginkan? Bukan, bukan dengan CSS switcher a la jQuery, tetapi sesuai dengan setelan browser.

Generic font? bagaimana dengan CSSnya?

Inilah poin yang menarik, kita tidak perlu menuliskan font yang spesifik pada CSS. Cukup serif, sans-serif, monospace atau tidak perlu samasekali. Biarkan user menyetting browser mereka dan memilih font yang disukainya berikut ukurannya.

Hey, terdengar seperti “menonaktifkan CSS” bagi saya?

Haha, tidak juga, CSS nonaktif sux. Pengaturan tata letak tetap sesuai dengan tempatnya. Kita tidak dapat melupakan measuring & kerning untuk mendapatkan legibilitas yang maksimal. Yang dilakukan user hanyalah memilih font dan ukuran yang dibutuhkan.

Oh begitu, lalu bagaimana dengan layoutnya? Ukurannya pasti kacau!

Ha, inilah yang terpenting. Konsekuesinya kita harus meninggalkan satuan absolut seperti pixel dan beralih menggunakan satuan relatif — terutama em dan percent. Tujuannya agar layout tetap konsisten meskipun ukuran font yang digunakan berbeda-beda.

Menarik! Mari kita coba…

Yup! anda bisa memulainya dari halaman ini, ubahlah setelan font default pada browser. Sangat mudah bukan? ☺