Readable

A jQuery plugin by @mds

Introducing Readable, a jQuery plugin to help you create optimally sized paragraphs for maximum readability. Toggle the switch in the lower right corner to see it in action. It conveniently marks the 45th and 75th character of every paragraph tag when turned on. Your paragraph line breaks should fall somewhere in between those two numbers. If that’s not happening, then you’ve got some tweaking to do. View it on GitHub

Typography

Good typography can make or break a web design. There are lots of subtle nuances that deserve attention when laying out your type and one of those nuances is optimal line width, measured by character count.

Optimal varies depending on whether or not your text is multi-column like a magazine or single column like 99% of web-based blocks of copy. Either way, the character count of one line is a major contributor to the overall readability of your content. Readability is like Ron Burgundy—kind of a big deal.

For those of us creating websites for a living, our magic character count falls somewhere in between 45–75. These numbers refer to the number of characters occupying one line of text within a paragraph, before a line break and text wrap. If that number is too low or too high, the paragraph becomes much less readable.

Too Small

When the line count is below 45 characters, the paragraph becomes very tight. It’s hard to fully soak up information in a tiny paragraph without scanning left and right like a mad man.

Too Big

On the flip side, if your text extends past 75 characters on one line, the paragraph feels long and overwhelming. It’s not very scannable, readable, or very nice to look at overall.

The Sweet Spot

If we know that our paragraphs need to be between 45 and 75 characters, how are we supposed to measure them quickly and efficiently while testing layouts in the browser? Some people have resorted to manually adding an asterisk at the 45th and 75th character, and there’s certainly nothing wrong with that technique.

But in my quest for automated typographic perfection I wanted a way to visually see what target I was shooting for. Readable creates that target.

How it works

The content of each paragraph tag is converted into a text string right after we duplicate it as a data attribute for safe keeping. The text string is then counted using the .substring() function to find the 45–75 sweet spot. We then pop in a span tag with a "readable" class. This gives us what we need to create the styles. Once the toggle is switched off, we reinsert the original html content back into the paragraph using the preserved html from the data attribute. If you want to dig deeper, view it on GitHub.

Resources