menentukan proposional ukuran font dalam desain

proporsional font dalam desain

1. Proporsional Ukuran Font Sans Serif di Desain UI SLAMET ACHWANDI, S.Kom

2. Prinsipnya bukan sekadar angka tetap , tapi menyesuaikan dengan : hierarki teks ( judul , subjudul , isi , caption, dll .), jarak pandang layar , aksesibilitas .

3. ” Desain UI bukan sekadar seni , tetapi kombinasi antara estetika dan fungsi .”

4. 1. Gunakan Skala Modular (Typographic Scale) Supaya proporsional , jangan asal pilih ukuran , tapi gunakan rasio . Rasio umum : 1.25 (perfect fourth) atau 1.33 (perfect fifth) . Contoh dasar : Body text → 16–18 px ( sebagai acuan minimal keterbacaan ). Heading → ikuti rasio , misalnya skala 1.25. 📌 Skema ( dengan basis 16 px , rasio 1.25): H1: 40 px H2: 32 px H3: 25 px Body: 16–18 px Caption: 12–14 px

5. 2. Pertimbangan Resolusi Layar 1920×1080 = full HD. Jika desain untuk desktop monitor ( jarak ±50–70 cm dari mata ), maka ukuran body ideal adalah 16–20 px . Jika desain untuk TV atau display besar ( jarak >1 meter), naikkan skala : body 24–28 px

6. 3. Gunakan Grid & Line Height Gunakan grid dasar 8 px (8-point grid system). Line height: 1.4–1.6 kali ukuran font ( misalnya body 16 px → line height 24 px ). Hindari teks terlalu rapat agar nyaman dibaca .

7. 4. Tips Khusus Sans Serif Sans serif ( misalnya Roboto, Helvetica, Inter, Open Sans ) memang optimal di UI. Untuk judul , jangan lebih dari 2,5 kali ukuran body agar tidak timpang . Perhatikan kontras warna dan spacing selain ukuran font.

8. 5. Rumus Cepat Proporsi Hitungan sederhana : Contoh : Skala Tipografi ( rasio 1.25, body = 18 px ) Caption : 18 ÷ 1.25 ≈ 14 px Body text : 18 px H3 : 18 × 1.25 = 22.5 px → dibulatkan 22–23 px H2 : 22.5 × 1.25 = 28 px H1 : 28 × 1.25 = 35 px Display / Hero Title ( opsional ) : 35 × 1.25 = 44 px  

9. 👉 Jadi ukuran kanvas 1920×1080 dan targetnya untuk aplikasi desktop Skema Proporsionalnya : Hero / Display : 44 px H1 : 35 px H2 : 28 px H3 : 22–23 px Body : 18 px Caption : 14 px

10. Rangkuman Mulai dari body 18 px sebagai standar keterbacaan . Naikkan / kurangi dengan faktor 1.25 untuk heading atau caption. Gunakan grid 8 px supaya rapi ( misalnya line-height 24 px untuk body, 32 px untuk H2, dll .).