Editorial typography on the web is mostly a confidence problem.

The reason most agency blogs look polished but read poorly is not a typography problem. It is a confidence problem. Designers under brief pressure hedge — and hedging on typography always produces the same blurry-but-busy result.

This essay is the argument for committing harder.

The hedging instinct

When a designer is uncertain about how a blog post will be received, the typographic instinct is to be safe. Pick a comfortable sans-serif. Set the body at 16px. Use medium line-length. Add one quirky element somewhere to feel "designed." Move on.

The result is the typography of every tech-adjacent blog from the past decade. Inter, 16px, 580px line width, one weirdly-tracked all-caps eyebrow per section. The author of the post might have something genuinely sharp to say, but the typography is doing the opposite of that — it's saying "we're neutral, we're safe, please don't judge us by how this looks."

The fix isn't more flourish. It's commitment.

The three rules I keep coming back to

After years of designing editorial pages, three principles consistently produce results.

1. Line length: longer than designers want, shorter than developers want

The standard advice is 50–75 characters per line. In practice, on a desktop screen at body size, 65–75 reads more naturally for longform than the conservative 50.

The hedge most designers make is to set 540–580px reading width. That's safe at every screen size but slightly too short for the body type. A line that breaks every three or four words mid-thought feels twitchy to read. Push the column to 640–720px and the reading rhythm becomes paragraph-paced, which is what longform is supposed to feel like.

2. Leading: looser than feels right

The web's default line-height: 1.5 is the wrong number for editorial body type. Set body lines at 1.6–1.75 and the page exhales. Headings can sit tight (1.1–1.2) by contrast.

The reason designers hedge here is that loose leading looks "loose" in mockups at zoomed-out scale. At reading scale on a real screen, it's correct. Trust the reading test, not the zoom test.

3. Contrast: serif italic against geometric sans

Two typefaces, one rule: one is the workhorse, one is the accent. We use Bricolage Grotesque (geometric sans, variable weight) for everything structural — headings, body, captions, UI labels. Instrument Serif italic is the accent — used only for emphasis, deks, pull quotes, and the occasional word inside a heading.

The trap is using the serif as a second body face. That dilutes the contrast. The italic-serif accent works precisely because it's rare and emotionally distinct from the surrounding sans.

Trust the reading test, not the zoom test. — Workshop note

The italic-serif move

The single design choice we most consistently use on editorial pages is one italic-serif word inside a sans-serif heading.

Field notes.

Get our thinking, before it's a project.

Related reading.

The pairing does three things at once. It signals editorial intent (this is writing, not marketing). It creates rhythm within a heading that would otherwise be one weight at one tracking. And it's repeatable — once a system uses this move, it can be reused on every page as an identifier.

The mistake designers make is using too many italic-serif words. The accent works because it's surgical. One word per heading, not two. A few headings per page that use it, not every heading.

Pairing rules: when to break them

The conventional wisdom on type pairing is "one serif + one sans." That's a heuristic, not a law. A more useful frame is emotional distinct + structurally compatible.

• Bricolage Grotesque + Instrument Serif italic — our default. Geometric sans with a humanist italic serif. Emotionally distinct, structurally aligned at the x-height.
• Inter + IBM Plex Mono — works for technical writing. The mono accent feels like a code annotation, which is the right voice for engineering posts.
• Söhne + Söhne Mono — works if you want a unified voice with one acknowledgment of code/data.

What doesn't work, no matter how much it appears in templates: two display sans-serifs with different vibes. Inter for body + Anton for headings. The structural mismatch is visible and the page feels like a Frankenstein.

The third typeface temptation

Around the third week of working on a brand, designers feel a pull to add a third typeface. Usually it's for "tags" or "captions" or "metadata" — a small uppercase tracked sans. It feels like the move that ties everything together.

It is almost always the move that breaks coherence. Captions can use the workhorse sans at a smaller size with letter-spacing applied. Metadata can use the same. The third typeface adds visual noise and adds nothing structurally.

A third typeface is usually a size problem wearing a costume. — Egzecute design team

The exception: code blocks need a monospaced face, and that's not really a "third typeface" — it's a specialized type for a specialized content type. JetBrains Mono, IBM Plex Mono, SF Mono. Pick one. Reuse everywhere code appears.

What this looks like in practice

The current blog you're reading is built with exactly this system. Bricolage Grotesque for everything. Instrument Serif italic for emphasis. JetBrains Mono for code. No third sans. No fallback decorative face. The same three typefaces across every post, every list page, every UI element.

The decisions feel restrictive when you start. They feel obvious six months in. By the time the system has produced three hundred pages, the consistency is the brand. Visitors recognize an Egzecute page in the first scroll because the typography has been the same since post one.

That recognition is what design commitment buys. Hedging gets you templates. Committing gets you a brand.