Typography for the Long Read

Good reading typography is mostly restraint. You are not decorating the text; you are removing every reason for the reader’s eye to stumble.

Measure and leading

Aim for roughly 60–75 characters per line. Wider and the eye loses its place on the return sweep; narrower and the rhythm becomes choppy. Pair it with generous line height — around 1.7 to 1.8 for body copy.

Setting it up in Tailwind v4

Tailwind v4 loads plugins from CSS rather than a config file:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

.prose {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.8;
}

Then wrap rendered Markdown in a container with the prose classes:

<div class="prose prose-neutral dark:prose-invert">
  <Content />
</div>

Inline code and blocks

Inline code like scroll-margin-top should be visibly distinct without shouting. Blocks get a dark background and a subtle border, and are syntax highlighted at build time, so no JavaScript ships to the browser.

Quotes and emphasis

Typography exists to honor content.

— Robert Bringhurst

Use bold for the one thing a skimmer must catch, and italics for tone. If everything is emphasised, nothing is.

Checklist

• Serif body, sans-serif headings
• scroll-margin-top on headings so anchors clear the sticky header
• A visible focus state for every link
• Respect prefers-reduced-motion