Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

4 Simple Steps to Vertical Rhythm

By Shelly Wilson on Tuesday 21st of February 2012

Mentions of vertical rhythm and baseline grids seem to elicit either gushes of enthusiasm or looks of confusion. More often than not it’s the latter, and not without reason.

Firstly, using HTML and CSS to code means a lot of jumping back and forth and refreshing to visually confirm things. And even when we evade coding and work in design packages, it requires maths – not everyone’s strong suit.

The upshot is:

  • either we don’t bother using baseline grids and our vertical rhythm suffers; or
  • we create our grid and build to a vertical rhythm, but then constrain our experimentation with type because changing fonts and sizes means amending our maths to amend our grid.

At Typecast, we want designers to spend their time creating, not crunching numbers. So our new baseline feature gives you a visual to compose by and helps you get vertical rhythm – all without the mathematical gymnastics.

To show you what we mean, we had our designer Chris create a sample project that put our baseline feature to work and established vertical rhythm in four basic steps.

Rhythm and why it matters

Rhythm is just a repeated pattern. The more consistent the pattern, the better the rhythm. In music, it’s the structure that ties all the different instruments together. Even if the notes are correct, a song with an inconsistent rhythm is pretty hard to listen to.

In design, vertical rhythm is the structure that guides a reader’s eye through the content. Good vertical rhythm makes a layout more balanced and beautiful and its content more readable.

The time signature in sheet music visually depicts a song’s rhythm, while for us, the lines of the baseline grid depict the rhythm of our content and give us guidelines to align text and objects to.

Designing to a baseline in 4 basic steps

In Typecast, achieving a good vertical rhythm can be pretty easy. It all boils down to four basic steps. Here’s what to do:

1. Choose your fonts & sizes

Start by setting the hierarchy for your main content elements. Chris designed with Trade Gothic and Adelle and set his text sizes using a modular scale of 1.618 (the golden ratio).

The typographic hierarchy set to a modular scale

The typographic hierarchy set to a modular scale

2. Set your gridlines

Before you can make all of your content follow a rhythm, you need to set that rhythm by defining how far apart your grid’s lines will be positioned. Base this measurement on the line-height of one of your elements. Many set theirs to the body copy/<p> because it’s typically the element used for the majority of your layout’s copy.

When you hit the Baseline button in your project, Typecast will automatically set your grid to your body copy/<p> line-height for you. But you can easily change it if you need to – like if you prefer to work from your smallest element.

Baseline controls in Typecast

Typecast’s baseline tool automatically sets your baseline to your <p> line-height

Working from the <p> line-height suited Chris, so after a little playing around with the Typecast sliders, he decided that a line-height of 25px for his body copy looked about right and set the grid to it. This gave him a rhythmic structure to follow.

3. Set your other vertical spacings

To keep your layout in rhythm, you need to set the total vertical spacing for each element in proportion to your grid’s baseline measure. This means working in multiples of that value. So in Chris’ design, if every element’s line-height + margin heights = a multiple of 25, he’d have a perfect vertical rhythm. Here’s a simple example of what we mean by multiples of your baseline value:

Calculation of multiples for baseline project

Setting cumulative vertical measurements in proportion to the grid

The problem is, unless you’re working with only one text size, it’s rare for a page to have a flawless rhythm. Typographic contrast between your elements (like headings and copy in other columns) can disrupt it because the spacings that work best at those scales can be very different from what worked for your body copy.

Chris’ heading is a good example of this. It’s 42px. He initially set its line height to 50px, which is two times his grid value. But you can see at a glance that this was too much space.

50px line height in baseline project - too much space

Although in rhythm, a line-height of 50px creates too much space in the heading.

Chris felt that 40px was a more ideal line-height for it, and by ‘ideal’, we mean what looked best to his design eye for that text size and that line length. But at 40px, the text didn’t sit exactly between the lines, plus it put the body copy off rhythm.

Baseline project - 40px pushes body copy off rhythm

A more appropriate line-height for the heading pushes the body copy off rhythm

As Robert Bringhurst explains in The Elements of Typographic Style, interruptions like this are ok as long as we resume the rhythm afterwards:

“Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly [spaced] lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”

This is where Typecast’s baseline tool becomes super useful. It lets us follow Bringhurst’s lead PLUS forget the maths! You just choose the line-height that looks right to you, and then place your cursor in the margins’ value fields. When you press the up and down arrows on your keyboard, Typecast will automatically round the value to the nearest grid multiple, which will then push or pull your body copy back into rhythm.

Baseline project: Margin tool pushes body copy back in rhythm

Heading line-height set at 40px, with margins pushing body copy back into rhythm

4. Align your other columns

So that’s our inline rhythm sorted, but what about content in other columns? How do we make sure it aligns to our main copy?

You can use a technique called incremental leading (or incremental line-height in our case) to make it synch with your rhythm. Here’s our side column with 14px text. Spacing every line to align with the grid just didn’t look right.

Baseline project: Column set to perfect rhythm - too spaced

Adjacent copy set to a perfect rhythm can sometimes end up too widely spaced

So Chris used incremental leading to make every fifth line sit evenly between the gridlines. He did this by using the line-height sliders to reduce the line-height and watching until it:

  • looked ‘right’; and
  • re-aligned to the grid.

In this case, it looked right and re-aligned to every fifth line at around 20px.

Incremental leading allowed him to choose a more appropriate line-height for the content’s font size but still keep his his column copy in overall rhythm with the rest of his layout.

Baseline project: Column with incremental leading

Incremental leading can be used to align column copy to the main copy

The impact of vertical rhythm

Here are Chris’ designs with and without a baseline applied. At a glance, the difference between a consistent and inconsistent vertical rhythm can be visually subtle. But the rhythm can have a significant impact on readability, readers’ eye fatigue, etc. So it’s worth taking the time to make your rhythms better.

However, like all the tools at our disposal, a baseline grid is a means to an end. Sometimes you need to break the grid and use your judgement to get a design to ‘feel right’, and that’s ok; some great songs contain the odd change in tempo – it adds a bit of drama. The ultimate goal is improved readability, achieved through a more consistent vertical rhythm.

Try our baseline feature and see if you notice a difference in your designs.

You can also learn more about baseline grids and vertical rhythm in these great articles:

Setting Type on the Web to a Baseline Grid by Wilson Miner
Compose to a Vertical Rhythm by Richard Rutter

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus