Style readable prose

Long-form text has its own rules. Start with the measure, the length of a line:

<article class="mx-auto max-w-prose px-4 text-lg leading-8 text-gray-800">...</article>

max-w-prose caps the line at 65ch, about 65 characters, which is a comfortable reading width. mx-auto centers the article box. px-4 keeps the text off the screen edges on a phone. text-lg leading-8 gives an 18px body with a 32px line height. That’s a comfortable rhythm for most fonts, but the right size depends on your typeface and audience, so test it with real paragraphs.

Prose is a system of relationships

An article is more than paragraphs. Each element has spacing needs relative to the others:

• headings need clear hierarchy, and more space above than below
• paragraphs need a consistent vertical rhythm
• lists need visible markers and indentation
• links need an affordance beyond color, and a clear focus state
• code needs wrapping or deliberate horizontal scrolling
• figures and tables need captions and overflow handling

Don’t center the text

The article box is centered. The text inside should stay left-aligned. Centered paragraphs make every line start at a different point, and the eye loses its place. This is one of the most common mistakes I see.

When utilities stop being the right tool

If the content comes from Markdown or a CMS, you can’t put classes on every <h2> and <li>. Styling them from the template with descendant arbitrary variants gets noisy fast. Three options work better: a semantic class with ordinary descendant CSS like .article-content h2 { ... }, Tailwind’s optional Typography plugin with its prose class, or a mix. Utilities still fit the article container and any one-off element.

Keep the HTML semantic

A large <div> is not a heading. Extra margin doesn’t turn one long paragraph into two for a screen reader. Use <h2>, <p>, <ul>, <blockquote>, and <figure> for what they are. The styling follows the structure, never the other way around.

Test with real content

Placeholder sentences hide problems. Test a short paragraph, a long URL that can’t wrap, a nested list, a code sample, a blockquote, an image, and a table. Zoom to 200% and narrow the viewport. Any horizontal overflow should stay inside the element that needs it, like the code block, and never push the whole page sideways.

Try this: style a real 500-word article. Measure the line length, navigate the headings and links by keyboard, and fix one overflow case without shrinking all the text.