Bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing)

Recently at the CSS Dev Talk, I attended Clarissa Peterson’s talk on responsive web typography. One part of it was about line length and readability. Of course, there are exceptions to every rule and your mileage may vary, but the traditional thinking is that body copy (long text, multiple paragraphs, takes more than a glance to read…) should be between 45 and 75 characters per line to be comfortable. Shorter is awkward, longer makes it easy to lose your place and find the next line.

In a world of fixed width designs, getting that text to be between 45-75 characters per line is fairly easy. You pick a goody body copy font, you adjust the size of the font and width of the container to be about right.

But what do you do in a world of flexy widths?

Well, just because the container width might flex in width, it doesn’t mean you have to sacrifice a comfortable reading line length. You can adjust the width of the container as well as the font-size at certain breakpoints (media queries) to get it as close as possible. Remember it doesn’t need to be exact, this isn’t a hard science.

But how do you test how many characters are on a particular line? Clarissa’s had a clever idea to just count over 45 characters and put a span that you style to change the color of the text, and then close that span at 75 characters. That way you can visually see where those breaks are. Here’s Clarissa’s slides (embedded), on the slide with the span idea:

I thought that might be a neat thing to automate, so you could use it on any site. Bookmarklet’s are great for that. So here we are:

See the Pen Bookmarklet to make the text between 45 and 75 characters turn red. by Chris Coyier (@chriscoyier) on CodePen

You drag that button up to your bookmarks bar, then click it on any site you want to use it on. First you click it to activate it, then you click it on a body copy element (like a paragraph). Then you can resize the window around to see where the line is breaking and try to get it close.

I didn’t use any fancy algorithms here, but just by tweaking things around I got pretty close on a simple centered column of text:

Which comes from this CSS:

body {
  font-family: "Lucida Grande", sans-serif;
  margin: 20px auto;
  width: 95%;
  font-size: 70%;
  line-height: 1.4;
}
@media (min-width: 400px) {
  body { width: 90%; font-size: 75%; }
}
@media (min-width: 700px) {
  body { width: 80%; font-size: 90%; }
}
@media (min-width: 850px) {
  body { width: 70%; font-size: 100%; }
}
@media (min-width: 1000px) {
  body { width: 60%; font-size: 110%; }
}
@media (min-width: 1100px) {
  body { width: 50%; font-size: 115%;}
}
@media (min-width: 1450px) {
  body { width: 40%; font-size: 125%; }
}