Skip to content

Apologies for the appearance of the site. I'm designing in public!

A subway train waits in Torrent Avinguda Station, Valencia

Crafting the ideal line-length

Published on Friday, 4 December 2020.
At 299 words, this article should take about 2 minutes to read.
This article is more than 2 years old.

Robert Bringhurst, in The Elements of Typographic Style, puts a comfortable line-length between 45 and 75 characters. Thanks to the well-supported css value ch we can achieve this much more simply than before.

Declaring the font-size in rem (relative elastic measurements) means that all of the users who change their font size in the browser will have this change reflected in your website. In addition, using rem for other values (such as padding and margins) will adjust these in accordance making for a more fluid and, ultimately, more comfortable experience.

Finally, add to this a generous line-height (leading) to give the user enough negative space to comfortably read the content. These values are declared in em (elastic measurements) which means they will take their base value from the font-size of the element they have been applied to (as opposed to the rem which takes its base value from the font-size on the <html> element). em will help with maintenance in the future as values need only be changed in one place instead of two or three - nobody wants a 32px font on an 18px line-height!

p {
display: block;
width: 100%;
max-width: 67ch;
font-size: 1rem;
line-height: 1.5em;

With headings, the principles remain the same though the values change. Headings should be larger than regular body copy to provide visual feedback that this is a delineator - marking the start of a new section of content.

h2 {
display: block;
width: 100%;
font-size: 1.25rem;
max-width: calc(67ch / 1.25);
line-height: 1.5em;

To ensure all of your typographical elements have a nice comfortable space around them, use Heydon Pickering's Lobotomised Owl Selector!

*+* {
margin-top: 1.5em;


For larger blocks of text (think article body copy or legal pages), these settings provide a comfortable experience for the great majority of readers.



In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.

I don't want to have to deal with that kind of hell so I don't have a comments section.

If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).

onward-journeys module