Skip to main content

Content

For our content we need to have webpages with clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields.

Text alignment​

We should be consistent using left-aligned text.

Line length​

Controlling the length of lines of text helps readers’ attention flow easily from one line to the next, making reading more natural and comfortable. Most lines of text should be 45–90 characters. A good target for long texts is 66 characters. Text with greater line height can have a longer measure. Since of the function of measure is to help readers move from one line of text to another more naturally, the effects of a long measure can be lessened by increasing the space between lines. Thus, text with more space between lines can have somewhat longer line length. Short passages can have measure outside the ideal range. In contexts when users will be reading short passages of text (such as footnotes or alerts), you can safely set somewhat longer or shorter lines than usual.

Line Height​

Line height controls the vertical rhythm and density of a block of text. It is written as a unitless multiplier of the text’s font size — for instance, a line height of 1.5 on 16px text results in a line height of 24px. Readable text has a medium density. Strive for text that appears neither very dense nor loose. The reader typically shouldn’t notice the space between lines of text.

Whitespace​

The space around your content elements affects the relationship between these elements. Use less whitespace to group elements and more whitespace to distinguish them from each other. Don’t indent paragraphs, use whitespace before. While most longform print design uses indented lines to distinguish paragraphs, it’s more conventional on the web to use unindented paragraphs separated by whitespace. Use at least 1em of whitespace between paragraphs. To properly separate paragraphs from one another, use the equivalent of one blank line of whitespace between them. Using more than 1.5em disturbs the flow of the text, and using less than 0.5em doesn’t provide enough separation. Headings should be closer to the text they introduce than the text that preceeds them. It’s important that headings are more visually connected to the text for which they’re the heading than the text of the previous section to reduce ambiguity and cognitive dissonance. Use at least 1.5 times the amount of whitespace above the heading as below it.