To build a quiet reading experience online, give your text one comfortable column of no more than about 80 characters per line, line spacing of roughly 1.5, strong contrast and nothing that moves or pops up while someone is reading. Then make the page fast and stable, mark it up properly so browsers and screen readers understand it, and push promotion to the edges. Most of these choices are documented in the W3C's accessibility guidance and Google's page experience advice, so you can check your site against published criteria rather than taste alone.

This guide is written for writers, critics and editors who publish essays, reviews or fiction on their own sites. It is tool-neutral: every step can be done on a hosted platform, a static site or a hand-built page.

Design the reading page before choosing a platform

Start with one long piece of your own writing and decide how it should look on a phone and on a laptop. Then pick or configure a tool that can produce that page, rather than accepting a theme's defaults and fighting them later.

A quiet reading page has a small set of parts: the title, a byline, perhaps the date and where the piece first appeared, the text, and a short footer. Navigation, newsletter prompts and links to other work all belong either above the title in a slim header or below the end of the piece. Anything that sits beside or across the text competes with it.

Browsers already show what readers want when they get the choice. Apple's guide to Safari Reader on Mac describes it as presenting an article "without navigation or other distractions", with adjustable background colour, font and size. Apple notes that the Reader button only appears if the page has an article Reader can show, which is one more reason to use clean, well-structured markup (more on that below).

Set the measure and line spacing

The measure, or line length, has the biggest effect on comfort. WCAG 2.2 success criterion 1.4.8, explained in the W3C guide to visual presentation, asks that blocks of text can be presented with a width of no more than 80 characters, text that is unjustified (ragged right), line spacing of at least space-and-a-half within paragraphs, and paragraph spacing at least 1.5 times the line spacing. That is a Level AAA criterion, the highest level, but its numbers make a good brief for a reading page.

Typographers land in a similar place. Matthew Butterick's Practical Typography recommends an average line length of 45 to 90 characters, including spaces, and suggests the alphabet test: you should fit between two and three alphabets on a line. On line spacing, the same book puts the optimal range for most text at 120% to 145% of the point size. The W3C figure of 1.5 is a little more generous, which suits screens and readers with low vision.

In CSS terms, that usually means a maximum width for the text column expressed in characters, a line height between about 1.4 and 1.6, and left-aligned rather than justified text, since justification on narrow screens opens uneven gaps between words.

Choose type and colour with restraint

One body typeface and, at most, one for headings is enough. Choose a body size that can be read on a phone without zooming, and avoid long runs of capitals or italics.

Contrast is not a matter of taste. WCAG success criterion 1.4.3, described in the W3C guide to minimum contrast, requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Very pale grey body text on white, a common "elegant" look, often fails. WebAIM's free contrast checker tells you the ratio for any pair of colours in seconds.

Some readers prefer light text on a dark background, especially at night. The CSS prefers-color-scheme media feature lets a page follow the reader's system setting, so you can offer a dark version without adding a toggle. Check the contrast of both versions.

Remove the things that interrupt

Pop-ups are the most common thing that breaks a reading session. Google's guidance on avoiding intrusive interstitials and dialogs says such overlays "may frustrate" users and "erode their trust", and that they can make it hard for search engines to understand your content. It recommends banners that take up a small fraction of the screen instead, and says those small containers can be reused for prompts such as newsletter signups.

Cookie notices need more care than the usual advice to "remove the banner". Under UK rules, the ICO's guidance on cookies and similar technologies says you must tell people about cookies, explain what they do and get consent, with an exception for cookies that are strictly necessary for a service the user has asked for. The ICO notes it is consulting on revised guidance on storage and access technologies (checked October 2026). The quietest legal route is to avoid non-essential cookies and third-party embeds on reading pages, so that there is less to ask consent for in the first place. If you do need consent, keep the notice compact and clear rather than hiding it.

Motion is the other big interruption. WCAG criterion 2.2.2, explained in the W3C guide to pause, stop, hide, requires a way to pause, stop or hide any moving content that starts automatically, lasts more than five seconds and appears alongside other content. Criterion 2.3.3 on animation from interactions notes that scroll-triggered movement can cause dizziness, nausea and headaches for people with vestibular disorders. The prefers-reduced-motion media feature lets you switch off non-essential animation for readers who have asked their device to minimise it. On a reading page, the simplest answer is no autoplay video, no animated backgrounds and no parallax.

Sticky headers deserve a look on a phone. If a fixed bar takes a large share of a small screen, make it slimmer or let it scroll away with the page.

Keep the page fast and stable

Quiet also means still. Text that jumps as an image or advert loads is one of the most irritating things that can happen mid-sentence. Google's Core Web Vitals measure this as Cumulative Layout Shift, and web.dev advises sites to aim for a CLS score of 0.1 or less at the 75th percentile of page loads. Giving images explicit width and height, and reserving space for anything that loads late, prevents most shifts.

Speed matters too: web.dev's guidance on Largest Contentful Paint sets a target of 2.5 seconds or less. Reading pages are usually text, so they can be very fast if you keep large header images and extra scripts to a minimum.

Structure long pieces so they breathe

Long essays need signposts. Use real headings at sensible intervals, with wording that tells readers what the section is about. Keep the opening paragraph close to the argument, so readers know quickly whether the piece is for them. A short table of contents at the top can help for very long work, especially reference pieces that people return to.

Structure is also how machines read your page. MDN's glossary entry on semantics explains that using elements for their meaning, such as proper headings rather than large bold text, helps search engines and assistive technology. That same clean structure is what lets reader modes like Safari Reader pick out your article.

Pull quotes and drop caps are optional. If you use pull quotes, remember they repeat text, which screen reader users will hear twice unless the repeat is hidden from assistive technology.

Make the page readable for everyone

Accessible design and quiet design overlap almost completely. A few checks cover most of it:

  • Text spacing. WCAG criterion 1.4.12 on text spacing requires that nothing breaks when readers override line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Avoid fixed-height containers that clip text.
  • Reflow. Criterion 1.4.10 on reflow asks that content works at a width of 320 CSS pixels without scrolling in two directions, which equals 400% zoom on a 1280-pixel-wide screen.
  • Focus. Keyboard users need to see where they are, which is the point of criterion 2.4.7 on visible focus. Do not remove focus outlines without a clear replacement.
  • Images. The W3C images tutorial explains how to write alt text according to an image's purpose, including when a decorative image should have empty alt text so it is skipped.

If you want a deeper treatment of accessibility for author websites, uniblog.org covers related how-to topics for writers.

Keep archives and reading lists honest

A quiet site also feels trustworthy, and dead links undo that quickly. When you list your published pieces or a reading list, link to the work itself, note where and when it appeared, and check the links on a schedule you can keep. Monthly or quarterly is realistic for most writers. Group pieces by theme or form if that helps readers more than strict chronology, and keep criticism separate from personal essays if you write in both.

Comments are a choice rather than a rule. Some writers value them, others find moderation takes time they would rather spend writing. If you leave them off, consider a clear contact route or newsletter reply address at the end of the piece instead.

A short checklist before you publish

  1. Text column no wider than about 80 characters, left-aligned.
  2. Line height around 1.5, with clear space between paragraphs.
  3. Body text contrast at least 4.5:1, checked in light and dark modes.
  4. No pop-ups over the text, no autoplay media, motion reduced where readers ask.
  5. Images sized so the layout does not shift as they load.
  6. Real headings, meaningful alt text and visible keyboard focus.
  7. Cookie use reviewed against current ICO guidance.

Read the page on your own phone, outdoors if you can. If you reach the end of a long piece without noticing the design, it is doing its job.