Typography
Lays the groundwork by specifying fonts, styles, and hierarchies, ensuring consistent, readable, and cohesive visual communication for the brand or project.
| Typestyle | Weight | Rem | Px | Line Height | Spacing |
|---|---|---|---|---|---|
| Display-1 | Semibold | 6x | 96px | 106px | -5% |
| Display-2 | Semibold | 4.5x | 72px | 86px | -4% |
| Display-3 | Semibold | 3.25x | 52px | 68px | -3% |
| Display-4 | Semibold | 2.5x | 40px | 52px | -2.5% |
| Heading-1 | Semibold | 2x | 32px | 40px | -2% |
| Heading-2 | Semibold | 1.75x | 28px | 36px | -1.5% |
| Medium | 1.75x | 28px | 36px | -1.5% | |
| Regular | 1.75x | 28px | 36px | -1.5% | |
| Heading-3 | Semibold | 1.5x | 24px | 36px | -1.2% |
| Medium | 1.5x | 24px | 36px | -1.2% | |
| Regular | 1.5x | 24px | 36px | -1.2% | |
| Heading-4 | Semibold | 1.25x | 20px | 30px | -1% |
| Medium | 1.25x | 20px | 30px | -1% | |
| Regular | 1.25x | 20px | 30px | -1% | |
| Body-1 | Semibold | 1x | 16px | 24px | -0.5% |
| Medium | 1x | 16px | 24px | -0.5% | |
| Regular | 1x | 16px | 24px | -0.5% | |
| Underlined | 1x | 16px | 24px | -0.5% | |
| Body-2 | Semibold | 0.875x | 14px | 20px | 0% |
| Medium | 0.875x | 14px | 20px | 0% | |
| Regular | 0.875x | 14px | 20px | 0% | |
| Underlined | 0.875x | 14px | 20px | 0% | |
| Caption | Semibold | 0.75x | 12px | 18px | 0.5% |
| Medium | 0.75x | 12px | 18px | 0.5% | |
| Regular | 0.75x | 12px | 18px | 0.5% | |
| Underlined | 0.75x | 12px | 18px | 0.5% |