Blog Typography: Best Font Size and CSS for Articles

Long-form typography succeeds when readers can follow an argument without repeatedly adjusting their window or losing their place. That requires more than a pleasant font. Measure, leading, paragraph spacing, headings, and embedded material must work as one reading environment. Start with real editorial content and make the comfortable version your default, not an optional reading mode.

Build a representative reading specimen

Choose an actual article with short and long paragraphs, several heading levels, links, a list, a quotation, and a code sample if the publication uses them. Paste its text into the word counter to understand its length and compare representative drafts. Use that information to choose realistic testing content, not to declare a font readable from a score.

A two-paragraph placeholder cannot reveal fatigue, repetitive spacing, or the effect of five consecutive subheadings. Aim to inspect a complete reading session, including the transition from the introduction into the main argument and the final summary. The reading specimen should resemble the material editors actually publish.

Keep typographic tuning separate from copy editing. A dense sentence may need rewriting, while a visually dense page may need a narrower measure or more leading. Changing every variable at once hides the cause. Save an initial version and adjust one relationship at a time so comparisons remain meaningful.

Balance font size, measure, and leading

Treat font size, line length, and line height as a coupled system. For many article layouts, a useful starting point is 1.125rem text, a maximum measure around 65ch, and line height near 1.6. These are trial settings, not requirements. The same values will look different in fonts with different x-heights, widths, and proportions.

The ch unit is based on the advance measure of the zero glyph; 65ch does not guarantee 65 characters on every line. Count several rendered lines if you need a clearer picture of actual measure. A rough range of 55–75 characters can help evaluate ordinary desktop prose, but short phone lines will naturally fall outside it.

As the measure grows, additional leading can help readers find the next line. As the measure shrinks, overly generous leading can make a paragraph feel disconnected. Test both changes together rather than preserving one ratio at all widths. Avoid filling a wide monitor simply because space is available.

MDN's line-height documentation explains why unitless values are useful for inherited text. For broader width decisions, consult the responsive container guide. Keep the article column independent of full-width navigation or a wider figure layout.

Establish a restrained article stylesheet

Scope reading styles to the article rather than applying them to every paragraph in the application. Reset predictable block margins inside that scope, then rebuild intentional relationships. Leave enough horizontal padding for phone screens and do not reduce the root font size to make rem arithmetic convenient.

.prose {
max-inline-size: 65ch;
margin-inline: auto;
padding-inline: 1rem;
font-size: 1.125rem;
line-height: 1.65;
overflow-wrap: break-word;
}

.prose :where(p, ul, ol, blockquote, h2, h3) {
margin-block: 0;
}

.prose > * + * {
margin-block-start: 1.1em;
}

.prose :where(h2, h3) {
line-height: 1.25;
margin-block-start: 1.8em;
margin-block-end: 0.6em;
}

.prose h2 { font-size: 1.65em; }
.prose h3 { font-size: 1.3em; }
.prose :where(h2, h3) + * { margin-block-start: 0; }
.prose a { text-underline-offset: 0.15em; }
.prose pre { overflow-x: auto; }

This recipe assumes ordinary blocks are direct children of the reading container. A CMS that wraps each block in another element needs matching selectors. Test the generated markup, not only a hand-built preview. Nested lists and captions also deserve explicit rules if they appear in your publication.

The paragraph interval here is distinct from line height: one separates ideas, while the other separates lines within an idea. Avoid combining large paragraph gaps with first-line indentation unless you have a specific editorial reason. Either can mark a paragraph boundary; both together often overstate it.

Make headings and secondary text support reading

Headings should expose the structure of the argument. Use a larger gap above than below so the heading belongs to the material that follows. Check a heading that wraps onto three lines; a display style tuned only for short titles can consume too much of a phone viewport.

Keep the body size stable unless a real reading test suggests it should change. If the publication needs fluid headings, use the fluid typography guide to set bounded ranges. There is no obligation to make every text role scale continuously with the viewport.

Give captions and footnotes enough size to remain usable, especially when they contain essential explanations. Secondary text should be less prominent without becoming expendable. A modest size reduction and tighter leading often work better than drastically reduced contrast. Quotations can gain emphasis from spacing and a slightly different weight instead of enormous lettering.

Keep links recognizable inside paragraphs. Underlines provide a persistent cue and make scanning for references easier. MDN's text-decoration reference describes the controls available for tuning thickness and style. Verify that descenders remain legible and that the underline still reads clearly on your chosen font.

Test interruption, adaptation, and edge cases

Read several screens of the article rather than merely viewing its first fold. Watch for repeated one-line paragraphs, large empty bands around figures, and lists whose leading differs unexpectedly from the body. The objective is sustained reading, not a particularly attractive screenshot.

Check long URLs, inline code, and unfamiliar proper names. Allow prose to wrap while keeping code blocks independently scrollable when preserving syntax matters. Do not shrink the entire article to fit one unusually wide example. Likewise, avoid clipping content with fixed heights intended to keep the page tidy.

Enlarge text and test spacing overrides described in the W3C text spacing guidance. Content should remain available when readers increase leading or paragraph spacing. Verify these changes on the actual article template, including its captions and callouts.

Finally, document a small reading preset: body size, measure, leading, paragraph interval, heading proportions, and caption treatment. Record which font and content you tested. That gives editors and developers a shared baseline while leaving room for intentional differences between essays, tutorials, and reference material. Include one approved example of each common content block so future changes can be checked against the same material rather than judged from memory.

Key takeaways

• Tune measure, size, and leading together using complete articles.
• Use scoped prose rules that match the CMS output.
• Associate headings with following content through deliberate spacing.
• Keep captions, links, and code usable rather than merely decorative.
• Test long reading sessions, narrow widths, text enlargement, and spacing overrides.