running words around
design education and visual communication
authored by chris m hughes

Vertical Rhythm and How to Get It

Saturday, 24 October 2009

William S. Burroughs once said that 'writing is fifty years behind painting', and in the digital design world, this idea could equally be applied to print typography and its relatively cumbersome and youthful web-based cousin.

But with more print-based designers now delivering for the web, one consequence has been a huge amount of interest in web typography, as print-based ideas and techniques transfer from page to screen. And of course, a lot of it is down to CSS and standardisation across the major browsers.

With the new versions of Safari, Opera and Mozilla's Firefox all able to support CSS3, we not only have styling that can (to varying degrees) emulate tracking, leading and kerning, we've also got the ability to switch between cases, apply drop shadows, and reliably import any font we want into browsers using the @font-face property.

One further concept coming into the mix is 'vertical rhythm' - the way text can be aligned to a baseline grid that produces measured, balanced paragraphs which greatly improve readability.

It's old hat for print-based designers working in Adobe InDesign, but only a tiny minority of web designers attempt to control their text in this way. This is because its time-consuming to do and requires a solid knowledge of CSS.

But the pay-off is great looking text and a harmonious layout.

The basic idea behind vertical rhythm is to keep text lined up on an imaginary grid of evenly spaced horizontal lines (just like an old school jotter), all the way down the page. This greatly improves legibility, and creates a visual continuity that allows readers to spend a bit longer in front of the screen.

How is all this done? By controlling font size, line-height, and margins.

The key is to set the line-height globally, so it's height is inherited all the way down through the page, and to use relative font sizing rather than pixels to display text. In both instances, the measurements are done using em's, not pixels.

Because the em is a relative measurement based on the square of the font size at that particular point, sizings become scaleable for different browser settings. Everything maintains proportion, and the designer has better control over text size, line-height and margins.

There are some very good articles out there on how its all done. One standout example is 'Setting Type on the Web to a Baseline Grid' by Wilson Miner, posted on alistapart.com. There are also a few CSS generators available online that will customise a set of em-based global styles for you, which you can then tweak and paste into your css files.

All I would say is that although its tricky, its worth pursuing to get the balanced rhythm a good typographer would expect on a printed page, and you can then re-use your settings for other web projects.

From a teaching perspective, it also means that the theory and technicalities of typography can be delivered in a more blended approach across the print and web disiplines.

More :
CSS Vertical Rhythm Generator
Vertical Motion in Web Typography
Typography : Baseline Rhythm Deciphered