Robert Haverly

The “Line-Height-Laziness” Problem

I see this a lot. The infamous one-shot line height, where every line takes up the same level of vertical space. This works great, and is often used in CSS to set the height of certain elements like buttons, list-items, headers, inputs, and other block and inline-block level elements within a website. The problem, however, arises when attention isn’t paid to detail (big surprise there), and that universal line height bleeds over into textual elements.

In a scan-and-skim generation where users will often absorb everything they can on a website within the first 5 seconds, and then decide where to go next, the relationship between information is arguably as important as the information itself. To put that into perspective, let’s say you have the follow pieces of information on a page: A brand name and/or element, a catch phrase, a navigation of some sort, the name of a product, a picture of the product, information on the product, an up-sell for the product, some social links, a phone number, and a contact form. That’s 10 things, which incidentally gives a user only half of a second (500 milliseconds!) to locate, identify, decide on importance, and then (hopefully) retain each one of those 10 pieces of content. Now what does that mean? Well, it means a lot. But what it means right now, is that you have no time to waste on someone doing a double take.

Now for the example. I recently came across this problem on one of the largest and most used file hosting websites on the internet: Rapid Share (sorry Rapid Share. I love you, but I have to make an example out of you). If you’ve used Rapid Share even once, then you’re all to familiar with this screen. But for those of you who aren’t, I’ll give you a quick rundown: Rapid Share offers paid and free/public accounts. If you end up on Rapid Share and try to download something with a free/public account, you’re required to wait for your download, during which time you’re bombarded with excessive, intolerable, and sometimes even intentionally confusing up-sells. This is one of about 4 on any given page.

So what’s wrong with this? Sorry, that’s a trick question… there’s a lot wrong with it. But what we’re talking about right now, is the giant error in line height, which forced me to do a double take, and wasted my time as a user and potential customer. That’s right: the “list” is the culprit here. Aside from the text being centered, every line has the same height. Including the last line, which should not, for any reason, have the same height as the others. Why not? Well… it’s not a new list item, yet due to the line height conventions established by the former list items, you’re forced to read it as if it were a new bullet. Which of course is not legible, because it’s a continuation of a bullet point, and not a new one.

As you can see, simply lining the bullets up and not forcing every line to have identical height allows for a much more scannable chunk of information. While this is still not perfect, it’s a good example of how easy it is to drastically improve readability and user experience across a large scale website.

Don’t fall prey to line-height-laziness.

Original Article