Typography Guide
Modular Type Scale (ratio 1.25)
xs / 0.64remCaption text
sm / 0.8remSmall body text
base / 1remBody text (16px)
lg / 1.25remLead text
xl / 1.563remHeading 3
2xl / 1.953remHeading 2
3xl / 2.441remH1
Line Height Rules
| Context | Line Height | Why |
|---|---|---|
| Body / Paragraph | 1.5 โ 1.7 | Best readability for long text |
| Headings (H1-H3) | 1.1 โ 1.3 | Tight but not cramped |
| UI Labels / Captions | 1.2 โ 1.4 | Short text, tight spacing OK |
| Code blocks | 1.5 โ 1.6 | Aids line scanning |
Classic Font Pairings
| Heading | Body | Vibe |
|---|---|---|
| Playfair Display | Source Sans 3 | Editorial, luxury |
| Montserrat | Merriweather | Modern, professional |
| Inter | Inter | Clean, tech, UI |
| Space Grotesk | DM Sans | Startup, contemporary |
| Raleway | Lato | Elegant, approachable |
| Noto Serif SC | Noto Sans SC | CJK content, clean |