Fonts, type scale, and text styling guidelines
Brand Typefaces
Headings: Montserrat
Montserrat is our heading typeface - bold, modern, and attention-grabbing.
font-family: 'Montserrat', sans-serif;- Use for H1-H4, titles, and display text
- Weights: Semibold (600) and Bold (700)
- Available on Google Fonts (free)
Body: Open Sans
Open Sans is our body typeface - clean, highly readable, and friendly.
font-family: 'Open Sans', sans-serif;- Use for body text, descriptions, UI elements
- Weights: Regular (400) and Semibold (600)
- Available on Google Fonts (free)
System Fallbacks
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;Type Scale
| Element | Font | Size (Desktop) | Size (Mobile) | Weight |
|---|---|---|---|---|
| H1 | Montserrat | 48px | 32px | Bold (700) |
| H2 | Montserrat | 36px | 28px | Semibold (600) |
| H3 | Montserrat | 24px | 20px | Semibold (600) |
| H4 | Montserrat | 18px | 16px | Semibold (600) |
| Body | Open Sans | 18px | 16px | Regular (400) |
| Small | Open Sans | 14px | 14px | Regular (400) |
Spacing Guidelines
| Property | Desktop | Mobile |
|---|---|---|
| Section Padding | 80px | 40px |
| Container Max Width | 1200px | 100% |
| Grid Gap | 30px | 20px |
| Paragraph Spacing | 1.5em | 1.5em |
| Line Height (Body) | 1.6 | 1.6 |
| Line Height (Headings) | 1.3 | 1.3 |
Usage Guidelines
Headlines
- Keep H1s to 1-2 lines max
- Use title case for main headlines
- Sentence case for subheadings
Body Copy
- Maximum line length: 65-75 characters
- Use short paragraphs (2-4 sentences)
- Break up text with headers, lists, bold
Emphasis
- Bold for key terms and emphasis
- Italic for book titles, quotes
Codefor technical terms, commands
Internal Tools
For internal tools and documentation (like this site), we use:
font-family: 'Inter', system-ui, -apple-system, sans-serif;Inter provides better readability for dense information and UI elements.