Offered by Dead Brands
Typography is the voice of the written word: the same sentence can sound authoritative, friendly, or chaotic depending on the typeface, spacing, and structure carrying it.
Use it over MCP: connect to https://mcp.deadbrands.co/hub/mcp and call skills_get with slug typography-fundamentals.
# Typography Fundamentals
Credit: SteTy — published free in the Skills Hub
Typography is the voice of the written word: the same sentence can sound authoritative, friendly, or chaotic depending on the typeface, spacing, and structure carrying it. This skill covers the shared professional vocabulary — classification, anatomy, spacing — plus the measured numbers behind readable text on screen and paper.
## Overview
Two words get confused constantly: a **typeface** is the design (Helvetica, Garamond); a **font** is one specific instance of it (Helvetica Bold at 12pt — historically, one box of metal sorts). Typography also splits into **legibility** (can individual letters be distinguished — a property of the typeface) and **readability** (can long text be read comfortably — a property of how you set it). Master three crafts: choosing faces by classification, spacing type correctly, and building hierarchy. Robert Bringhurst's *The Elements of Typographic Style* is the field's standard reference.
## Core Principles
- **Classification predicts behavior.** Serif faces descend from Roman stone carving and calligraphy; sans-serifs from 19th-century display lettering. Know a face's family and you know where it works.
- *Old Style serif* (Garamond, Caslon): low stroke contrast, angled stress, bracketed serifs — warm, bookish.
- *Transitional* (Baskerville, Times New Roman): sharper serifs, more vertical stress, medium contrast.
- *Modern/Didone* (Bodoni, Didot): hairline serifs, extreme thick–thin contrast — elegant at large sizes, fragile in small body text.
- *Slab serif* (Rockwell, Clarendon): thick block serifs, low contrast — sturdy, poster-and-poster-like authority.
- *Grotesque / neo-grotesque sans* (Franklin Gothic, Helvetica, Arial): workhorse neutrality.
- *Geometric sans* (Futura, Poppins): built from circles and straight lines — modern, but tight apertures can hurt small-size legibility.
- *Humanist sans* (Gill Sans, Frutiger, Verdana): calligraphic warmth, varied stroke widths, open apertures — designed for reading and signage.
- *Monospace* (Courier, JetBrains Mono): every character the same width — code, data tables, typewriter character.
- *Script and display*: headlines and flavor only, never body text.
- **Anatomy names the parts.** Baseline (where letters sit), **x-height** (height of lowercase *x* — the biggest factor in perceived size), **cap height** (flat capitals, measured on *E* or *H*), **ascender** (stroke rising above x-height: b, d, h), **descender** (below baseline: g, p, y), **stem** (main vertical stroke), **bowl** (curved enclosing stroke), **counter** (enclosed or partly enclosed space), **terminal** (stroke ending), **aperture** (how open the counter is — open apertures read better small).
- **Spacing is three different controls.** **Kerning** adjusts one specific letter pair (built into the font as kern tables — pairs like "AV," "To," "Wa" need tightening). **Tracking** (letter-spacing) shifts all letters in a range uniformly. **Leading** (line-height) is the distance between baselines, named for the strips of lead printers inserted between lines of metal type.
- **Hierarchy is contrast with restraint.** Readers should see at most 3–4 levels: size, weight, case, color, spacing, and position are the levers — use two or three at a time, not all six.
## Techniques
- **Body text settings that research supports:** line length of **45–75 characters** (Bringhurst's ideal ≈ 66); leading of **120–145%** of font size for print and books, **140–170%** on screens; font size 16px is the accepted web body minimum baseline. Lines that are too long cause "doubling" (the eye re-reads the same line); too short shatters phrasing.
- **Pairing typefaces:** pair by *contrast with kinship* — a serif text face with a sans of similar x-height and proportions (e.g., Source Serif + Source Sans, designed as siblings), or one family in many weights ("superfamily" strategy). Limit: two families per project, three at most. Never pair two similar-but-different serifs — near-matches look like mistakes.
- **Tracking rules:** tighten display type as it grows (large headlines often want −1% to −3% tracking); add tracking to small caps and all-caps labels (+5% to +12%) because capitals kern poorly at default spacing; never add tracking to lowercase body text — it dissolves word shapes.
- **Alignment:** left-aligned (ragged right) for Latin-script body text; justification requires hyphenation and a wide measure or it opens "rivers" of white space running down the page. Centered text is for invitations and titles, not paragraphs.
- **Web vs print:** print is fixed — you control final size, resolution is 300 dpi, CMYK. Web is fluid — specify relative units (rem), test at multiple viewport widths, mind font loading (a webfont swap mid-read is a readability bug), and remember screens render stems thinner: faces with sturdy strokes and large x-heights (Verdana, Atkinson Hyperlegible — designed for low-vision readers) survive small sizes best.
- **Numbers:** use tabular (lining) figures in tables and dashboards so digits align in columns; old-style figures blend into prose. This one setting is the difference between a professional table and an amateur one.
## Worked Examples
- **Fixing a wall of text:** a 1,000-word page set at 14px, full-width (150+ characters/line), 100% leading. Apply fundamentals: cap measure at ~68 characters, raise to 16px, leading 150%, break into headed sections. Reading speed and completion rise without changing a single word.
- **A two-lever hierarchy:** H1 32px bold, H2 22px bold, body 16px regular, captions 13px gray, all one humanist sans. Size + weight only — clean, and impossible to misread.
## Common Pitfalls
- **Too many typefaces** — three-plus families in one document reads as indecision, not richness.
- **Fake styles** — software-generated faux bold/italic distorts letterforms; load the real weights.
- **All-caps body text** — removes word-shape cues and measurably slows reading; caps are for short labels.
- **Ignoring x-height when substituting fonts** — two faces at "16px" can differ hugely in perceived size if x-heights differ; match x-height, not point size, when fallback fonts matter.
## Practice Drills
1. Set the same paragraph in an Old Style serif, a Didone, a geometric sans, and a humanist sans at 12pt. Read each aloud-timed for 60 seconds; note which tires your eyes and why (contrast, aperture, x-height).
2. Take a headline and hand-adjust only the kern pairs (AV, To, Yo, LT) until spacing looks even; then compare against the font's built-in kerning.
3. Rebuild a messy document using exactly one family and only size + weight for hierarchy. Count your levels — stop at four.
## When to Use and Limits
- **Use it when:** a task calls for typography fundamentals, as laid out in the Techniques and Worked Examples above.
- **Watch first for:** Too many typefaces; Fake styles; All-caps body text (see Common Pitfalls).
- **Limits:** this is a general reference drawn from public sources; it is a starting point for practice, not a full course, and attributions and dates should be checked against the cited sources before quoting them.
## Quick Reference
| Setting | Target |
|---|---|
| Line length | 45–75 characters (~66 ideal) |
| Leading — print | 120–145% of size |
| Leading — screen | 140–170% of size |
| Web body size | ≥ 16px baseline |
| Headline tracking | −1% to −3% |
| All-caps label tracking | +5% to +12% |
| Families per project | 2 (3 max) |
| Text contrast (WCAG AA) | ≥ 4.5:1 body, 3:1 large |