Composition - Typography.

The anatomy of letterforms

All typography rests on four invisible lines. The baseline is the line the letters sit on. The x-height, the height of lowercase letters without ascenders or descenders, is probably the most decisive parameter in how a typeface is perceived: large, it brings sturdiness and legibility at small sizes; small, elegance and refinement. The cap height measures the capitals; the ascender and descender lines bound the extenders.

Inside the glyph, the structural elements are named: the stem (load-bearing vertical), the bowl (enclosed curve), the counter (inner white), the aperture (the opening of the counter-form - wide, it improves legibility at small sizes), the cross-bar, the arm, the serif and the terminal.

Classifying typefaces

The working classification remains Vox-ATypI: nine classes defined by Maximilien Vox in 1954 (Humanist, Garalde, Transitional, Didone, Slab, Lineal or sans-serif, Incised, Script, Graphic), adopted by ATypI in 1962, which added Blackletter and Non-Latin, then Gaelic in 2010; in France, standard NF Q60-007 (1977). Outside the classification, Display faces are those designed for large sizes, which trade legibility for expression. Note: ATypI officially de-adopted the system on 27 April 2021 (too Latin-centric), and no replacement has yet reached consensus - so it remains the taught reference for Latin scripts.

Each class carries a recognisable register: legal documents → Old Style or Transitional (Garamond, Caslon, Baskerville); scientific → Transitional or Humanist Sans; fashion and luxury → Didone (Bodoni, Didot); modern corporate → neo-grotesque (Helvetica, Univers) or Humanist Sans (Frutiger); tech / digital → Geometric Sans (Futura, Avenir) or interface humanist sans (Inter, Roboto); industrial → Slab (Rockwell, Clarendon); festive / personal → Script or Display.

Modular scales - the music of sizes

Bringhurst (The Elements of Typographic Style, 1992): “A modular scale, like a musical scale, is a prearranged set of harmonious proportions.” A modular scale is a sequence of sizes built on a constant ratio - the ratio sets the harmonic character: low (1.125-1.2), subtle hierarchy; high (1.5-1.618), marked jumps.

The traditional ratios are borrowed from music: major second 9:8 (1.125), minor third 6:5 (1.2), major third 5:4 (1.25), fourth 4:3 (1.333), fifth 3:2 (1.5), golden ratio (1.618), octave 2:1. Spencer Mortensen showed that the typographers' classic scale - 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72, still offered by default, give or take a few sizes, in many applications - corresponds, up to a few roundings, to a tempered pentatonic scale: fundamental 12 pt, ratio-2 octave in five steps, i.e. a step of ⁵√2 ≈ 1.149.

Choosing the ratio by document: long prose 1.125-1.2; editorial article 1.25-1.333; large-format magazine or poster 1.5-1.618; technical documentation 1.2-1.333; 5+-level interface 1.125-1.2; simple interface φ or octave; slides 1.333-1.5; minimal poster 2.0+. Building the scale: base (16 px web, 10-12 pt print), ratio, steps up (headings) and down (captions) - every size stays in harmonic relation with every other.

Measures - points, ems, leading, tracking

The point has several historical definitions - Didot 0.376 mm (around 1783), pica 0.3514 mm, PostScript exactly 1/72 inch (0.3528 mm), now the world standard. The pica is 12 points; the cicero, 12 Didot points. The em is relative: it equals the current type size - the unit for measures that adapt to the text. French typography puts a non-breaking space before double punctuation: a thin one before ; ! ?, a regular one before the colon in the most common usage.

Leading is measured baseline to baseline, written “12/14” (12 pt type, 14 pt leading). Base rule: 1.2 to 1.5 × the size - 1.2 dense, 1.4 standard, 1.5 generous (WCAG criterion 1.4.8, level AAA). Modulations: the larger the x-height or the line, the larger the leading; large headings drop to 1.0-1.1. Tracking (uniform spacing) stays at 0 on body text, slightly positive on capitals (+50 to +100 thousandths of an em) and very small sizes, slightly negative on large headlines. Kerning adjusts specific pairs (AV, To) - automatic in good fonts, manual only for titles and logos.

Choose one unit system and stick to it; 1.4-1.5 leading on body text; tracking 0 on body, adjusted on caps and display; automatic kerning on; French typographic spaces respected.

Typographic hierarchy

