How to Style Long-Form Articles for Better Readability?

You spend two weeks researching and writing a 4,000-word guide. Analytics later show that the median reader scrolls 30% of the way and leaves. The content is good, so what went wrong? Often it is the presentation: a column that stretches across the screen, paragraphs that run together, headings that barely differ from body text, images jammed against the copy, and no way to tell how much is left or jump to the section you care about.

Long-form content asks readers for sustained attention, and typography either supports that effort or erodes it. This article walks through the styling decisions that matter for articles over about 1,500 words — from the text column and body type to headings, lists, media, code, tables, and navigation aids — with CSS you can drop into a blog template.

What Makes Long-Form Different

Short pages are scanned. Long articles are scanned first, then read in stretches. That means your styling has to do two jobs:

1. Support scanning. Readers decide whether to commit by skimming headings, images, and bold phrases.
2. Support sustained reading. Once committed, they need comfortable body text that does not cause fatigue over 10–20 minutes.

Fatigue is the enemy. Small inefficiencies — slightly too-long lines, slightly too-tight line height, slightly too-light text — are barely noticeable in a 200-word product blurb but compound over 4,000 words.

Set Up the Reading Column

Everything starts with the column. Body text should sit in a single, centered column with a line length of 45–75 characters, ideally around 65–70.

.article {
  --measure: 68ch;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

The ch unit is based on the width of the 0 glyph in the current font, so 68ch gives you roughly 68 average characters — slightly more in practice, since many letters are narrower than zero. See the ideal line length for web content for the evidence behind these numbers.

Allow Wider Elements to Break Out

Images, tables, and code samples often benefit from more width than the text column. A CSS Grid layout lets you keep text narrow while specific elements break out:

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [wide-start] minmax(0, 8rem)
    [content-start] min(68ch, 100% - 2rem)
    [content-end] minmax(0, 8rem)
    [wide-end] minmax(1rem, 1fr)
    [full-end];
}

.article > * {
  grid-column: content;
}

.article > .wide {
  grid-column: wide;
}

.article > .full {
  grid-column: full;
}

Choose Body Type for Endurance

Font

Pick a text face designed for extended reading: moderate x-height, open counters, regular weight around 400, and good italic. Serifs and sans-serifs both work on modern screens. Browse our list of the best Google Fonts for body text for tested options.

Size and Line Height

Long-form body text should be larger than UI text. On desktop, 18–21px is common for editorial sites; on mobile, 17–18px.

.article {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  color: #1f2328;
}

Paragraph Spacing

Separate paragraphs with roughly one line of space and keep margins consistent:

.article > * + * {
  margin-block-start: 1.25em;
}

Alignment and Hyphenation

Keep body text left-aligned. If you want fewer ragged extremes on narrow screens, enable automatic hyphenation for mobile only, and make sure the lang attribute is set on the html element so the browser uses the right dictionary:

@media (max-width: 40rem) {
  .article p {
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
}

Add text-wrap: pretty to paragraphs to reduce single-word last lines in browsers that support it:

.article p {
  text-wrap: pretty;
}

Style Headings for Navigation

In long articles, headings are navigation. They must be visibly distinct from body text and spaced to attach to their sections.

.article h2 {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.2;
  margin-block: 2.25em 0.5em;
  text-wrap: balance;
  scroll-margin-top: 5rem; /* clears a sticky header on anchor jumps */
}

.article h3 {
  font-size: 1.3em;
  font-weight: 650;
  line-height: 1.3;
  margin-block: 1.75em 0.4em;
}

scroll-margin-top matters as soon as you add a table of contents with anchor links. Without it, a sticky header covers the heading you just jumped to. For more on writing and formatting headings that people actually scan, see our guide on formatting headings for scannable content.

Lists, Emphasis, and Links

Lists

Lists break up dense explanations. Give list items a little space between them and align markers with the text column:

.article :is(ul, ol) {
  padding-inline-start: 1.25em;
}

.article li + li {
  margin-block-start: 0.4em;
}

.article li::marker {
  color: #6b7280;
}

Emphasis

Use bold for key terms on first mention and for the occasional must-not-miss phrase. If more than one phrase per paragraph is bold, readers stop noticing it. Italic is for titles, foreign words, and light stress.

Links

Links in body text must be identifiable without relying on color alone. Underlines are the most reliable signal. Modern CSS lets you style them so they are visible but not heavy:

.article a {
  color: #1d4ed8;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.article a:hover {
  text-decoration-thickness: 0.15em;
}

Images, Figures, and Captions

Images give readers a break and explain what text cannot. Wrap them in figure with a figcaption, and give them extra space so they do not crowd paragraphs.

.article figure {
  margin-block: 2em;
}

.article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.article figcaption {
  margin-block-start: 0.6em;
  font-size: 0.875em;
  line-height: 1.45;
  color: #4b5563;
}

Always set width and height attributes on images in the HTML so the browser reserves space and avoids layout shift.

Quotes, Code, and Tables

Blockquotes and Pull Quotes

Quotations need a clear visual container: an inset, a left border, or a change in size. Styling both blockquotes and pull quotes is covered in our guide on blockquotes and pull quotes.

Code

Technical articles need code blocks that scroll horizontally instead of wrapping unpredictably, with a monospace font slightly smaller than body text:

.article pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  font-size: 0.875em;
  line-height: 1.55;
  background: #f6f8fa;
  border-radius: 0.5rem;
  tab-size: 2;
}

