Vertical Layout and Typography Part 2: Vertical Rhythm and Baselines

January 5, 2013

Tweet

This is part two of my series of resources on incorporating vertical layout into web design and development. Part 1: Modular Scale provided resources on how to set up a Modular Scaling system for your fonts. To do this you choose a ratio and stick to it in choosing the size of your fonts. This provides consistency in your design and provides the base for thinking about your vertical layout.

The next step in moving toward perfecting a vertical rhythm in your web design is to choose a baseline. The baseline is a standard line-height upon which your vertical rhythm, and thus all of your fonts’ line-heights are based on. Like how a horizontal grid system provides a rational way to layout your site, the baseline provides a vertical grid system.

A good choice for your baseline is to use your primary font-size’s line-height. Let’s say your font’s size is 16px and you want you’re line-height to be 1.5 times your font-size. This would make the font’s line-height and thus your baseline 24px.

The resources below are great for delving further into how to use a baseline. These are articles I have found in my own quest to incorporate these techniques.

Basehold.it

Basehold.it is a javascript plug-in that provides an overlay on your site that acts as guides for your vertical rhythm. I’m providing this first so that you can see what a baseline is first hand. They also have a great little blurb about the use of baseline.

24 WAYS: Compose to a Vertical Rhythm

A great article by Richard Rutter from 2006. He goes over the importance of using a baseline as well as how you may incorporate your baseline using css and some math. It also begins with a fabulous quote from Robert Bringhurst.

“Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.”

COMPASS: Sassy Vertical Rhythm

For those of you using SASS and Compass (if you aren’t I highly suggest learning about both), Compass provides an extension for vertical rhythm that sets your baseline for you and provides several mixing for maintaining you vertical rhythm, and for using margins, paddings, and horizontal borders.

Vertical Rhythm with Compass Video Tutorial

A very helpful video tutorial to help you get started with using Compass’s vertical rhythm extension.

Baseline.js

The height of images also effects your vertical rhythm. Baseline.js is a great javascript plug-in that forces your images’ heights to adhere by your chosen baseline.

THE SHEEP: Setting a Vertical Rhythm

For those of you not using SASS this is a great article about doing the math to create your own modular scale in CSS. Its a great read and helps to clarify what considerations must be made.

Grids, Layout, Typography, Web Design and Development