Typography Is Your Brand's Voice
If color is emotion, typography is tone. A geometric sans-serif says "modern and precise." A humanist serif says "established and thoughtful." A monospace font says "technical and transparent."
Most founders pick fonts based on "what looks nice." That works for a personal blog. For a startup, you need a system.
The Three-Font Framework
Every production typography system needs three typefaces:
1. Heading font - Display-weight, high impact. Used for hero text, section headers, and marketing pages.
2. Body font - Readable at small sizes, generous x-height. Used for paragraphs, product UI, and documentation.
3. Mono font - Fixed-width for code, API keys, and technical content.
The classic pairing: Geometric sans (headings) + Humanist sans (body) + Monospace (code)
Examples that work:
- -Inter + Source Sans 3 + JetBrains Mono (developer tools)
- -Manrope + Inter + Fira Code (modern SaaS)
- -Playfair Display + Source Serif + IBM Plex Mono (editorial/luxury)
Why Scale Matters More Than Font Choice
The single most impactful typography decision isn't which font - it's the type scale. A consistent scale creates visual rhythm even with average fonts:
- -xs: 12px - Captions, labels
- -sm: 14px - Secondary text
- -base: 16px - Body text
- -lg: 18px - Lead paragraphs
- -xl: 20px - Section subheadings
- -2xl: 24px - Card titles
- -3xl: 30px - Section headings
- -4xl: 36px - Page headings
- -5xl: 48px - Hero headings
Each step is roughly 1.25x the previous (the "Major Third" ratio). Glyph's type system generates this automatically.
Font Weight Strategy
Don't use every weight. Pick three:
- -Regular (400) - Body text
- -Semibold (600) - UI labels, navigation, buttons
- -Bold (700) - Headings, emphasis
That's it. Three weights, clear hierarchy, zero confusion.
Line Height & Letter Spacing
Two properties that separate amateur typography from pro:
- -Line height: 1.5-1.7 for body text, 1.1-1.2 for headings
- -Letter spacing: Slight negative (-0.01em to -0.02em) for headings, normal for body
These micro-adjustments make text feel polished without anyone noticing why.
Loading Performance
Custom fonts block rendering. Here's the modern approach:
1. Use next/font (or font-display: swap) to prevent layout shift
2. Subset to only the characters you need
3. Prefer variable fonts - one file, every weight
4. Limit to 2-3 families maximum
A fast-loading typography system that looks good beats a beautiful system that shows a flash of unstyled text.
Start With a Generator
You can spend hours on Google Fonts trying combinations. Or you can generate a complete typography system in seconds with Glyph - heading, body, mono, with proper scales, weights, and spacing already configured for your brand's vibe.