Gubuku – Ada yang ukurannya segede gaban, ada yang sekecil semut, terus jenis fontnya beda-beda di setiap halaman. Fix, itu bikin user (terutama sesama Gen Z) langsung swipe away alias kabur dalam hitungan detik!

Di dunia UI/UX Design dan branding, font itu bukan cuma sekadar tulisan. Font itu vibe, personality, dan cara aplikasi kamu ngobrol sama user. Nah, rahasia biar tampilan aplikasi kamu kelihatan aesthetic, rapi, dan pro banget adalah dengan punya Style Guide Tipografi.

Yuk, kumpul! Kita bedah cara bikin Style Guide Tipografi khusus aplikasi yang gampang dipraktikkin dan dijamin bikin UI kamu makin clean!

1. Pilih Font Family: Jangan Kebanyakan Style!

Aturan nomor satu yang hukumnya haram buat dilanggar: Jangan maruk font!

Cukup pilih 1 sampai 2 Font Family aja buat seluruh aplikasi kamu. Kalau kemarukan kebanyakan font, aplikasi kamu bakal kelihatan crowded dan chaotic.

• 1 Font (Paling Aman): Pakai satu font family tapi mainkan weight-nya (Bold, Medium, Regular). Contoh: Inter, SF Pro, atau Plus Jakarta Sans.

• 2 Font (Buat Vibe Unik): Satu font yang agak bold/eccentric buat Heading (Judul), dan satu font yang super simpel/legible buat Body Text (Isi tulisan).

Pro Tip: Pilih font yang sifatnya sans-serif (tanpa ekor) karena jauh lebih nyaman dibaca di layar HP yang kecil.

2. Buat Type Scale (Hirarki Ukuran Font)

Biar user gak bingung mana judul, mana penjelasan, dan mana tombol, kamu harus tentuin Type Scale. Ini ibarat susunan kasta ukuran font di aplikasi kamu.

Gak usah pusing ngitung manual, kamu bisa pakai rumus skala standar ini:

Kategori	Fungsi	Ukuran Font (px/rem)	Weight (Ketebalan)
Display / H1	Judul Utama / Banner	32px – 40px	Bold / Extra Bold
H2 / H3	Sub-judul / Title Card	20px – 24px	Semi-Bold / Bold
Body Text	Isi Konten / Penjelasan	14px – 16px	Regular / Medium
Caption / Subtext	Keterangan Foto / Date	12px	Light / Regular
Button Text	Tulisan di Tombol CTA	14px – 16px	Semi-Bold / Medium

3. Atur Line Height & Letter Spacing (Biar Gak Sumpek)

Pernah gak ngeliat tulisan yang antar barisnya rapat banget sampe nempel-nempel? Nah, itu namanya Line Height-nya zonk!

• Line Height (Jarak Antar Baris): Buat Body Text, atur Line Height sekitar 140% – 150% dari ukuran font. Bikin tulisan jadi punya “ruang bernapas” dan mata gak gampang capek.

• Letter Spacing (Jarak Antar Huruf): Buat font ukuran gede (Judul/H1), biasanya letter spacing-nya dibikin agak rapat (negative spacing). Sedangkan buat font ukuran mungil (Caption), kasih letter spacing yang agak renggang biar tetep terbaca jelas.

4. Perhatikan Kontras Warna & Aksesibilitas

Visual udah cakep, tapi warna fontnya kuning menyala di atas background putih? Big no! Mata user bisa auto jereng.

Pastikan kamu memperhatikan WCAG (Web Content Accessibility Guidelines):

• Gunakan warna font yang punya kontras tinggi dengan background.

• Misal: Teks hitam/abu gelap untuk background putih, atau teks putih untuk dark mode.

• Hindari pakai warna-warna neon buat body text yang panjang.

5. Dokumentasikan & Bikin Design System

Langkah terakhir yang bikin kamu kelihatan kayak UX Designer kelas atas: Dokumentasikan!

Rangkum semua aturan font, ukuran, line height, dan warnanya ke dalam satu file di Figma atau Adobe XD. Kasih nama variabel yang jelas, misalnya:

• Text/Heading-1

• Text/Body-Regular

• Text/Caption-Small

Tujuannya apa? Biar pas kamu kerja bareng Developer (Anak Coding), mereka gak pusing nanya-nanya lagi. Tinggal copy-paste kode tipografi yang udah kamu tentuin!

Penulis : Adellia SMK SUDJ