.article :not(pre) > code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: #f1f3f5;
  border-radius: 0.25em;
}

Tables

Wide tables are a common cause of horizontal page scroll on mobile. Wrap them in a scrollable container and use tabular figures for numbers:

.table-wrap {
  overflow-x: auto;
}

.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375em;
  font-variant-numeric: tabular-nums;
}

.article :is(th, td) {
  padding: 0.6em 0.75em;
  border-bottom: 1px solid #e5e7eb;
  text-align: start;
}

Navigation Aids for Long Content

Long articles benefit from wayfinding that short pages do not need.

1. Table of contents. Generate one from h2 headings and place it near the top or in a sticky sidebar on desktop.
2. Reading time. "12 min read" sets expectations and increases commitment from readers who choose to continue.
3. Progress indicator. A thin bar showing scroll progress reassures readers. Modern CSS can do this without JavaScript using scroll-driven animations.
4. Back-to-top link. Useful on mobile after very long articles.

A CSS-only progress bar:

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: #1d4ed8;
  transform-origin: 0 50%;
  animation: grow linear;
  animation-timeline: scroll(root);
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress {
    display: none;
  }
}

Scroll-driven animations are supported in Chromium-based browsers and Safari 26; in browsers without support the bar simply does not animate, so treat it as an enhancement.

Using a Typography Plugin as a Starting Point

If you use Tailwind, the official typography plugin gives you a prose class with sensible long-form defaults that you can then override. Our guide to the Tailwind Typography plugin covers setup. In Tailwind v4 it is registered in CSS:

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

<article class="prose prose-lg mx-auto max-w-[68ch]">
  <!-- rendered Markdown -->
</article>

Treat prose as a baseline, not a finished design. Adjust heading sizes, link styles, and spacing to match your brand.

Test with Real Content

Lorem ipsum hides every long-form problem. Test with a real article that includes:

• At least three levels of headings.
• Bulleted and numbered lists, including nested ones.
• Images with captions, at least one portrait image.
• A blockquote, a code block, and a wide table.
• A very long word or URL, which should not overflow on mobile. Add overflow-wrap: break-word to the article to handle it.

Then read the entire article on a phone and on a laptop. Note every place where you hesitate, lose your place, or feel the urge to skim.

---

Long-Form Article Styling FAQ

Conclusion

Styling long-form articles is about removing small sources of friction that add up over thousands of words. Start with a centered column capped at 60–75 characters, comfortable body type at 18px or larger with line height around 1.6, consistent paragraph spacing, and headings that stand out and attach to their sections. Then handle the supporting elements — lists, links, figures, quotes, code, and tables — so each has its own clear treatment and none breaks the layout on a phone.

Finally, help readers navigate with a table of contents, reading time, and anchor-friendly headings, and test the whole template with a real, messy article rather than placeholder text. The reward is content that people actually finish.

Here are some useful references for going deeper on long-form article styling:

1. MDN Web Docs: text-wrap — how balance and pretty improve headings and paragraphs.
2. MDN Web Docs: CSS scroll-driven animations — building progress indicators without JavaScript.
3. Smashing Magazine: Typographic Design Patterns and Current Practices — a survey of body text settings on content-heavy sites.
4. Tailwind CSS: tailwindcss-typography on GitHub — the official plugin for styling rendered Markdown.
5. Butterick's Practical Typography: Line length — concise guidance on measure for body text.