Improving the line length of our articles

This morning we pushed a change that should hopefully make our articles that bit easier to read. We reduced the line length.

Having fewer characters on a line makes that line easier to read. The 2014 article from Smashing Magazine, Balancing Line Length And Font Size In Responsive Web Design talks about, amongst other things “45 to 75 characters” being the optional line length.

There are several ways to achieve this, but the crux of it is make your lines shorter or your text bigger. We decided to do both!

We bumped up the article font size;

.main-article {
  font-size: 1.35rem;
}

And we used flex to separate our content and our ad block. We did this for two reasons.

• it gives us an easy way to reduce the overall line length
• we wanted the ads to be even more visually distinct from the copy of the site.

This needed a small HTML update, to allow us to have a .columns class we can apply flex to.

<div class="columns">
  <div class="ad-column"> ... </div>
  <div class="content-column"> ... </div>
</div>

Then some CSS to handle displaying everything. In our specific CSS this was all inside a media query, because on small screens we don’t need to both since the divs will stack as we need them to.

.columns {
  display: flex;
  gap: 4em;
  max-width: 100%;
}

.content-column {
  order: 1;
}

.ad-column {
  order: 2;
}

What I like about this change is now if our ad takes a second to pop in, there is no reflow on the page since there is nothing below them that can get pushed down. I also think this makes it easier to ignore the ad since it doesn’t nest within content.

As part of this work, we consolidated the font size in the articles, before the first paragraph was given some extra gravitas by having a larger font.

This worked well for some of our articles, specifically ones that had a very distinct lede, but for most it implied an importance that just wasn’t justified. That did mean I had to delete some CSS I quite liked;

.main-article > p:first-of-type {
  font-size: 1.25rem;
}

This said “the first time you see a p which is a direct descendant of .main-article.

We aren’t designers and I’m sure there are plenty of design faux pas made with the choice of font size and spacing we used, but this feels like an improvement. If you know better and would be so kind as to explain what we should improve, please feel free to get in touch.