Research and Documentation
Page 01: Line Length

Summary

Line length is the length of a single line of text within a given text area. Line length can be measured in characters, in pixels, or in any other reasonable unit of length. For most webpages, the line length should be between 45 characters and 80 characters, inclusive. Text areas containing small amounts of text (e.g., captions, footnotes, etc.) may have line lengths outside of this range, but most other text areas should not. If the line length is excessive, users may struggle to keep track of their reading position within the text. If the line length is insufficient, the webpage may become very long, making remembering the webpage's textual contents more difficult. Ideally, the line length should be long enough to accommodate the amount of text to be displayed, but not so long that users struggle to keep track of their reading position.

Solution

One easy method of setting the line length of a text area using HTML and CSS is the following:

  1. In the HTML document that you'd like to change, add a <div> element.
  2. Within the <div> element, add a <p> element.
  3. In the connected CSS stylesheet, add a rule containing a declaration setting the padding of the <div> element to a positive value of your choice.
  4. Add a rule containing declarations setting the padding of the <p> element to 0 and the width of the <p> element to a value between 45ch and 80ch, inclusive.
  5. If the background-color of the <p> element is different than that of the containing <div> element, add an additional declaration to each corresponding rule, setting the background-color to the same value for both elements.

Resources

  1. Optimal line length for body text (a Figma guide) | Medium
  2. Typography | U.S. Web Design System
  3. Understanding measure/line length | Fonts Knowledge | Google Fonts
  4. Readability: The Optimal Line Length | Baymard Institute