The standard levels: H1 (one per document), H2, H3, body, lead, caption, small. Hierarchy is not made by size alone - eight tools: size (on the modular scale), weight (a modest Bold can dominate), case (capitals for short titles only), style (italic for emphasis, never in long blocks), colour (sparingly), spacing (a large top margin = strong break), tracking, family.

Four golden rules: three levels suffice in most cases (H1, H2, body); the difference between levels must be immediately visible; consistency rules (all H2s identical); white space is a hierarchy tool as much as size.

Setting the block - alignment, hyphenation, measure

Justified: the standard of books and newspapers; needs more than 50 characters per line. Ranged left (ragged right): the standard of the web and technical documents, more readable in narrow columns. Ranged right and centred: occasional uses (captions, short titles), never for paragraphs. Justification invites rivers (vertical white channels) and excessive spaces - the remedy is hyphenation with strict rules: ≥ 2 characters before the hyphen, ≥ 3 after, never more than 2 consecutive hyphenated lines, never the last line of a paragraph.

Widows (a paragraph's last line alone at the top of a column) and orphans (the first line alone at the bottom) are to be avoided - minimum 2 lines together. The measure (line length) is the most decisive comfort parameter: the academically recognised sweet spot is 66 characters per line (Bringhurst, who gives a useful range of 45 to 75); Baymard recommends 50 to 75 characters, and WCAG criterion 1.4.8 sets a maximum of 80. In CSS: max-width: 65ch.

Justified by default for books and formal documents; ranged left for the web and technical material; hyphenation always on when justified; target 60-70 characters per line; widow/orphan control configured.

Pairing - combining two typefaces

Central principle: contrast without conflict. Two fonts that are too similar (two geometric sans of the same era) yield a perceptible but unintentional difference - it reads as amateur; two that are too different fight for attention. Three proven strategies: Serif + Sans (the most versatile - Playfair + Source Sans, Lora + Inter, Garamond + Frutiger); the superfamily (the safest - IBM Plex, Source, Noto, PT, Roboto: identical metrics by construction); Display + Text (the most expressive - Abril Fatface + Lato, Bebas + Source Sans).

Technical rules: compare x-heights (very different = imbalance); compare proportions (condensed against extended coexists badly); check for a shared register; three families maximum (body, display, possibly mono); test in real context, not on a specimen sheet.

Two typefaces maximum by default (display + body); a superfamily as the safe default; metric checks (x-height ratio, proportions); typographic register consistent with the document's chromatic register.

Legibility and reading comfort

Legibility combines parameters none of which suffices alone: size (16 px web, 10-12 pt print; below 14 px / 8 pt legibility drops), measure 60-70 CPL, leading 1.4-1.5, contrast WCAG 4.5:1 minimum for body (7:1 ideal, 3:1 for large headings), colour (dark text on light ground for long reading; dark mode needs higher contrast), a typeface designed for body (sufficient aperture).

The serif vs sans-serif controversy is settled: contemporary research (2010-2025) finds no significant legibility difference with a well-drawn face at an adequate size. The claim that “serifs guide the eye” is not empirically supported. The choice is a matter of register and context - print and long reading lean serif, screen and short text lean sans, dyslexic readers often prefer a simple sans. A robust rule links measure and leading: the longer the line, the larger the leading (30-50 CPL → 1.3-1.4; 50-65 → 1.4-1.5; 65-80 → 1.5-1.6).

Body 16 px / 11 pt; leading 1.5 adjusted to the measure; contrast ≥ 4.5:1, aim for 7:1; 60-70 CPL; never italic, all-caps or display body over long blocks; text scalable to 200%; no text as images (WCAG).

Synthesis - ten rules

1. Choose a modular scale from the start. 2. Two typefaces maximum (or one superfamily). 3. Body 16 px / 11 pt, leading 1.5. 4. 60-70 characters per line. 5. Contrast WCAG 4.5:1 minimum. 6. Hyphenation on when justified. 7. Widow/orphan control. 8. Three hierarchy levels unless necessary. 9. Consistency across all H2s. 10. Test in real context.

Decision sequence: document type → modular ratio; register → typeface class; medium → base size and measure; hierarchical depth → number of steps; pairing → strategy; final checks (contrast, accessibility, consistency). Typography directly articulates with the grid (columns bound the measure) and with perception (Gestalt, contrast - pillar 3).