Paragraph Width

Paragraphs should be in between 50 and 70 characters of width¹. Too wide paragraphs will make readers take big horizontal movements when starting a new line. Too small paragraphs break the flow of reading text.

When working with CSS the ch unit can be used to achieve this. The ch unit is defined as:

“Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.”

In proportional typefaces, 1ch is usually around 20% wider than the average character width². This makes the optimal paragraph width in CSS between 40ch and 60ch:

p {
    max-width: 55ch;
}

Fonts can however vary in their width. It is best to experiment width the value on each font to determine the best paragraph width. Be careful with using the ch unit when using system fonts (system-ui). Because different operating systems have different system fonts the width is not consistent across all devices.