Studies
Small experiments I run on my own text before I recommend anything in a note.
Each one starts with a question, tries a few answers on real material, and keeps the one that held up. They are personal work, done between projects, and the figures beside them are drawn from the numbers I ended up with.
A modular scale for long reads
How few type sizes can a long-form article get by with, if it has to work from a 360px phone to a wide desktop without anything looking cramped or shouty?
Process
I took a long essay with four heading levels, block quotes, footnotes and captions, and set it in a book serif at an 18px base. Then I printed the same pages at ratios of 1.2, 1.25 and 1.333, and read each version on paper and on two phones.
At 1.333 the top heading was handsome on desktop and wrapped to four lines on a phone. At 1.2 the lower headings were too close to the body to scan. Neither ratio worked at both ends.
Outcome
The final scale uses 1.2 at 360px and 1.25 at 1440px, interpolated with clamp(). Six steps are named; footnotes and captions share the small step, and the fourth heading level became bold body text instead of a size of its own.
The surprise was that cutting a size made the hierarchy clearer. Readers stopped noticing levels and started noticing sections.
| Step | Specimen | 360px | 1440px |
|---|---|---|---|
| small | Measure | 15px | 14.4px |
| body | Measure | 18px | 18px |
| h3 | Measure | 21.6px | 22.5px |
| h2 | Measure | 25.9px | 28.1px |
| h1 | Measure | 31.1px | 35.2px |
| display | Measure | 37.3px | 43.9px |
A contrast-safe palette for a dark UI
Can a dark interface feel soft and low-glare while every piece of text clears 4.5:1 and every control boundary clears 3:1?
Process
I started from the surface rather than the text: a near-black with a little blue in it, and one raised tone for panels. Then I worked the text colours down from white until the strokes stopped glowing, checking each against both surfaces.
The accent took longest. The warm red I wanted was too dark to read on black, and the lighter versions turned pink. Lifting it toward coral at moderate saturation got it above 6:1 on both surfaces without vibrating.
Outcome
Text sits at 13.9:1, secondary text at 6.7:1, the accent at 7.3:1 and links at 8.2:1. Control borders clear 3:1. The disabled colour deliberately does not, and it is only ever used where WCAG exempts it.
Each ratio lives next to its token, so a later change cannot quietly drop a pairing below the line.
- TextBody and headings#e6e3dd · 13.9:1
- SecondaryMetadata, captions#a39f98 · 6.7:1
- AccentActions, highlights#e58f84 · 7.3:1
- LinkLinks in text#8fb3e0 · 8.2:1
- BorderControl outlines#6f6b66 · 3.4:1
- DisabledExempt, never for content#5d606b · 2.8:1
A spacing token set
How short can a spacing scale be before people start working around it, and what happens to a layout when every margin is rounded to the nearest step?
Process
I took a personal project that had grown for three years and counted every margin, padding and gap value in its stylesheets: forty-one distinct numbers, eleven of them used once.
I drafted a ten-step scale on a 4px base, mapped each existing value to its nearest step, and replaced them a component at a time, screenshotting before and after.
Outcome
Ten steps held. Only two values resisted rounding, and both were compensating for line-height space above headings. Fixing that removed the need for them.
Most components looked better after rounding, not just tidier. Things that had been a few pixels apart from their neighbours now lined up.
A reading-width study
How much does line length change how a long article feels to read, and where between 45 and 80 characters does a serif column stop feeling comfortable?
Process
I set one essay three times in the same face, size and colour, changing only the measure and adjusting leading to suit: 1.4 at 45 characters, 1.55 at 62, 1.7 at 80. I counted characters in real lines rather than trusting the ch unit.
Then I read all three over a week, on a laptop and on a tablet, and noted where I lost my place or skimmed.
Outcome
The narrow column read quickly but felt jumpy across long sentences. The wide one was fine for a page and tiring after five. Sixty-two characters with 1.55 leading was the one I forgot about while reading.
For this serif, 62 real characters came out at 58ch. That number now sits in the reading column on this site.
45 characters, leading 1.4
Lines that run too long make the eye work to find the start of the next one. Lines that run too short break phrases apart, and reading becomes a series of small jumps.
62 characters, leading 1.55
Lines that run too long make the eye work to find the start of the next one. Lines that run too short break phrases apart, and reading becomes a series of small jumps.
80 characters, leading 1.7
Lines that run too long make the eye work to find the start of the next one. Lines that run too short break phrases apart, and reading becomes a series of small jumps.