Web Interface Handbook / Typography

Lists

01 Text-list relationship

A list in the text looks strange if it follows immediately after the heading without preceding text or explanation.

02 Spacing between items

Short lists look good without extra space between items. Even if the list has no markers, it is clear that the items are separate lines.

If the list items consist of two or more lines, it is almost always better to make a sufficient gap between them. So that each item is separate and does not merge with the next.

03 Line spacing and rhythm

There is no reason to decrease the line spacing in list texts. Its value should be the same as in paragraphs. This preserves the rhythm and harmony of the entire text and the comfort of reading.

It's best to keep the rhythm of the text and make the spacing exactly the same as between regular paragraphs. This doesn't ruin the vertical rhythm, and the lists don't break up the narrative.

04 Markers

Numbered lists look much better if the items in them are in a circle with an accent color. This adds expression and attention to the list.

Decorative markers also work great in unnumbered lists. It's a great trick to add extra points of focus and draw users in to read the information.

But there's nothing wrong with the classic bulleted list. It's always the right solution, especially if the goal is not to distract users too much from reading the text.

05 Unstyled

If you make a list without markers, as a rule, the list shift to the right is not necessary either. The list can do without the offset if it has short item lines and each item has a sufficient gap.

Lists without markers are best started with text that is in bold. This will better direct the user's gaze and attention, making a list easier to read.

A list with explicit headings can be a good solution and a great way to present information in a more varied and interesting way.

Prev
Quotes
Next
Links