Core brand typography and hierarchical scaling system.
Typeface
- Primary Font: Titillium Web
- Fallbacks: Arial, sans-serif
- Provider: Google Fonts
Font Weights
| Weight | Token | Example |
|---|
| Regular | --fw-regular | The quick brown fox jumps over the lazy dog. |
| Semi Bold | --fw-semibold | The quick brown fox jumps over the lazy dog. |
Type Scale
| Style | Token | Size (px/rem) | LH | Preview |
|---|
| Display | --fs-display | 64px / 4rem | 68px | Display Title |
| H1 | --fs-h1 | 48px / 3rem | 52px | Heading 1 |
| H2 | --fs-h2 | 36px / 2.25rem | 40px | Heading 2 |
| H3 | --fs-h3 | 28px / 1.75rem | 32px | Heading 3 |
| H4 | --fs-h4 | 24px / 1.5rem | 28px | Heading 4 |
| H5 | --fs-h5 | 20px / 1.25rem | 24px | Heading 5 |
| H6 | --fs-h6 | 18px / 1.125rem | 22px | Heading 6 |
| Body | --fs-body | 18px / 1.125rem | 28px | The quick brown fox jumps over the lazy dog to test line height. |
| Caption | --fs-caption | 13px / 0.81rem | 16px | Metadata and tiny labels |
Usage Guidelines
Headings
- Use Display exclusively for landing page hero sections.
- Ensure a logical hierarchy (don't jump from H1 to H4).
Body Text
- Use the Semi Bold weight sparingly for emphasis within body copy.
Accessibility
- Maintain a minimum contrast ratio of 4.5:1 for body text.
- Caption text (13px) should only be used for non-critical information to ensure legibility for all users.