2026-09-12 · 7 min · By Alcott Dube
How to set typography for reading long articles on screen
I set long-form screen typography by balancing line length, leading and paragraph spacing, then testing the hierarchy against real content and narrow screens.
For long articles on screen, I start with readable body type, a measure of roughly 60 to 70 characters and line spacing around 1.5 times the font size. I then establish a restrained heading hierarchy and consistent paragraph rhythm, checking the result on narrow screens and with enlarged text.
Choose body type using real article content
I choose the body face before the display face. A striking headline can't compensate for fifteen minutes of uncomfortable reading. My test sample includes several ordinary paragraphs, a link, italics, numerals and a subheading. I use actual editorial copy where possible. Placeholder text hides awkward word lengths and gives every paragraph an artificially similar texture.
I inspect the type at its intended reading size, not enlarged in a specimen. Can I distinguish a lowercase l from a capital i? Do commas survive at normal viewing distance? Does the regular weight look thin on the screen in front of me? I also check that a genuine italic is available rather than relying on the browser to slant the upright letters.
For an article template, I might begin at 18 pixels, expressed as 1.125rem when the root size is unchanged. That's a starting value, not a minimum everyone must obey. Different faces occupy different amounts of visible space at the same nominal size. I compare the rendered paragraphs, not just the numbers in the stylesheet.
Set line length before fine-tuning font size
Measure is the width of the text column. Too wide, and finding the next line becomes harder. Too narrow, and the reader keeps returning to the left edge. Butterick's Practical Typography gives a broad range of 45 to 90 characters per line, including spaces. I usually begin nearer 60 to 70 for a continuous article, then adjust for the face and viewport.
A rule such as max-inline-size: 65ch makes a useful first pass. The ch unit follows the advance width of the font's zero, though, so it doesn't count actual characters. I check several full lines of representative prose. One line packed with narrow letters tells me very little about the column as a whole.
I don't stretch the article to fill a large monitor. Spare space beside a reading column is useful. On a small screen, I let the measure shorten rather than shrinking the type to preserve a desktop character count. Smashing Magazine's treatment of responsive typography makes the relevant connection: font size and line length need to be considered together.
Adjust line height to suit the font and measure
Leading controls the distance between successive baselines. On the web, I adjust it through line-height, usually starting with a unitless value of 1.5 or 1.55. With 18-pixel type, 1.5 produces a 27-pixel line box. A unitless value also scales with an element's own font size when inherited, which avoids carrying a fixed line height into larger text.
Butterick treats line spacing as a proportion of type size. I use that relationship as a framework, not a setting to transfer blindly between print and browsers. A face with a large x-height can look crowded where another looks comfortable. Longer lines may also need more separation to make the return to the next line easier.
I compare three versions of the same passage at 1.4, 1.5 and 1.6. I read across paragraph boundaries instead of judging a single line. Tight leading can make the paragraph feel dense; excessive leading can pull it into separate strips. I stop when lines are distinguishable without losing the paragraph's shape. Headings get their own tighter setting, especially when they wrap.
Build a heading hierarchy that survives wrapping
I give each heading level a job before giving it a size. The article title identifies the piece. Section headings divide the argument. A third level belongs only where a section contains genuine subdivisions. I don't add another level because a page looks visually quiet. For many journal pieces, a title and one section-heading style are enough.
At an 18-pixel body size, I might test section headings at 27 pixels and smaller subheadings at 21. Weight and spacing do some of the work, so size doesn't have to do everything. I keep the underlying heading order meaningful rather than selecting heading elements for their appearance. Visual styling and document structure are related decisions, not interchangeable ones.
The useful stress test is a long heading on a narrow screen. I check its line height, its distance from the following paragraph and whether it overwhelms the content beneath it. I put more space above a section heading than below it so the grouping is clear. I avoid forced line breaks that fix one viewport and create an awkward fragment elsewhere.
Create paragraph rhythm without a rigid baseline grid
For screen articles, I normally separate paragraphs with space and leave their first lines unindented. Indents can work, but using both treatments usually repeats the same signal. I might begin with a paragraph gap of 0.75em, then compare it with the line height. The gap should mark a new thought without making every paragraph resemble a separate section.
I define a small spacing scale for paragraphs, lists, headings and quotations. For example, a paragraph gap might be 14 pixels, with 28 pixels before a minor heading and 42 before a major section. These are trial values, not universal ratios. I inspect the resulting groupings because margin behaviour and nested elements can change the visible distances.
I don't force every element onto a strict baseline grid. Responsive wrapping, reader preferences and different font metrics make that expensive to maintain. I care more about repeated relationships: headings belong to what follows, list items stay grouped, and captions remain close to their images. A quotation can interrupt the rhythm, but its spacing should make the interruption look deliberate rather than accidental.
Test typography on mobile and with enlarged text
I test the assembled article, not isolated styles. A 320-pixel viewport exposes different problems from a wide desktop window: long links, deep list indentation and headings that consume half the screen. I keep side padding modest enough to preserve a useful column. Enlarging the margins while reducing the type is the wrong trade-off for a reading page.
I then enlarge text and test at 200% browser zoom. These aren't identical tests, so I use both where the browser allows them. I look for clipped headings, overlapping captions, horizontal scrolling and text trapped inside fixed-height boxes. I also test increased text spacing. A layout that only works with my exact settings is too brittle.
I check the fallback font before the chosen font loads, then inspect the change after loading. Different widths can move headings and alter paragraph lengths. Finally, I check contrast, visible link styling and keyboard focus. Comfortable typography isn't only about attractive paragraphs. Readers still need to identify a link and see where they are when moving through the page.
Measure reading problems before adding more styles
I keep the review concrete. I record the body size, approximate characters per full line, line-height ratio and paragraph gap. Then I note failures against a viewport and a content sample. 'The third heading wraps to four lines at 320 pixels' is actionable. 'The typography needs more polish' isn't. Screenshots help preserve the conditions behind each observation.
If I can run a reading session, I ask someone to read a passage and locate a specific detail afterwards. I watch for zooming, losing their place and difficulty finding a section. Those observations suggest what to investigate; they don't isolate typography from vocabulary, attention or subject knowledge. I don't treat time on page as proof of readability either. Confusion can take time.
I skip decorative changes until these failures are resolved. Another font family, a drop cap or oversized pull quote creates more relationships to maintain. For handover, I document the type roles, spacing values and testing conditions, alongside one demanding sample article. That gives the next person something to reproduce when a new content block arrives.
Questions people ask
What is the best font size for reading on a website?
I usually test article body text at 18 pixels first, using a relative unit in the implementation. I adjust after checking the font's visible size, the column width and enlarged-text behaviour. A nominal size alone doesn't establish readability.
How many characters should a line of text contain?
I start around 60 to 70 characters, including spaces, for a desktop article column. Butterick gives a broader range of 45 to 90. On mobile, I accept shorter lines rather than reducing otherwise comfortable type.
What line height should I use for body text?
I start with a unitless line-height of 1.5, then compare slightly tighter and looser versions. The font and measure determine which works better. I set heading line heights separately so wrapped titles don't inherit excessive spacing.
Are serif or sans serif fonts better for long-form reading?
I don't choose by category alone. I compare specific faces for character clarity, spacing, weight and rendering at the intended size. Either category can work; a poor individual font won't be rescued by its classification.