How to Make Your Website More Comfortable for People Who Read for Hours

If your site publishes long guides, walkthroughs or game reviews, many visitors will read for ten minutes or more. Whether they finish, return or give up depends less on your headline than on how comfortable the page is. Small type, low contrast, endless lines and ads that jump around all make reading tiring, and tired readers leave.

This guide covers the typography and layout choices that matter for long reading, what accessibility standards say, how to handle dark mode and mobile, and how animation and ads affect the experience. It includes a side-by-side comparison of a hard-to-read article page and a comfortable one, with working CSS.

• Body text of about 16 to 20 CSS pixels is a safe default for long reading on screens. Browsers set 16px as the baseline, and shrinking below it forces many readers to zoom. On mobile, text under 16px in form fields also triggers automatic zoom on iPhones.
• Use relative units (rem or em) so the page respects the visitor's browser font-size setting. WCAG success criterion 1.4.4 requires text to be resizable up to 200 percent without loss of content or function.
• Do not rely on tiny captions and meta text for essential information.

Very long lines make it hard to find the start of the next line, and very short ones break the rhythm. The WCAG advanced level (success criterion 1.4.8, AAA) asks for a width of no more than 80 characters, which is a useful ceiling. A comfortable range for body text is commonly about 50 to 75 characters per line. In CSS:

.article { max-width: 68ch; margin-inline: auto; }

The ch unit is roughly the width of the zero character in the current font, so 68ch gives a line near 60 to 75 characters for most fonts.

• Line height of about 1.5 to 1.7 for body text. WCAG 1.4.12 requires that pages keep working when users apply a line height of 1.5, paragraph spacing of 2 times the font size, letter spacing of 0.12 times the font size and word spacing of 0.16 times the font size. Design so that your page does not break when readers do that.
• Space between paragraphs of roughly one line.
• Left-align text. WCAG 1.4.8 recommends not justifying text, because uneven gaps between words create rivers of white space that are hard for some readers, including people with dyslexia.
• Short paragraphs and clear subheadings help scanning and give the eye places to rest.

WCAG 1.4.3 (level AA) requires a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text, which it defines as at least 18 point or 14 point bold. Common traps:

• Light grey body text on white, because it "looks clean".
• Text over photos or gradients without an overlay.
• Coloured links that are not distinguishable from body text except by colour. Underline links.
• Placeholder and caption text lighter than the minimum.

Pure black text on pure white is not required, and some readers find extreme contrast harsh. A very dark grey on off-white is fine as long as the ratio stays above 4.5:1. Test with any contrast checker or your browser's developer tools.

Offer both if you can, and let the visitor's system choice decide by default with the prefers-color-scheme media query. Do not hide the content behind a mandatory dark theme or remove the option to switch.

:root {
  --bg: #fbfaf7;
  --text: #1c1c1c;
  --link: #0b57d0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --text: #e6e6e6;
    --link: #8ab4f8;
  }
}
body { background: var(--bg); color: var(--text); }
a { color: var(--link); text-decoration: underline; }

In dark mode, avoid pure white text on pure black for long articles, since the very high contrast can cause a glowing effect for some readers, and check that all three colours above still pass the 4.5:1 ratio. Make sure images and diagrams with white backgrounds do not blind readers at night.

• Use a responsive layout with a viewport tag, and avoid horizontal scrolling. WCAG 1.4.10 (reflow) asks that content works at a width of 320 CSS pixels without two-dimensional scrolling.
• Give the text generous side padding, around 16 pixels.
• Make tap targets big enough. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels (level AA), and larger targets of 44 by 44 are recommended at the enhanced level.
• Keep tables scrollable inside their own container instead of letting them widen the page.
• Do not lock zoom: never use user-scalable=no or a restrictive maximum scale.
• Avoid sticky headers, footers and floating widgets that eat a quarter of a small screen.

• Moving, blinking or scrolling content that starts automatically, lasts longer than five seconds and sits next to other content needs a way to pause, stop or hide it under WCAG 2.2.2 (level A). That includes auto-rotating carousels and animated banners beside text.
• Audio that plays automatically for more than three seconds needs a pause or volume control (WCAG 1.4.2). Better still, never start audio without a click.
• Avoid content that flashes. See flashing animations and motion sickness: website safety explained.
• Use animation to explain, not to attract attention to every element.

Advertising pays for many sites, and well-placed ads and readability can coexist. Problems arise when ads interrupt the text.

• Place ads between sections, not in the middle of sentences or steps.
• Label them clearly so readers can tell ads from content.
• Reserve the ad space in your CSS so the page does not jump when an ad loads. Layout shift makes readers lose their place.
• Limit how many ads share one screen and avoid sticky ads that cover the text.
• Avoid autoplay video ads with sound, full-screen pop-ups and ads that appear while the visitor is scrolling. The Better Ads Standards from the Coalition for Better Ads identify experiences like these as ones consumers find annoying.

More on interruptions: how pop-ups, autoplay videos and notifications affect website visitors.

Element	Hard to read	Comfortable
Font size	13px, fixed in pixels	1.125rem (18px) that scales with browser settings
Line length	Full width, 140+ characters	max-width 68ch
Line height	1.1	1.6
Alignment	Justified	Left-aligned
Contrast	#999 on #fff (about 2.8:1)	#1c1c1c on #fbfaf7 (well above 4.5:1)
Links	Colour only, low contrast	Underlined, 4.5:1 or better
Headings	One long wall of text	Subheads every few paragraphs
Ads	Inline mid-sentence, no reserved space	Labelled, between sections, space reserved
Animation	Rotating banner beside the text	Static, with reduced motion respected
Mobile	Horizontal scroll, tiny tap targets	Reflows at 320px, 44px tap targets

CSS for the poor version

body { font-size: 13px; line-height: 1.1; color: #999; background: #fff; }
p { text-align: justify; }
.page { width: 100%; }

CSS for the comfortable version

body {
  font: 1.125rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1c1c1c;
  background: #fbfaf7;
}
.article { max-width: 68ch; margin-inline: auto; padding-inline: 1rem; }
p { margin: 0 0 1.1em; text-align: left; }
h2 { margin: 2em 0 0.6em; line-height: 1.25; }
a { color: #0b57d0; text-decoration: underline; }
img { max-width: 100%; height: auto; }
.ad-slot { min-height: 250px; margin: 2rem 0; }

• Body text is at least 16px and set in relative units.
• Lines are no longer than about 75 characters.
• Line height is around 1.5 or more, with clear paragraph spacing.
• Text is left-aligned and contrast is at least 4.5:1.
• Links are underlined and distinguishable.
• Dark mode follows the system setting and passes contrast checks.
• The page works at 320px width and at 200 percent zoom.
• Ads are labelled, between sections, and have reserved space.
• Nothing moves automatically for more than five seconds without a pause control; nothing flashes.
• Audio never plays without a click.

• W3C: WCAG 1.4.3 Contrast (Minimum), 1.4.12 Text Spacing, 2.2.2 Pause, Stop, Hide and 1.4.2 Audio Control.
• Coalition for Better Ads: Better Ads Standards.

Looking for content for a reading-friendly games site? See the free HTML5 games catalog.