web-typography

What this skill does

# Web Typography Skill

A definitive guide for producing excellent typography on the web, distilled from Robert
Bringhurst's *The Elements of Typographic Style* as applied to the web by Richard Rutter,
and supplemented with modern CSS best practices.

**When to consult this skill:** Any time you write or review CSS/HTML that involves readable
text — body copy, articles, documentation, blogs, email, or prose-heavy UI.

---

## 1. Horizontal Rhythm — Word & Letter Spacing

### 1.1 Word Spacing

The ideal word space is approximately 0.25 em, but varies by typeface. Loosely fitted or
bold faces need wider word spaces; tighter faces need narrower ones.

```css
/* Increase word spacing for a loose face */
p.loose-face {
  word-spacing: 0.05em;
}

/* Tighten word spacing for a display heading */
h1 {
  word-spacing: -0.02em;
}
```

**Always specify `word-spacing` in `em`** so it scales proportionally with font size.

### 1.2 Single Word Space Between Sentences

Use exactly one space between sentences — never two. HTML collapses all whitespace to a
single space automatically, so this is handled by default. Never insert `  ` or
extra spacing between sentences.

### 1.3 Strings of Initials

Add little or no extra space within strings of initials (e.g., J.F.K., U.S.A.). The
periods provide sufficient separation. Use a normal word space after the final period.

### 1.4 Letterspace All-Caps and Small Caps

**Strings of capital letters and small caps must always be letterspaced.** Without it,
capitals crowd together and become harder to read.

```css
/* Abbreviations and acronyms in small caps */
abbr,
.small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em; /* 5–10% of type size */
}

/* Any text in all-caps */
.all-caps,
.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
```

The recommended range is **5–10% of type size** (0.05em–0.1em). Always use `em` units.

### 1.5 Don't Letterspace Lowercase

Lowercase letters are designed to fit together without tracking adjustments. Never
letterspace body text. The only exceptions are very bold condensed faces used at large
display sizes, where a small amount (0.01em–0.02em) may improve legibility.

### 1.6 Kerning

Enable font kerning and let the typeface designer's kerning tables do their work. Don't
override kerning without a specific reason.

```css
body {
  font-kerning: auto;
  /* Or explicitly: */
  font-feature-settings: "kern" 1;
}
```

Kern consistently and modestly — or not at all.

### 1.7 Don't Alter Letter Widths or Shapes

Never use `transform: scaleX()` or `font-stretch` to artificially compress or expand
letterforms. If you need a condensed or extended face, choose a typeface that was designed
that way.

### 1.8 Don't Stretch the Space Until It Breaks

Avoid justified text on the web unless you also enable hyphenation. Without hyphenation,
justified text produces "rivers" of white space — ugly, uneven gaps between words.

---

## 2. Measure (Line Length)

This is one of the most impactful typographic decisions you will make.

### The Rule

| Context              | Characters per line | CSS approximation |
|----------------------|--------------------|-------------------|
| Single column prose  | **45–75** (ideal: **66**) | `max-width: 33em` or `max-width: 66ch` |
| Multi-column text    | **40–50**          | `max-width: 25em` |
| Short companion text | **30–40**          | `max-width: 20em` |

### Implementation

```css
/* Best: use ch unit (width of the "0" glyph) */
article,
.prose {
  max-width: 66ch;
}

/* Good alternative: em-based (1 char ≈ 0.5em) */
.content {
  max-width: 33em;
}
```

**Why `ch` or `em` over `px`?** Elastic widths ensure the measure remains stable when
readers change their text size. A `px`-based width changes the character count when text
is resized; `em` and `ch` do not.

**Never let body text run to the full viewport width.** Lines exceeding 80 characters are
uncomfortable to read because the eye struggles to track back to the next line start.

### Responsive Considerations

On small screens, the screen width naturally constrains measure. Don't reduce font size
just to preserve an "ideal" measure — prioritise readable font size (minimum 16px) and
accept a shorter measure on mobile (even down to 25–35 characters is fine for handheld
devices). Adjust line-height to compensate (see §3).

---

## 3. Vertical Rhythm — Leading (Line Height)

### 3.1 Choose a Basic Leading

```css
/* Good defaults for body text */
body {
  line-height: 1.4;  /* Minimum for comfortable reading */
}

/* Common comfortable range */
.prose {
  line-height: 1.5;  /* This page-like feel works well for most text */
}
```

**General guidance:**

| Situation                      | line-height   |
|-------------------------------|---------------|
| Body text, long-form reading   | **1.4–1.6**  |
| Short text, UI labels          | **1.2–1.4**  |
| Large headings                 | **1.0–1.2**  |
| Small / caption text           | **1.5–1.8**  |

**Key relationships:**
- Longer lines (wider measure) need **more** line-height.
- Shorter lines need **less** line-height.
- Larger text needs **less** line-height.
- Smaller text needs **more** line-height.
- Light or reversed text (white on black) needs more line-height.

**Always use a unitless multiplier** (e.g., `1.5`, not `1.5em` or `24px`) so
line-height scales correctly with font-size changes.

### 3.2 Add and Delete Vertical Space in Measured Intervals

Maintain vertical rhythm by keeping all vertical spacing as **multiples of the base
line-height.** Headings, blockquotes, images, and other intrusions into the text should
return the text to its baseline rhythm.

```css
:root {
  --base-size: 1rem;      /* 16px default */
  --base-lh: 1.5;         /* line-height multiplier */
  --rhythm: calc(var(--base-size) * var(--base-lh)); /* 24px */
}

p {
  font-size: var(--base-size);
  line-height: var(--base-lh);
  margin-top: 0;
  margin-bottom: var(--rhythm);
}

h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  /* Margins should combine to a multiple of the base rhythm */
  margin-top: calc(var(--rhythm) * 2);    /* 2 lines above */
  margin-bottom: var(--rhythm);           /* 1 line below */
}

blockquote {
  margin-top: var(--rhythm);
  margin-bottom: var(--rhythm);
  padding-left: 1.5em;
}
```

When text size changes (headings, sidenotes), adjust line-height so each element
occupies a whole multiple of the base rhythm unit.

---

## 4. Blocks & Paragraphs

### 4.1 Opening Paragraphs: Flush Left

The first paragraph of any section — after a heading, after the start of the document —
should be set flush left with no indent. An indent signals continuation; there is nothing
to continue from at the very beginning.

### 4.2 Subsequent Paragraphs: Indent or Space — Not Both

Choose ONE method to separate paragraphs:

**Option A — Indentation (traditional/print feel):**
```css
p {
  margin: 0;
}

p + p {
  text-indent: 1.5em; /* At least 1em; often matches line-height */
}

/* Never indent after headings */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  text-indent: 0;
}
```

**Option B — Block paragraphs with vertical space (common web convention):**
```css
p {
  margin-top: 0;
  margin-bottom: 1.5em; /* Equal to line-height for rhythm */
}
```

Using both an indent AND vertical space is redundant and creates awkward gaps.

### 4.3 Block Quotations

Add extra vertical space (equal to the line-height) before and after block quotations.
Indent from the left, and optionally from the right. Do NOT reduce the font size of block
quotes unless they are genuinely secondary (like footnotes).

```css
blockquote {
  margin: 1.5em 0;      /* Vertical space matches rhythm */
  padding-left: 1.5em;  /* Indent from left */
  padding-right: 1.5em;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}
```

### 4.4 Verse and Poetry

Centre verse quotations on the longest line, or indent them. Set flush left with
ragged right. Never