typography

# 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 ```css @font-face { font-family: 'MyFont'; src: url('font.woff2') format('woff2'); font-display: swap; /* Prevents FOIT */ } ``` ### Preload critical fonts ```html <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() ```css 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: ```css 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)