Task

Optimize text styling for legibility

Category: 
Appearance
Where: 
Style panel
When: 
Design
Check as complete

Designing text for readability and legibility are essential to a successful user experience. Appropriate text sizing and spacing ensure that visually-impaired people can read important text, and help those with cognitive disabilities to better focus on text blocks.

Let’s look at some ways to optimize your text for legibility.

Keep paragraph line spacing between 1.5 - 2

Open the Style panel > Typography to set your Height. We recommend using unitless spacing (as indicated by the “-”).

In the Typography section of the Style panel, you can edit various typography styles, like font, size, height and color.

Limit characters to less than 80 per line

Use the ch unit to set a container’s width based on the width of the character “O” for a given font

Learn more about ch on Webflow.

In the Size section of the Style panel you can set an element's width using the ch property.

Avoid centered, justified, or right-aligned text

Keeping justification to the left with a ragged right edge makes content easier to read for everyone.

  • Use left-aligned text for left-to-right (LTR) languages
  • Use right-aligned text for right-to-left (RTL) languages
  • Don’t justify text
  • Avoid centered text for more than one sentence on a page

Useful resources:

WCAG reference:

1.4.8 Visual Presentation

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress