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

Crafting the ideal line-length

Friday, 4 December 2020

At 315 words, this article should take about 1 minute to read.

This article is more than a year old and the information in it may be out of date.

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).

Thomas Rigby

Thomas Rigby

When I'm not building things for the internet, I take photos of stuff.

Pronouns: he/him/his

Real. Simple. Syndication.

Get my latest content in your favorite RSS reader. I use InoReader but you don't have to.

What even is an RSS feed?!


Last played

Burn the Bitch

Ulver || Svidd Neger

Loading Invisible Visible RSS Navigation Close Arrow Info Online Online