Kerning Room

Notes on type and layout

Kerning Room is the notebook of an independent designer and front-end developer: type scales, font pairing, spacing, grids, contrast and design tokens, written up with the CSS that makes them work.

Read the latest noteTry the type scale

What this notebook is for

Most web typography advice stops at “use a nice font”. The decisions that make a page easy to read are smaller and more numerous than that.

How big the body text is on a phone. How many heading sizes a long article really needs. How long a line can run before readers lose their place. Whether the grey you chose for captions is still readable outdoors.

Each note takes one of those decisions, explains how I make it, and shows the CSS. The studies are small experiments where I test the advice on real text before trusting it.

Latest notes

  1. Building a type scale you'll actually use

    4 min read

    A modular scale is a good start and a bad finish. How I pick a base and a ratio, how many steps to keep, and how to make the result fluid without losing control of it.

  2. Line length, leading and the reading column

    4 min read

    Measure, line height and size depend on each other. How I set a reading column in CSS, why 65ch is not 65 characters, and what changes on a phone.

  3. Contrast that passes and still looks good

    4 min read

    WCAG contrast ratios are a floor, not a style. What the numbers measure, where designs usually fail them, and how to build a palette that clears them without looking harsh.

All 4 notes, newest first

A printed broadsheet headed “A Specimen”, showing roman and italic type in descending sizes, from large capitals down to small text.Engraving of a compositor’s type case on a slanted wooden frame, its many small compartments filled with letters.A dense catalogue page of printers’ brass ornaments: borders, corners, rules and small decorative blocks in rows.
William Caslon’s specimen sheet, 1734: one family, every size, on a single page.

Set your own type scale

Pick a body size and a ratio. Every step from h1 down to small text is recalculated, with the pixel and rem values to copy.

Base 18px, ratio 1.25 (major third)
h1Reading column54.9px3.433rem
h2Leading and measure43.9px2.747rem
h3A ratio for long reads35.2px2.197rem
h4Pairing a serif with a sans28.1px1.758rem
h5Spacing tokens, fewer values22.5px1.406rem
bodyBody text sets the pace for everything else on the page.18px1.125rem
smallCaptions, metadata and footnotes share the small step.14.4px0.9rem
:root {
  --step-5: 3.433rem; /* 54.9px */
  --step-4: 2.747rem; /* 43.9px */
  --step-3: 2.197rem; /* 35.2px */
  --step-2: 1.758rem; /* 28.1px */
  --step-1: 1.406rem; /* 22.5px */
  --step-0: 1.125rem; /* 18px */
  --step--1: 0.9rem; /* 14.4px */
}

Studies

Small experiments on my own text, written up with what I tried, what failed and what I kept.

Read the studies

Who writes this

One independent designer and front-end developer. I set type for screens, build the CSS for it, and write down what holds up. No newsletter, no comments, no tracking. If a note helped, or if it is wrong, email is the way to say so.

studio@kerningroom.siteMore about the notebook

A line of large wooden letters locked in a composing stick, resting on a drawer of more wooden type.A specimen book page of pointing-hand symbols in several sizes, each hand holding a small block of sample text.A printed broadsheet headed “A Specimen”, showing roman and italic type in descending sizes, from large capitals down to small text.Engraving of a compositor’s type case on a slanted wooden frame, its many small compartments filled with letters.Two printed diagrams of type cases, labelled upper case and lower case, showing where each letter is kept.
Wood type set in a stick. Spacing here meant cutting and placing real pieces of metal and wood.