Digital Transformation
Typography Scale (Skala Tipografi)
TL;DR: Typography scale adalah kumpulan ukuran font yang disusun berdasarkan rasio tertentu (misalnya 1,25 atau 1,333) sehingga setiap level heading dan teks punya proporsi yang konsisten. Sistem ini bagian dari style guide yang menjaga tampilan website tetap rapi di semua halaman.
Apa itu Typography Scale?
Typography scale menentukan ukuran teks secara berjenjang: H1 paling besar, lalu H2, H3, hingga body text dan caption, masing-masing mengikuti rasio matematis yang sama. Tanpa skala ini, developer sering menebak ukuran font satu per satu, hasilnya heading di satu halaman terlihat beda proporsi dengan halaman lain.
Contoh Skala Umum
| Level | Rasio 1,25 (px, base 16) |
|---|---|
| H1 | 39 |
| H2 | 31 |
| H3 | 25 |
| Body | 16 |
| Caption | 13 |
Kenapa Penting?
Skala tipografi yang konsisten membuat grid system dan layout terasa lebih terstruktur, karena jarak antar elemen ikut menyesuaikan proporsi teks. Ini juga memengaruhi keterbacaan: heading yang terlalu dekat ukurannya dengan subheading membuat pembaca sulit membedakan hierarki informasi, terutama di halaman dengan banyak white space yang harus diisi seimbang.
Pertanyaan Umum
Rasio berapa yang paling umum dipakai?
Rasio 1,2 sampai 1,333 paling sering dipakai untuk website karena selisih ukurannya tidak terlalu ekstrem antar level.
Apakah typography scale harus sama di mobile dan desktop?
Tidak harus sama persis, tapi rasio dasarnya sebaiknya tetap konsisten. Ukuran absolut biasanya diperkecil di mobile agar tetap proporsional.