A long-form article is not a landing page with more words in it. It is read in one sitting, often on a phone, often by someone who will stop the moment the page makes them work. Everything below follows from that.
Measure and rhythm
Reading comfort starts with the measure. For long-form body text we set roughly 19px with a 1.6–1.72 line height and cap the column near 68 characters. Wider than that and the eye loses the return sweep; narrower and the text turns into a stutter of short lines.
- Body text around 19px, line height 1.6–1.72
- Maximum measure near 68 characters
- Space between sections larger than space within them
Design tokens
Consistency across a publication comes from naming the decisions once. Background, text, muted text and accent become tokens, and every component reads them rather than restating a hex value that will drift.
Layout anatomy
A clean, distraction-free column with a clear hierarchy: a sticky table of contents on wide screens, spacious sections, and focused blocks for code, quotes and notes. On a phone the table of contents collapses rather than competing with the text.
Accessibility
Sufficient contrast, visible focus states and semantic HTML. Accessibility is not an afterthought — a heading that is a styled div is invisible to the reader who navigates by headings, and that reader is the one who needed the outline most.
<article class="article">
<header class="article__header">
<h1 class="article__title">Article title</h1>
<p class="article__meta">26 May 2026 · 12 min read</p>
</header>
<div class="article__body">
<section>
<h2>Section title</h2>
<p>Paragraph content…</p>
</section>
</div>
</article>Final thoughts
A good article template is invisible. It does not distract from the content — it gets out of its way. Clarity, rhythm and consistency are the whole job.