Type is the whole site

Here is a test we run on every project before it goes into visual design. Take the homepage composition, remove every photograph, every illustration, every icon, every gradient and every piece of motion. What remains is text on a background.

If that document is still striking — if the hierarchy is obvious, if the eye moves in the intended order, if the whole thing has a voice — then the design is sound and everything you add afterwards is amplification. If what remains is a grey slab of undifferentiated Inter, then the imagery was not decoration. It was life support.

Most websites fail this test. It is why so many of them collapse into sameness the moment the photography budget runs out.

The tyranny of the neutral grotesque

There is a specific typeface situation on the commercial web. A small number of extremely well-made neutral sans-serifs — the usual suspects, plus whichever open-source geometric grotesque is fashionable this year — have become the default for approximately everything.

They are not bad typefaces. That is the problem. They are so competent, so unobjectionable and so screen-optimised that choosing one is functionally the same as not choosing. Neutrality is a legitimate design decision when it is a decision. When it is a default, it is an absence.

The cost is that your site now sounds exactly like every other site. Typeface is voice. Setting a manifesto in the same face as a project management tool's onboarding flow tells the reader, before they have read a word, that you have nothing unusual to say.

Pairing with contrast, not harmony

The standard advice is to pick two typefaces that harmonise. We think that produces polite, forgettable results. Better advice: pick two typefaces that are *doing different jobs* and let the difference be visible.

The pairings that consistently work carry a genuine structural contrast:

• 01A heavy grotesque against a light serif. The grotesque shouts at display size; the serif is calm and readable at length. The contrast between them dramatises the difference between assertion and explanation.
• 02A serif display against a monospace utility face. The serif carries the editorial argument; the mono handles labels, numbers, metadata, anything that behaves like data rather than prose. Monospace is enormously underused as a *labelling* voice on the web — it signals precision without shouting.
• 03One family across a wide optical size range. A well-cut variable font with an optical size axis genuinely changes shape between 12px and 200px. Using one family at both extremes is not boring; it is disciplined, and it costs one network request.

What does not work is two faces from the same category with slightly different personalities. Two humanist sans-serifs in one system reads as a mistake rather than a choice.

Scale is hierarchy

The most common typographic failure we see is timidity of scale. A page where the headline is 40px, the subhead is 28px, the body is 18px and the caption is 14px has four sizes that are all roughly the same size. The reader has to work out the hierarchy by reading, which defeats the purpose of having one.

Push the extremes apart until it feels slightly wrong, then step back one notch. On a wide screen, a display line at 12–18vw against 17px body copy creates an immediate, unambiguous reading order. The gap itself becomes an expressive device — it says *this matters and this is the detail*.

Fluid scaling with clamp() makes this safe. Set a minimum that works on a 320px screen, a viewport-relative middle that lets the type breathe on a large display, and a maximum so the headline does not become absurd on a 5K monitor. Three numbers, one line of CSS, and the composition holds from a phone to a cinema display.

Measure, leading, and the things nobody checks

The unglamorous parameters are the ones that decide whether long-form content is actually read.

Measure. Between 60 and 75 characters per line for body text. Wider than that and the eye loses its place on the return sweep; much narrower and the rhythm becomes choppy. On a 1400px-wide page this means your paragraphs occupy a fraction of the available width, and the remaining space is not wasted — it is what makes the text look intentional.

Leading. Body text wants roughly 1.5 to 1.65. Display type wants to go tight, often below 0.9, because at large sizes the space between lines reads as a gap rather than as breathing room. Applying a single line-height across a site is one of the clearest signals that nobody set the type; they configured it.

Tracking. Large display type almost always needs negative tracking — the default spacing is optimised for text sizes and looks loose when scaled up. Small uppercase labels almost always need positive tracking, or the letterforms jam together into a block.

Hyphenation and orphans. A headline that breaks badly on a phone can wreck an otherwise excellent composition. Take control of the breaks. On critical lines, place them manually per breakpoint. It is fussy, unglamorous work that separates typeset pages from configured ones.

Loading type without wrecking the page

Typography is the leading cause of layout shift on the web, and layout shift is directly scored in the technical column of every serious award rubric.

The approach that works: subset aggressively to the character range you actually need, prefer one variable file to six static weights, preload the single face used above the fold, and use font-display: swap with a fallback stack whose metrics have been adjusted to match. Modern CSS descriptors like size-adjust, ascent-override and descent-override let you tune a system fallback so closely to your web font that the swap becomes almost invisible.

Done properly, a distinctive typographic system costs less than the average hero image and delivers vastly more character.

Why this is the highest-leverage work available

Every other route to distinctiveness on the web is expensive. Original photography needs a shoot. Illustration needs an illustrator. 3D needs a pipeline, a budget and a performance compromise. Motion needs engineering time and a reduced-motion strategy.

Typography needs judgement and a font licence. It scales to any screen, weighs almost nothing, is fully accessible by default, and is the one design decision that touches literally every pixel of content on the site.

If you are going to be excellent at exactly one thing, be excellent at this one.