Structured approaches to typography that scale across applications.
A type system defines the rules, scales, and relationships that govern typography across a brand's touchpoints. Rather than making decisions case by case, systems provide consistent foundations that enable speed and coherence.
Why Systems Matter
Without a system, typography accumulates inconsistency. Each design makes independent decisions. Sizes drift. Spacing varies. The brand fragments across applications.
Systems solve this:
- Consistency — Same treatment for same content types
- Efficiency — Decisions made once, applied everywhere
- Scalability — New designers and applications follow established patterns
- Cohesion — All touchpoints feel unified
Components of a Type System
Type Scale
A defined set of sizes that relate mathematically.
Common approaches:
Modular scale — Sizes based on a ratio (1.25, 1.333, 1.5, etc.)
Base: 16px
Ratio: 1.25
16 / 1.25 = 12.8 → 13px
16 × 1.25 = 20px
20 × 1.25 = 25px
25 × 1.25 = 31px
Linear scale — Fixed increments between sizes
12, 14, 16, 18, 20, 24, 32, 48
Custom scale — Sizes chosen for specific purposes, refined through testing
Font Families
Which typefaces serve which purposes:
- Primary — The main brand typeface, used most frequently
- Secondary — Supporting typeface for contrast and variety
- Accent — Optional; special uses like logos or campaigns
- Fallback — System fonts when brand fonts unavailable
Weight System
Which weights to use and when:
| Weight | Name | Use |
|---|---|---|
| 300 | Light | Large display text |
| 400 | Regular | Body copy |
| 500 | Medium | Emphasis, UI labels |
| 600 | Semibold | Subheadings |
| 700 | Bold | Headlines |
Not all weights need use. A system might only employ Regular, Medium, and Bold.
Line Height
Vertical spacing between lines, typically expressed as ratio or fixed values.
Guidelines:
- Body text: 1.4–1.6 times font size
- Headlines: 1.1–1.3 times font size
- Tight for large text, looser for small text
Letter Spacing (Tracking)
Space between characters.
Guidelines:
- Body text: Default (0)
- Headlines: Often tighter (-0.5 to -2%)
- All caps: Looser (+2-5%)
- Small text: Slightly looser
Paragraph Spacing
Space between paragraphs and after headings.
Guidelines:
- Paragraph spacing: 0.5–1.0 times body line height
- After headings: Less than before headings
- Consistent increments based on baseline grid
Building a Type System
1. Audit Existing Usage
Identify all current type treatments. Note sizes, weights, and applications. Find patterns and inconsistencies.
2. Define Core Decisions
Establish foundations:
- Primary and secondary typefaces
- Base body size
- Scale ratio or progression
- Weight palette
3. Create Semantic Styles
Name styles by function, not appearance:
Do: Heading-1, Body, Caption, Label Don't: Big-Bold, Normal, Small-Gray
Semantic naming survives design changes. If "Heading-1" changes from 32px to 28px, the name still works.
4. Document Specifications
Capture every detail:
- Font family
- Size
- Weight
- Line height
- Letter spacing
- Color
- Use cases and examples
5. Implement in Code/Tools
Translate specifications into:
- Design tokens (CSS variables, design system)
- Figma/Sketch text styles
- Component libraries
- Documentation
Type System Documentation
Required Elements
- Type scale table
- Font family specifications
- Style definitions with all properties
- Use case examples
- Correct and incorrect usage
Helpful Additions
- Typeface specimens
- Pairing guidelines
- Responsive behavior rules
- Fallback specifications
- Accessibility notes
Responsive Typography
Type systems must account for different screen sizes.
Approaches:
Fluid typography — Size scales smoothly between breakpoints using CSS clamp() or similar
Stepped scales — Different size scales at major breakpoints
Proportion-based — Maintain ratios while adjusting absolute sizes
Key considerations:
- Headlines scale more than body text
- Line lengths should stay readable (45-75 characters)
- Touch targets require minimum sizes on mobile