The font pairings, and why type matters more than color.
Type does more work than color. Two sites with the same layout and different type read as different products; two sites with the same type and different layouts read as the same template. If you change one thing, change this.
Each pairing below is already balanced — a display face for headings, a body face chosen not to fight it, and a monospace for figures and code. Every stack falls back to a real system font, so text stays readable while the webfont loads.
Technical and slightly quirky. Wide apertures keep it friendly rather than corporate.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
High-contrast serif headlines over plain sans body. Reads as a magazine, not an app.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Soft, human and a little old-fashioned. Good for food, craft and anything hand-made.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Engineered and trustworthy. Signals competence without shouting about it.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Loud, flat and confident. Headlines behave like printed posters.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Bookish and unhurried. Suits writing, research and long reads.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Clean circular forms. Modern without the flat-blue software look.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Monospace for everything. Only for developer tools, where it reads as native.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
Deliberately irregular headlines against a neutral body. Distinct on sight.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1
No webfont request, so nothing to wait for. The fastest option, and the most neutral.
The quick brown fox
Body text at fifteen pixels, which is roughly what a visitor reads a paragraph in. Judge a pairing on this line, not on the headline above it.
£1,248.00 · 09:30–17:00 · v2.4.1