Font Stack
- Primary Font: Lato Regular (for normal text; fallback:
Helvetica Neue, Helvetica, Arial, sans-serif) - Secondary Font: Alata Regular (for headings; fallback:
Helvetica Neue, Helvetica, Arial, sans-serif)
Font weight
| Name | font-weight | Usage |
|---|---|---|
| Black | 900 | |
| Extra-bold | 800 | |
| Bold | 700 | Headings |
| Semi-bold | 600 | Impact titles |
| Medium | 500 | |
| Normal | 400 | Regular text |
| Light | 300 | Captions |
| Extra light | 200 | |
| Thin | 100 |
Type Scale
| Level | Font Size | Line Height | Usage | Weight |
|---|---|---|---|---|
h1 |
24px | 1.3rem | Page titles | Bold |
h2 |
20px | 1.3rem | Section titles | Bold |
h3 |
16px | 1.3rem | Subheadings | Bold |
h4 |
14px | 1.3rem | Subheadings | Bold |
h5 |
12px | 1.3rem | Subheadings | Bold |
h6 |
12px | 1.3rem | Subheadings | Bold |
| Body | 12px | 1.5rem | Paragraph text | Normal |
| Caption | 0.875rem | 1.25rem | Small text | Light |
Guidelines
- Use system fonts for performance fallback.
- Maintain vertical rhythm with consistent spacing.
- Avoid using more than 2 font families.