Foundations/Sistem Tipografi (Typography)
Sistem Tipografi (Typography)
● Ready Web Nuxt 4 + Mobile React Native
Kombinasi Plus Jakarta Sans (geometris, modern, presisi) dan Playfair Display (serif aksen editorial) menciptakan keseimbangan antara fungsionalitas UI dan sentuhan humanis.
Interactive Type Tester
Uji ukuran, ketebalan, dan jenis font secara live.
Size:24px
Persiapan ujian yang nggak perlu bikin bingung harus belajar dari mana.
Editorial Accent Pattern (.text-accent)
Ciri khas tipografi Zenko adalah memasangkan kalimat sans-serif tegas dengan frasa penutup Playfair Display Italic berwarna biru primer.
Latihan try out online untuk ujian yang kamu tuju
Base: Plus Jakarta Sans 800 (-0.04em)Accent: Playfair Display Italic 500 (#2F6FEB)
Hierarki Skala Tipografi
| Level | Ukuran | Weight | Tracking | Implementasi |
|---|---|---|---|---|
| Display / H1 | clamp(2rem, 3.8vw, 3.4rem) | 700/800 | -0.04em | Judul banner utama landing page |
| Headline Accent | 1.08em relative | 500 Italic | -0.01em | Frasa penutup emosional (Playfair Display) |
| H2 Section | clamp(1.8rem, 3vw, 2.5rem) | 700 | -0.03em | Judul seksi landing page & modal |
| H3 Card Title | 1.15rem – 1.25rem | 700 | -0.03em | Nama paket try out & judul fitur |
| Eyebrow / Overline | 0.76rem (12px) | 700 (Uppercase) | 0.14em | Kategori paket & badge sub-seksi |
| Body Lead | 1.02rem – 1.06rem | 400/500 | normal | Paragraf pengantar hero & deskripsi |
| Body Regular | 0.94rem – 1.0rem | 400/500 | normal | Teks body standar & artikel |
| Small / Meta | 0.82rem – 0.88rem | 500/600 | normal | Nama tutor, jumlah terjual, rating |
| Micro Tag | 0.70rem (11px) | 700 (Uppercase) | 0.14em | Kategori tray bawah kartu |