Belajar UI Designer - Typography

#Pendahuluan

Setelah di episode 3 kita membangun palette warna, pada episode ini kita menyusun fondasi kedua: tipografi. Di layar digital, hampir semua komunikasi disampaikan lewat teks — judul, label, angka saldo, tombol. Jika warna adalah "kepribadian" antarmuka, tipografi adalah "suaranya".

Mengapa tipografi penting dipahami sebagai sistem, bukan sekadar pilih font? Karena teks yang tidak konsisten adalah tanda paling cepat dikenali dari produk yang tidak profesional: ukuran yang berubah-ubah antar layar, line-height yang menyesakkan, font yang berbenturan. Sistem tipografi membuat keterbacaan terjamin di semua konteks — dan inilah yang membedakan desain "asal jadi" dari desain yang terasa enak dibaca setiap hari.

#Anatomi dan Dasar Type

Beberapa istilah yang wajib kalian kuasai:

• Font family — keluarga huruf (misal Inter).
• Weight — ketebalan (Regular 400, Medium 500, SemiBold 600, Bold 700).
• Size — ukuran dalam px (di UI) atau pt.
• Line height — jarak antar baris, biasanya dinyatakan sebagai kelipatan (1.2x, 1.5x).
• Letter spacing — jarak antar huruf (tracking); judul besar sering diberi negative tracking, teks kecil diberi positive.
• Baseline — garis dasar tempat huruf berdiri; penting untuk alignment dengan elemen lain.

#Modular Type Scale

Type scale adalah deretan ukuran font yang punya relasi matematis — biasanya kelipatan 1.25x (musical fifth) untuk UI atau 1.333x (perfect fourth) untuk antarmuka yang lebih berisi. Kantongin memakai rasio 1.25:

Display  48px / 1.1   ← angka saldo, headline iklan
Headline 32px / 1.2   ← judul halaman
Title    24px / 1.3   ← judul kartu, section
Body     16px / 1.5   ← teks utama (basis)
Caption  14px / 1.5   ← label, metadata
Micro    12px / 1.4   ← legal, kredit, tip

Rasio modular membuat ukuran yang berbeda tetap selaras — tidak ada angka "nembak" seperti 17 px atau 23 px. Ini juga yang memudahkan developer mengimplementasikan (mereka cukup membaca skala, bukan menebak).

#Hierarki Tipografi

Hierarki tipografi menyatakan pentingnya informasi lewat ukuran, weight, dan warna — bukan hanya tebal-tebalan:

• Paling penting: ukuran besar + weight tebal + warna paling pekat (angka saldo: Display SemiBold, ink-900).
• Sedang: ukuran sedang + warna sekunder (ink-700).
• Tersier: ukuran kecil + warna redup (ink-500) untuk placeholder, label, metadata.

Aturan praktis: untuk satu layar, cukup 2-3 tingkat hierarki teks yang jelas. Terlalu banyak ukuran justru merusak skimming yang dilakukan pengguna.

#Readability (Keterbacaan)

Keterbacaan ditentukan empat hal yang sering diabaikan:

• Line length — panjang baris ideal 45-75 karakter. Untuk body text Kantongin (16px) di mobile, ~40 karakter per baris sudah ideal; di desktop, batasi lebar kolom.
• Line height — teks body butuh 1.4-1.6x untuk nyaman dibaca; heading boleh lebih rapat (1.1-1.3x).
• Letter spacing — teks besar boleh dirapatkan (misal Display −0.02em), teks kecil boleh dilebarkan sedikit.
• Contrast teks — gabungkan dengan episode 3: teks body minimal rasio AA 4.5 : 1 terhadap latar.

Contoh implementasi line-height & tracking

body {
  font-size: 16px;
  line-height: 1.5;         /* nyaman untuk paragraf */
  letter-spacing: 0.01em;
}
 
h1 {
  font-size: 32px;
  line-height: 1.2;         /* rapat untuk judul */
  letter-spacing: -0.02em;  /* negative tracking */
}

#Pairing Font

Kombinasi font jarang membutuhkan lebih dari dua keluarga: satu untuk UI/body, satu untuk display/judul. Panduan pair yang sehat:

• Contrast yang jelas — display serif/ekspresif dipasangkan body sans yang netral, bukan dua font sans yang mirip.
• Jaga jumlah — maksimal 2-3 keluarga per produk; lebih dari itu layar terasa kacau.
• Uji di konteks nyata — font display yang indah di poster bisa gagal di ukuran kecil UI.

Kantongin memakai Plus Jakarta Sans untuk display (karakter muda, mendukung bahasa Indonesia) dan Inter untuk body/UI. Untuk angka — yang sangat penting di aplikasi keuangan — JetBrains Mono dipakai untuk jumlah & tabel (penggunaan tabular figures), agar angka saling sejajar vertikal dan mudah dibandingkan.

#Praktik: Type System Kantongin

1. Buat frame Typography di file Figma Kantongin.
2. Terapkan scale 6 ukuran di atas dengan line-height masing-masing.
3. Set weight: Display dan Headline → SemiBold/Bold; Body dan Caption → Regular/Medium.
4. Tetapkan warna per tingkat (Display → ink-900, Body → ink-700, Caption → ink-500).
5. Simpan semuanya sebagai text styles Figma — style ini dipakai mulai episode 5.

#Common Pitfalls

• Terlalu banyak ukuran — skala yang tidak modular membuat sistem sulit dipelihara.
• Line-height terlalu rapat — paragraf terasa menyesakkan; ingat minimal 1.4x untuk body.
• Font stacking yang salah — teks kecil yang pakai font display akan sulit dibaca.
• Mengabaikan kontras teks — ukuran besar yang kontrasnya rendah tetap tidak nyaman dibaca.
• Tidak pakai text styles — edit satu layar mengubah satu layar; dengan styles, perubahan menyebar otomatis.

#Penutup

Pada episode 4 ini, kalian telah membangun sistem tipografi yang menjadi tulang punggung keterbacaan produk.

Inti yang harus dibawa pulang:

• Modular type scale (rasio 1.25/1.333) menciptakan ukuran yang selaras, bukan menebak.
• Hierarki tipografi menyatakan kepentingan lewat size, weight, dan warna.
• Readability ditentukan line length, line height, letter spacing, dan kontras teks.
• Pairing font cukup 1-2 keluarga dengan kontras yang jelas; angka keuangan pakai tabular figures.

Di episode 5 selanjutnya kita akan membahas layout & spacing (grid systems) — grid kolom, spacing scale 4/8pt, dan responsive layout untuk menyusun layar Kantongin secara konsisten. Sampai jumpa di episode 5!