✎ Technique: Readable paragraph text

Source: https://accessibility.huit.harvard.edu/technique-paragraph-typesetting Parent: https://accessibility.huit.harvard.edu/design-readability

Paragraphs of text are a fundamental core of web content, so it's important to display them in a fashion that is optimally readable to the majority of your audience without requiring them to change their display settings. For people who do need to customize display of text to make it easier to read, it's important to support this customization rather than forcing them to read the text the way you specify.

For the most part, this means applying typesetting best practices, which predate the web.

Examples

✗ Bad example

p.bad {\ font-family: serif;\ line-height: 1;\ text-align: justify;\ }

There are a number of things wrong with this example:

The line-height or "leading" is too tight at just 1. There needs to be some space (although not too much!) between each run of text, to separate them. A value of 1.3 to 1.5 is optimal, depending on the font.
Justified text can produce readability issues for people with dyslexia and other conditions that affect reading and comprehension.
Justified text can produce unevenly enlarged spaces between certain words, sometimes known as "rivers".
The width of a paragraph is called the "measure." Measures that are too wide make it difficult for readers to scan back to find the start of the following line. In this case, it is not set at all, meaning it can easily grow too large on wider viewports.
The typeface is a serif font. While accessibility requirements do not mandate use of specific fonts, be aware that people who have online reading difficulties benefit from body text set using a clear, consistently formed and balanced sans-serif font.

Careful styling can help overcome these issues in HTML documents and in online documents that are published in other formats, such as Word or PDF, while also providing flexibility for people who need to customize text appearance.

Code editor

In the code editor, you'll find the bad example described above and an alternative. Try different fonts to see where the line-height and other metrics need to be adjusted.