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.