Support reader mode

07 Jan 2020

Modern web browsers have a reader mode that makes articles easier to read by hiding ads and other visual distractions, and by using a more legible font instead of the tiny gray font that seems to be the trend. Most web visitors are on mobile devices with smaller screens so you need to make your content easy to read.

To activate reader mode, your content requires only two items:

  1. Clear page structure and hierarchy: you don’t need semantic HTML—simply place the content in a single container such as an <article>, <div>, or <span>.
  2. Several paragraphs: even though my blog follows item 1), shorter blog posts—including this one—don’t trigger reader mode on MacOS Safari.