Optimal line length

[Update 14 July 2015] The optimal line length tool has been updated with great contributions from Robert Vinluan).

For a while now, I have, for design and development purposes, needed an easy way of displaying line lengths: i.e, display the optimal line length of 50–80 characters per line in text columns.

A nice feature would also be if I could be alerted if the character count fell below or above 50–80 characters.

I tried a few ‘solutions’;

1. The very simple «add a colored marker after 70 charachters» A marker after 70 charachters is very unintrusive but a little too hard to spot when designing and testing responsive websites.

2. Wrapping the first three 70-charachter chunks in different background colors. Very visual but also very intrusive.

3. The bookmarklet that Chris Coyer from css Tricks built based on Clarissa Peterson’s css Dev Talk.

This is one of the more useful ones but the drawback is that it’s not persistent over page-reloads and I’ve had some issues using it when designing with Hammer for Mac.

So as you can see none of them works very well, I felt that I needed something more dynamic, something that was easy to see but not intrusive to the overall typographic composition.

I found Will Pattersons post about getting line count and length JavaScript and from that I started customizing my own solution.

I ended up with something that works as a proof of concept but I’m a way to shitty JavaScripter so I need help completing it.

So if you are in to JavaScript and would consider pitching in please head over to GitHub and improve my initial version:

A few of the things that I need help with is:

• More stable and precise charachter count.
• Just do the counting on the first 10 lines, not all as it is now.
• Count and display charachters in child elemets.

… or you can play around with it on Codepen:

See the Pen Optimal line length by Andreas Carlsson (@nofont) on CodePen.