and CSS Length Units
0 reactions 2020-01-30
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.
The Refactoring UI guys note:
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.
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
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.
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
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
I know this is lazy, but I like to get real life magic numbers to try on my own things :)
- Leigh likes
- Patrick likes
- This person likes
- Tachyons uses a spartan
30remas base, with
20remas wide and narrow variants.
- Tailwind has a wide range from
- Bootstrap’s Containers use media queries and exact widths:
- Extra small devices (<768px): width: auto (or no width)
- Small Devices (≥576px): width:
- Medium Devices (≥768px): width:
- Larger Devices (≥992px): width:
- XLarge Devices (≥1200px): width:
- what else?
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.