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.

This site uses 50ch because the font, Georgia, is really readable—especially when it is very large, like it is here.

It 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:

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.

Demo

If you liked this post, you might like these ones, too

  1. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

  2. Create a JSON feed with 11ty

    🔥 A handy quick tip.

  3. Control changing numbers with font variant numeric

    Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.