Line Lengths

and CSS Length Units

Yesterday I made an observation about blog line lengths that got a really unexpected amount of traction, and I thought I would write down what I know and learned.

What’s the big deal about line length?

The Refactoring UI guys note:

Keep your line length in check

When styling paragraphs, it’s easy to make the mistake of fitting the text to your layout instead of trying to create the best reading experience.

Usually this means lines that are too long, making text harder to read.

For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line. The easiest way to do this on the web is using em units, which are relative to the current font size. A width of 20-35em will get you in the right ballpark.

For the totally uninitiated: by default, content on a page goes from the extreme left of the screen to the extreme right of the screen. This just “looks ugly”, which is an unscientific term at best, but one plausible justification you can hang your hat on is that eyes get tired scanning left/right and prefer going up/down with scrolling.

The usual advice, from multiple sources, is to aim for about 45-80 characters per line, which works out to be 9-14 words per line. Of course this applies for blogs more than other types of sites and apps, but it is still applicable for other forms of site layout like landing page copy.

If you’re design blind like me, you won’t immediately believe how important this is. I went for 80 characters at first, but discovered that It feels good going as far down as 50.

CSS Units

So given the above advice, it seems an obvious immediate win to apply max-width: 69ch to your blog content blocks. However I found that most people don’t do this! Usually people seem to prefer specifying absolute pixels, or (rarer) using %’s of parent width, or (if you’re Basecamp) spanning the middle sections of a grid system.

I found that a big reason this happens is many people don’t seem to know the ch unit even exists! There are actually like a dozen length units in CSS, most of them not as useful.

Some people argued for ems over ch, on the basis that ch can be unpredictable as it based on the width of the 0 glyph. The counterargument is ch is apparently closer to the average letter length, and indeed you can easily verify this is so. 70ch is something like 35-40em‘s. If you’re really aiming for 70 chars per line anyway, which is more intuitive to use? However, there are some that feel intuition runs the other way in the bigger context of overall CSS architecture.

There are other approaches. Andy Bell and others use the “root rem plus vw viewport unit” trick. Basecamp ONLY uses CSS grid.

I don’t ultimately think it really matters what units you use - in the end the browser is going to convert it to pixels for you anyway and you just have to come up with something your readers can live with. If the rest of the elements in your design depend on your content width being pixel perfect (e.g. wanting header and footer to line up exactly with text) then you might have to use px, but of course you could equally do the same effect with any other unit.

I do think it’s easier to use px if you design in a design tool or on a grid, and ch if you “design in the browser” like I do. Designs with multiple fonts may also be inconsistent on what the ch means.

Managing Breakouts

Often in a blog you will want a consistent line length, but have some elements like images and code blocks “break out” of your content line to break the monotony and add emphasis. Dave Geddes has a wonderful approach mixing CSS Grid and minmaxing the ch unit.

Magic Numbers

I know this is lazy, but I like to get real life magic numbers to try on my own things :)

• Leigh likes 33em: https://twitter.com/ExcitedLeigh/status/1223007439760412672?s=20
• Patrick likes 44em: https://twitter.com/concreteniche/status/1222774565643751425?s=20
• This person likes 38rem: https://jrl.ninja/etc/1/
• Tachyons uses a spartan 30rem as base, with 34rem and 20rem as wide and narrow variants.
• Tailwind has a wide range from 20rem to 72rem. 28rem is medium.
• Bootstrap’s Containers use media queries and exact widths:
  • Extra small devices (<768px): width: auto (or no width)
  • Small Devices (≥576px): width: 540px
  • Medium Devices (≥768px): width: 720px
  • Larger Devices (≥992px): width: 960px
  • XLarge Devices (≥1200px): width: 1140px
• what else?

Preet also pointed me to this study on The Effects of Line Length on Reading Online News.

Try it yourself!

You can now edit line lengths of this blog.

Its line length starts off at a nice 69ch but if you hit “change theme” and opt to customize, you can edit it to whatever line length you like. Of course, you could always do this in browser devtools, but now you can do it on mobile too (where, admittedly, max width doesnt actually matter 😅).

This is still a WIP experimental feature (I still have to add persistence and maybe auth) but it has been a fun toy to play around with to make a site your own.