A little tool to help you ﬁnd optimal line length in responsive designs.
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
A nice feature would also be if I could be alerted if the character count fell below or above
I tried a few ‘solutions’;
The very simple «add a colored marker after
70charachters» A marker after 70charachters is very unintrusive but a little too hard to spot when designing and testing responsive websites.
Wrapping the ﬁrst three
70-charachter chunks in different background colors. Very visual but also very intrusive.
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.
A few of the things that I need help with is:
- More stable and precise charachter count.
- Just do the counting on the ﬁrst
10lines, 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.