Limit line lengths to increase readability

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.

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

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.

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.