Typography

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
• Code for 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.