Typography

Font Family & Font Weights

Semua text assets harus connect ke Global Typography Variables dengan peran yang jelas.

Font Family Roles

Ada 4 kategori berdasarkan fungsi:

1. Display
   Visual utama, text eksperimental, atau ukuran besar
2. Heading
   Struktur hirarki konten
3. Body
   Paragraf dan deskripsi
4. UI
   Component interactive (Navigation, Button, Label)

Font Weights

Gunakan nama literal sesuai font yang dipilih: Light, Regular, Medium, Semibold, Bold.

Typography Hierarchy

Declare semua Text Styles dalam satu Collection dengan naming scale standar.

Display Font

Definition: Varian ukuran dari terbesar ke terkecil.

• L (Large)
• M (Medium)
• S (Small)

Peran: Text untuk kebutuhan visual. Biasanya standalone dan tidak bagian dari flow konten normal.

Kapan digunakan:

• Hero section headlines
• Section title statements
• Large accent text di footer atau callout
• Experimental atau artistic text

Declare semua varian meski layout hanya pakai satu ukuran.

Heading

Definition: H1 hingga H6 mengikuti standar HTML heading levels — H1 paling besar, H6 paling kecil.

Peran: Text untuk struktur hierarchy content. Merupakan backbone semantic tagging untuk developer dan SEO.

Kapan digunakan:

• H1: Main page title
• H2: Section heading
• H3–H6: Subsection heading dan nested content

Declare lengkap H1 sampai H6 untuk memudahkan developer di Webflow/Framer, meski tidak semua varian digunakan di layout.

Body

Definition: XVarian ukuran untuk readability konten.

• XL (Extra Large)
• L (Large)
• M (Medium)
• S (Small)
• XS (Extra Small)

Peran: Text untuk paragraf, deskripsi, dan editorial content. Digunakan untuk readability .

Kapan digunakan:

• Paragraf artikel
• Product description
• Long-form content
• Detail dan fine print

Declare varian sesuai kebutuhan saja—tidak perlu lengkap semua.

UI

Definition: Tidak ada huruf/skala—ini untuk interface elements spesifik.

• Link Nav / Menu
• Button Text
• Label

Peran: Text untuk komponen interaktif. Punya behavior berbeda (hover/active states) dan dioptimasi untuk usability, bukan readability panjang.

Kapan digunakan:

• Navigation menu
• Button labels
• Form labels dan input text
• Badges dan tags
• Microcopy di interface

Pisahkan dari Body karena styling-nya beda (line-height, letter-spacing, weight) dan punya interaksi states.