Warning: Declaration of Thesis_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0
Vertical Rhythm

Vertical Rhythm

by Zack on May 23, 2009


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.


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.


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.


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.

Fatal error: Uncaught Error: Class 'thesis_comments' not found in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/comments.php:24 Stack trace: #0 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-includes/comment-template.php(1513): require() #1 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/loop.php(92): comments_template() #2 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/loop.php(8): thesis_single_loop() #3 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(66): thesis_loop_posts() #4 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(42): thesis_content_column() #5 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(25): thesis_columns() #6 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/frameworks.php(27): in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/comments.php on line 24