Skip to content
A subway train waits in Torrent Avinguda Station, Valencia

Crafting the ideal line-length

Friday, December 4, 2020

At 414 words, this article should take about 2 minutes to read.

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;
}

Conclusion

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

Comments

In almost all cases, the comments section is a 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 Twitter (which is, in it's own way, a vile cesspool of Reply Guys, racists, and bots).

Thomas Banks

Thomas Banks

When I'm not building things for the internet, I take photos of stuff.
Loading Invisible Visible Navigation Close Arrow Info Online Online