Five killer ways to use vertical rhythm

This article first appeared in issue 229 of .net magazine – the world's best-selling magazine for web designers and developers.

One of the most important things you can focus on when it comes to laying out a page in HTML/CSS is vertical rhythm – the visual pattern that the blocks of type or lines of type form into as you scan down the page.

Other things can come to affect this rhythm such as headings, list items, images, and so on. Having good vertical rhythm is paramount because it helps the readability and scan-ability of your page(s).

There are quite a few great tutorials (See here and here, for example) on the web where you can find about how to technically achieve proper vertical rhythm by using ems for your line-height and learning about what keeping your type ‘in phase’ means.

Hierarchy

The basic things to pay close attention to are line-height between elements and overall visual hierarchy on the page. Setting proper line-height proportions can be an involved design exercise but it’s important to master. Hierarchy is also important, in that the images and text elements should be in harmony with each other visually – the most important things are generally larger and come first on the page.

Print designers have dealt with the idea of vertical rhythm for many years and it’s only within the recent past that web designers have had to really get into this stuff. With the ever-increasing need to build out websites using grid layouts and pay attention to responsive implementations to accommodate multiple screen widths, it’s more important now than ever before from a visual design perspective, probably more so than just a technical one.

Five examples to check out

1. The Elements of Typographic Style This book by Robert Bringhurst is the standard for typography study. Read it, consume it, pour it into your brain any way you can.

2. Frank Chimero Aside from being absolutely amazing in general, the recent redesign of designer Frank Chimero’s personal website exhibits a superb vertical rhythm. He uses a parallax effect to help drive the rhythm home as you scroll the page down too.

3. Dan Cederholm For a good example of great typographic vertical rhythm, take a look at Dan Cederholm’s blog. The line-height of the copy and headlines is in perfect proportion.

4. Focus Lab The web design and branding firm Focus Lab uses hierarchy deftly to help communicate what’s most important to the visitor.

5. Typofonderie The website for the Typography Studio Typofonderie has great vertical rhythm with it’s images and text. The spacing between elements are in proportion throughout the website and the hierarchy between the main image and secondary images/sections is perfect.

Discover 10 amazing examples of experimental design at Creative Bloq.