Optimal line length

Thursday, 4 June, 2015

Here is a little tool to help you find the optimal line length in your responsive designs.

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 5080 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 5080 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:

Fork “Optimal line length” on GitHub

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

… or you can play around with it on Codepen:

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