The ideal measure on the web

This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

A while ago I created a tool to help you define the ideal length of line for text on the web. You can adjust a few variables, like font-family and language. When you slide the slider it shows you how many words there are on a line, or how many characters. You can now choose an ideal measure depending on the theory you like most (10 words or something between 45 and 75 characters). It turns out there’s a much easier way to define an ideal measure, according to Bringhurst.

In his book The Elements Of Typographic Style he writes that the measure, or length of line, is usually around 30 times the size of the type, but lines as little as 20 or as much as 40 times the type size fall within the expectable range. I’m so happy I work on the web. The size of the type on any element is always 1em. So this rule by Bringhurst translates to a measure of 30em (or anything between 20em and 40em, even though I do believe 40em is too much for many fonts).

If you’re forced to use weird units like the pt or the px you’ll have to calculate the measure. If your font-size is 14px, for instance, you’d have to calculate 14×30. Which is not too hard, but it’s definitely harder than 30em no matter the size of the font. If we decided our font-size should be 17px instead of 14px we would have to recalculate. But since we use the em we don’t have to.

I love the web

There’s a Russian translation of this article