Style readable prose

Start with the reading measure:

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

max-w-prose limits line length, mx-auto centers the article box, and px-4 protects its edges on narrow screens. text-lg leading-8 creates a comfortable body rhythm, but the correct size depends on the chosen font and audience.

Long-form content is a system of relationships:

• headings need clear hierarchy and more space before than after
• paragraphs need consistent vertical rhythm
• lists need visible markers and indentation
• links need a non-color affordance and clear focus
• code needs wrapping or intentional horizontal scrolling
• figures and tables need captions and overflow handling

Do not center long paragraphs simply because the article box is centered. Left-aligned text is usually easier to scan in left-to-right prose.

When content comes from Markdown or a CMS, styling every descendant in the template becomes noisy. A semantic prose component, ordinary descendant CSS, or Tailwind’s optional Typography plugin can be a better boundary. Utilities are still useful for the article container and exceptional elements.

Preserve semantic HTML. A visually large <div> does not become a heading, and adding margin to fake separate paragraphs does not give assistive technology paragraph structure.

Test actual content: a short paragraph, a long URL, nested list, code sample, blockquote, image, and table. Zoom to 200%, narrow the viewport, and verify that horizontal overflow is confined to the element that needs it.

Your action is to style a real 500-word article, not placeholder sentences. Measure line length, navigate headings and links by keyboard, and fix one overflow case without shrinking all text.