Limit line lengths to increase readability

Categories

It’s a really good idea to limit your line-lengths to increase readability. Use the ch unit, which is equal to the width of a 0 character in the rendered font.

It’s recommended to keep flow content, like articles to between 60-75ch. This all very much depends on your typeface and size, though, so it’s something to visually tweak.

This site uses 65ch, which is nearer the lower-end of the scale. It all comes down to a combination of rules—like in this quick tip—and visual tweaks.

Here’s how you do it with CSS and for this demo, we’ll target the <article> element, globally:

Code language
CSS
article {
  max-width: 60ch;
}

This is the sort of tiny tweak that can really make a huge, positive impact on your user’s experience.


Comments

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me