I've always found interface usability fascinating. Subtle differences in coloring, spacing, and layout can drastically impact the functionality of your application. I think it's important for programmers 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 recognition. 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 verification of a page's baseline, but it seems someone has already accomplished this. Baseliner provides a bookmarklet. 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 application, 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:
How important is this really? One of my favorite browser extensions, Readability, 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 difficulties in establishing 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 establishing an application's foundation. Next time you're working on a layout, give it a try and see what you think.