System
All line heights snap to an 8px baseline grid. The scale runs 12 → 14 → 16 → 18 → 20 → 24 → 28 → 36 → 45.
The heading ramp from display H1 down to H4, each rendered at production size with its family, weight, line-height, and tracking spec beside it.
The three body copy sizes: lead for section intros, body for default paragraphs, and small for captions and secondary text.
The quick brown fox jumps over the lazy dog. This lead style is used below major headlines to introduce a section with a little more emphasis than body copy.
The quick brown fox jumps over the lazy dog. This is the default body text style used for paragraphs and general content throughout the site. It features generous line-height for comfortable reading.
The quick brown fox jumps over the lazy dog. This smaller text style is used for captions, footnotes, and secondary information.
The SERF variable-font axis at its three named stops: font-sans (0), font-mix (25), and font-serif (100).
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The four font weights available on the body face, font-medium through font-extrabold.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The Innovator Grotesk body face ships three stylistic sets and fifteen character variants, all off by default. Each row shows the affected glyphs with the feature off, then on. Enable one globally with a font-feature-settings declaration on the body, or scope it to an element with a utility.
ss01Round punctuationss02High-legibility setss03Regular numeralscv01Serifed uppercase Icv02Serifed Jcv03Straight-terminal Jcv04G without spurcv05Curved-leg Rcv06a with tailcv07Single-storey acv08Double-storey gcv09Serifed icv10Serifed jcv11Lowercase l with tailcv12Regular 1cv13Open 4cv14Regular 6cv15Regular 9The prose utility applied to a full long-form article: headings, paragraphs, links, emphasis, inline code, a pull quote, and both list types.
Typography on the web is an exercise in restraint. You're designing for a reader you'll never meet, on a device you can't predict, at a moment you can't choose. The best you can do is set the stage (clear hierarchy, comfortable measure, honest rhythm) and then get out of the way so the words can do their work.
This piece walks through the choices that make a reading experience feel considered. We'll cover hierarchy first, then rhythm, then the small decorative moments that turn a wall of text into a place worth staying. Along the way we'll pause on a few specimens (pull quotes, figures, lists) and look at how each one either earns its place or doesn't.
A section heading is a contract with the reader. It says: the ground beneath you is about to shift. If the heading is too quiet, the shift doesn't register, and the reader drifts. If it's too loud, it breaks the spell of the prose and pulls attention away from the sentence that should be doing the work.
Good headings earn their weight through a combination of size, weight, voice, and (most often underused) the space around them. A heading with generous air above it announces itself without needing to shout. A heading that sits tight to the paragraph below it creates a sense of forward motion, as if the next thought is already arriving. Those two forces together, separation above and intimacy below, are what make a section feel like a section.
Inline treatments should be quieter than headings but louder than body. A link should signal without underlining every sentence. Emphasis should feel like a voice lowering for a moment, not a hand waving. Strong emphasis is for the sentence you'd underline in a book. And inline code should read as a different object altogether: a thing, not a thought.
Rhythm is the one thing most websites get wrong. They reach for leading that's either too tight (paragraphs crushed into each other, no air to breathe) or so loose the words float apart. The sweet spot is narrower than people expect, and it shifts depending on size and measure. Long lines need more leading. Short lines need less. Bigger type needs less. Smaller type needs more.
The same principle applies vertically. Paragraph spacing should feel related to line-height, not arbitrary. A paragraph gap that's half a line feels cramped. A gap of a full line feels open and generous. More than that, and the page starts to feel stretched.
“A pull quote should break the column, not sit inside it. It's a guest, not a tenant.”
Lists are another place where rhythm gets lost. A list inside prose should keep the same leading as the surrounding paragraphs, not collapse to something tighter. The marker should sit in the same column as the text, so the left edge stays clean without pushing the bullet or number into a separate gutter.
Ordered lists tend to work best when they inherit the same spacing rules as bullets, then just bring a little more visual structure through the numbers themselves.
A horizontal rule, used sparingly, gives the reader a breath. A section break says “this is a new thought, not just a new paragraph.” The rule itself should be quiet: a hairline in a muted color, centered with generous air on either side.
All of this adds up to something that's hard to describe but easy to feel. A post with good typography doesn't announce itself. The reader just keeps reading, scrolling a little, pausing at the pull quote, glancing down the list, and arriving at the end without ever noticing the choices that got them there.
That's the goal. Not typography that shows off, but typography that disappears into the experience of reading, leaving only the words, and the feeling that someone cared enough to get out of their way.