Grow your CSS skills. Land your dream job.

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

Published by Chris Coyier

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

Comments

  1. Permalink to comment#

    Nice bookmarklet to check measure quickly. If good measure is the goal, why not set container width in ems? A character width is around half an em, so a 45-75 characters line is around 23-37ems.

    .goodmeasure{
        max-width:26em;
    }
    

    http://codepen.io/xavieralexandre/pen/qDjLI

  2. There’s also FlowType.JS created by Simplefocus.com.

    It’s actively being developed, I’m watching the repo and I receive comments all the time .

    One small problem it has is that it doesn’t show you how many character per line you have, but that’s something I’ve discussed with them already. If there’s anyone here that knows JavaScript like the Gods and want to help out, by all means, contact these guys.

    Chris’ demo is just plain clever as hell.

  3. JCD
    Permalink to comment#

    “Of course, there are exceptions to every rule and your mileage may vary”

    Like maybe the very article you just wrote :)
    CSS-Tricks articles are about 130-140 characters per line on a wide screen monitor. I don’t find them particularly annoying to read.

    • Sure. And on a wide screen monitor and on a site like this you kinda have the luxury of being able to resize that window at will.

  4. @ Xavier Clarissa (full disclosure: my awesome wife ;) does emphasize using ems over pixels, if you jump back to about slide 15 in her deck, she has a section discussing why designers need to embrace them, particularly for responsive designs / readability.

  5. I was looking for a solution for handling font size, for a website I built with twitter bootstrap’s flexi-width responsive solution. Thank you for this article, helping me at the right time :)

  6. Permalink to comment#

    Hi Chris,

    All what is being said look magical to a newbiew like me. Do you or this site offer training in web designing with special emphasis on CSS and PHP?

    I wish to go for the training and add the knowledge to my recently launched Blog consulting service.

    Thank you and looking forward to a positive response.

  7. dj
    Permalink to comment#

    Chris… As long as we’re talking font size here and user friendly readability levels, I’ve got a reasonably sized desktop wide monitor – nothing excessive. Tricks is one of the very few sites which seems to me to do “responsive” correctly. Way too many still use “nine-hundred down the middle with a couple of mobile device restructures.” Tricks uses most of my screen, very effectively, HOWEVER (using the bear analogies you are fond of) – for font size and eye strain – on a wide screen, desktop: your first paragraph on a single article post is “just right” for font size. Easy to see at chair distance, no eye strain, easy eye tracking. The rest of the body copy is “too small” to easily see at chair distance and I find myself slowing down and straining. And, the size of the comment font, well, I’ve got to hold the monitor in my hand like a phone and squint. (The photos are a good size though, you can recognize them from across the room.)

    I mention this cause I know you don’t mind the feedback like this and even though I know that you are trying to keep scrolling to a minimum I wonder if it’s time we take a re-think on responsive font-size breaks for the desktop range. Those of us with “man-sized” computers can tolerate a larger size font, really. We’ve got the space. For most of us, comments could even be two-up, they usually extend way, way below the side-bar column. (Now there’s a “trick” I haven’t seen before)

  8. npav
    Permalink to comment#

    I see this being used in a situation like how Twitter shows you how many letters over the limit you are.

  9. Permalink to comment#

    Nice, simple bookmarklet Chris and some even more powerful ones in the comments.

    Yet another thing to remember to check for and add to my checklist of best practise “things to do” when developing a new website.

    “The More I learn, the Less I Know.”

  10. Chris
    Permalink to comment#

    I’ve been looking into reading characters per line on the fly – so far the best approach I’ve found using non framework JS is by creating a duplicate array to the element and injecting spans on each word and checking each word’s offsetTop.

    I can then determine how many lines of type there are, then average that based on the characters in the element to get an approximation of characters per line.

    Or a more accurate way would be to inject a span around every character, get their offsetTop and stop the loop as soon as it finds a difference in offsetTop.

    I’m no javascript expert though, and my code is butt ugly. If anyone knows a way to get the offsetTop of a character without injecting a span let me know. I’d rather do it without jQuery if it’s possible.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".