tomevault-io Typography
Principles for effective typography across print and screen.
Type Anatomy
- Baseline: Invisible line letters sit on
- X-height: Height of lowercase 'x', crucial for readability
- Cap height: Capital letter height
- Ascender/Descender: Parts above/below x-height
- Kerning: Adjusting space between specific pairs (AV, To)
- Tracking: Uniform letter-spacing across words
- Leading: Space between baselines (line-height)
Font Classification
Serif
| Type | Examples | Best For |
|---|---|---|
| Old Style | Garamond, Caslon | Books, long reading |
| Transitional | Baskerville, Times | Academic, newspapers |
| Modern | Bodoni, Didot | Luxury, headlines |
| Slab | Rockwell, Roboto Slab | Web, signage |
Sans-Serif
| Type | Examples | Best For |
|---|---|---|
| Grotesque | Helvetica, Arial | Corporate, UI |
| Neo-Grotesque | Inter, Roboto | Modern interfaces |
| Geometric | Futura, Montserrat | Headlines, logos |
| Humanist | Gill Sans, Open Sans | Reading, accessibility |
Print Typography
Measure (line length): 45-75 characters optimal
Leading: 1.4-1.6× for body, 1.1-1.3× for headlines
Ligatures: Use fi, fl, ff in body text
Small caps: For acronyms (NASA, WHO)
Oldstyle figures: Blend with lowercase
Screen Typography
Minimum sizes:
- Body: 16px (1rem)
- Captions: 12-14px
Line height: 1.5-1.7 for body (more than print)
Contrast: 4.5:1 minimum (WCAG)
Dark mode: Avoid pure white on black
Web Fonts
Formats
- WOFF2: Best choice, excellent compression
- WOFF: Legacy support
- Avoid: TTF (no compression), EOT, SVG
Loading
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* Prevents FOIT */
}
Preload critical fonts
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Responsive Typography
Units
- rem: Root-relative (use for font sizes)
- em: Parent-relative (use for component spacing)
- px: Absolute (borders, precise elements)
- vw/vh: Viewport-relative (fluid headlines)
Modular Scale
| Scale | Ratio | Use Case |
|---|---|---|
| Major Second | 1.125 | Simple websites |
| Minor Third | 1.200 | Blogs |
| Major Third | 1.250 | Marketing sites |
| Perfect Fourth | 1.333 | Editorial |
Fluid Type with clamp()
html {
font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}
Hierarchy
Levels: h1 → h2 → h3 → body → caption
Size contrast: 1.5× minimum between levels
Techniques: Size, weight, color, spacing
Accessibility
WCAG Requirements:
- Normal text: 4.5:1 contrast
- Large text (18px+ bold): 3:1
- Support 200% zoom
- Allow text spacing overrides
Best fonts for accessibility:
- Sans-serif for screens
- Adequate x-height
- Avoid decorative for body
Common Mistakes
❌ Too many fonts (limit to 2-3)
❌ Insufficient contrast
❌ Line lengths >75 or <45 chars
❌ Ignoring dark mode
❌ Using display fonts for body
❌ Justified text on web (creates rivers)
Quick Reference
Web body: 16px, 1.5-1.7 line-height, 60-75 chars
Print body: 10-12pt, 1.4-1.6× leading
Headlines: 1.5-3× body, use modular scale
Pairing: Serif + sans-serif, match x-heights
Tools
- Google Fonts: Free web fonts
- Type Scale: typescalemaker.com
- Fluid Type Calculator: fluidtype.com
- Fontpair: Font pairing ideas
- Color Contrast Checker: WebAIM
Variable Fonts
Single file with multiple weights/widths:
h1 {
font-variation-settings: 'wght' 700, 'wdth' 80;
}
Common axes: wght (weight), wdth (width), slnt (slant), opsz (optical size)
Resources
- Tufte's typography works
- NN/g typography guidelines
- MDN CSS Fonts Module
- Typewolf (typewolf.com)
Converted and distributed by TomeVault — claim your Tome and manage your conversions.