I've always found interface usability fas­ci­nat­ing. Subtle dif­fer­ences in coloring, spacing, and layout can dras­ti­cal­ly impact the func­tion­al­i­ty of your ap­pli­ca­tion. I think it's important for pro­gram­mers to understand some of the basic principals of usability.

A few years back, I read about a design concept referred to as Vertical Rhythm. The way I like to think about it is to imagine a web page as a sheet of lined paper. All text is written upon the lines, which is referred to as the baseline. A heading could pass through multiple lines, but it shouldn't impact the following text's ability to align with the baseline.

Why go through the effort of creating a repetitive baseline? People are extremely good at pattern recog­ni­tion. If we utilize this skill set, our interfaces will feel natural to use. When skimming text, a consistent baseline makes it easier to read, because the text lands in the location expected by our brains.

I set out today with the intent to write a script to assist ver­i­fi­ca­tion of a page's baseline, but it seems someone has already ac­com­plished this. Baseliner provides a book­marklet. When executed on a page, it will overlay a series of horizontal lines. These lines can be adjusted to match your page's line-height and layout. At the time of writing, this page has a grid size of 21 with an offset of 15.

Like all things CSS, numerous styling issues can arise. When styling your web ap­pli­ca­tion, keep the following in mind:

• Top margins will collapse into previous tag's bottom margin.
• Images may not be a multiple of the line-height.
• Headings whose line-height is not a multiple of the baseline line-height will cause issues if wrapped.

When I initially discovered vertical rhythm, there wasn't much written on the web covering the subject. That has changed. If this interests you, I suggest check out the following:

• CSS Baseline: The Good, The Bad and The Ugly
• Main­tain­ing Vertical Rhythm

How important is this really? One of my favorite browser extensions, Read­abil­i­ty, which reformats poorly laid out blogs, doesn't maintain vertical rhythm. Nor does Wikipedia. Ironically, neither does the Baseliner page or the two links above. In fact, I couldn't find a single site that followed this advice.

Does that mean it's wrong? The lack of a consistent baseline on the web could be due to the dif­fi­cul­ties in es­tab­lish­ing rhythm with CSS. Or, it could be that there are more optimal spacing practices. In the end, I don't really know whether it's right or wrong. Regardless, this principle isn't dogma. It's a tool, just like the color wheel. For someone who is not a designer, I find it useful in es­tab­lish­ing an ap­pli­ca­tion's foundation. Next time you're working on a layout, give it a try and see what you think.