feather

Featherweb Blog

Blog index

markus_winkler

Ideal line length

There are several ways to get the line length right, so that it does not fatigue the reader by either being too long or too short. One of the best solutions I saw was this article by the Baymard Institute. Basically it's saying anything between 50 and 75 characters is perfect from a reader's point of view.

Another approach is the "Two-and-a-half-alphabet" rule as explained by DigitalRelativity. Its result comes close to the above '50 to 75 characters'-rule. A line two to three alphabets long will almost always work well and look good.

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstvwxyz

This is a snippet I made in Geany. A very handy tool, just typing 'alph'(+Tab) creates it. Perfect for quickly checking your line length.

If you would like to copy it, this is its entry in 'snippets.conf':

alph=<div id="grad1">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstvwxyz</div>

To add the gradient colors, you also need to define the "grad1" in the stylesheet or in between <style> and </style> in the head of the document, like I did here.

#grad1 { height: 2.5rem; width: 50rem; background-image: linear-gradient(to right, red , red, orange, yellow, yellow, lightgreen, lightgreen, lightgreen, yellow); }

If your font is very small or very big, you might have to adjust the colors a little, so that the 'ideal length' falls nicely into the green zone, somewhere between two and three alphabets long. Just experiment by adding or removing colors, you'll discover it's easy.

I wrote this post out of curiosity.. I wanted to see how line length is decided nowadays. Until now, I just followed my instincts, without any rule, to arrive at a line length that looked good. Surprisingly that also works...more or less. But it's nice to see more logical minds have created these great helpers.


Feedback ⇆