Vertical Rhythm

by Zack on May 23, 2009

vert_rhythm_logo

The easiest way to spot the difference between the pros and the amateurs is vertical rhythm. You may have never heard of vertical rhythm, but you’ve seen it many times. It is easiest to see with columns of text. In this example we lay out two columns from text from Five Children and It. The column on the left has a break for chapter three.

vert_rhythm_off

The guides make it easy to see that the text after the chapter title on the left doesn’t line up with the text on the right. It happened because the chapter title text is a different size and the text after it was pushed down too far. The solution is adjusting the spacing so everything lines up in both columns.

vert_rhythm

Neatness counts

The guides make is easy to see the difference in the two examples above, but what if they weren’t there? Would you have even noticed the difference. Most people would notice the difference, but couldn’t tell you why. It happens on a subconscious level. It just feels messy and unprofessional.

Rhythm in design is like rhythm in music. It is the basic structure the song follows. When a song has a bad beat the professional musicians can tell you what’s wrong, but everyone can tell you its a bad song.

The two columns from the example above make it clear, but the same principle applies anywhere text and other elements —like larger text, images, or drawings— are mixed together. Vertical rhythm makes elements belong together when they are far apart. It doesn’t matter if the elements are separated by larger text, images, diagrams, or anything else.

Vertical rhythm and the Internet

On the printed page there is no excuse for poor vertical rhythm. Tools like InDesign make it easy to maintain vertical rhythm by letting you define a grid. Each line in the grid has a specific height in proportion to the text. They work because paper pages are a controlled environment that always stays the same size. In desktop software the screen size changes, but you retain enough control over the environment to make vertical rhythm possible.

The Internet is more fluid. The vagaries of HTML, different browsers, and different operating systems make vertical rhythm a tedious affair that can only be achieved with expertise and manual manipulation. And even then it normally breaks on untested systems.

Gridfox is your best friend

When you want to check vertical rhythm GridFox is your best friend. In this example the GridFox grid makes it very clear that we got off rhythm after the sample of contrast.

vert_rhythm_grid

You can try GridFox on this page as well. Just set a row height of 22 pixels and a top offset of 128 pixels.

In web design I restrict vertical rhythm perfection to landing pages and designer portfolio sites. It is only worth the effort when you’re making a first impression or really showing off. For the rest of your website good enough is good enough.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: