Typography
Menjelaskan penggunaan font dan penerapannya
Typography
Typography yang konsisten membantu membangun identitas brand yang kuat dan meningkatkan keterbacaan konten.
Font Utama
Inter
Font utama yang digunakan untuk semua teks di platform KYZN.
font-family: 'Inter', sans-serif;Karakteristik:
- Sans-serif modern
- Keterbacaan tinggi di layar
- Mendukung berbagai bahasa
- Tersedia dalam berbagai weight
Interactive Typography Guide
Typography Scale
H1
36px / 2.25rem • Weight 700 • Line height 1.2
Heading 1 - Main page title
H2
30px / 1.875rem • Weight 700 • Line height 1.2
Heading 2 - Section title
H3
24px / 1.5rem • Weight 700 • Line height 1.2
Heading 3 - Subsection
H4
20px / 1.25rem • Weight 700 • Line height 1.3
Heading 4 - Component title
Body Large
18px / 1.125rem • Weight 400 • Line height 1.6
Large body text
Body Regular
16px / 1rem • Weight 400 • Line height 1.6
Default body text
Body Small
14px / 0.875rem • Weight 400 • Line height 1.6
Small body text
Body XSmall
12px / 0.75rem • Weight 400 • Line height 1.6
Extra small body text
Font Weights
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
Semibold (600)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Line Heights
Heading (1.2 - 1.3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Body Text (1.5 - 1.6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Usage Examples
This is a Heading 1
36px • Weight 700 • Line height 1.2
This is a Heading 2
30px • Weight 700 • Line height 1.2
This is a Heading 3
24px • Weight 700 • Line height 1.2
This is body text with regular weight and proper line height for optimal readability. The line height should be between 1.5 and 1.6 for body text to ensure comfortable reading experience.
16px • Weight 400 • Line height 1.6
Best Practices
- •Use maximum 2-3 font sizes per page for hierarchy
- •Ensure sufficient contrast between text and background
- •Keep line length between 60-80 characters for readability
- •Use appropriate weights for visual hierarchy
- •Maintain consistent spacing between text elements
- •Test readability across different screen sizes
Font Weights
| Weight | Penggunaan |
|---|---|
| 400 (Regular) | Body text, paragraf |
| 500 (Medium) | Subtitle, label |
| 600 (Semibold) | Heading kecil, emphasis |
| 700 (Bold) | Heading utama, judul |
Ukuran Font
Heading
- H1: 36px / 2.25rem
- H2: 30px / 1.875rem
- H3: 24px / 1.5rem
- H4: 20px / 1.25rem
Body
- Large: 18px / 1.125rem
- Regular: 16px / 1rem
- Small: 14px / 0.875rem
- XSmall: 12px / 0.75rem
Line Height
- Heading: 1.2 - 1.3
- Body text: 1.5 - 1.6
- UI elements: 1.4
Penerapan
Heading
.heading-1 {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.2;
}Body Text
.body-text {
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}Best Practices
- Gunakan maksimal 2-3 ukuran font dalam satu halaman
- Pastikan kontras yang cukup antara teks dan background
- Hindari teks yang terlalu panjang per baris (ideal: 60-80 karakter)
- Gunakan weight yang tepat untuk hierarki visual