Sync & Rhythm – How’s Your Type?

Posted on 22. Oct, 2010 by Dan Stark in Articles

An Introduction

Many web designers and developers make use of css grids and frameworks in order to shorten production periods, simplify development, and help them create more uniform layouts for their designs. This is brilliant when we are considering the horizontal plain, the x-axis, left to right, etc, but what about the vertical plain, the y-axis, top to bottom?

Typography and its impact upon a design is a topic that is increasingly becoming more and more relevant to today’s designers and developers. Of all the content on the web, a good 95% is typography. Despite this, and despite the very nature of a grid, hardly any of the css frameworks include a vertical grid.

A vertical grid? you ask.

Every single book you have ever read sits upon a vertical grid. This is known as vertical rhythm, and, in practise, is the exact same thing as the css grids we are all used to, only applied to the vertical, or y-axis. Traditionally, vertical rhythm is the arrangement of a given page’s text, as the reader moves down the page.

But this is the web! 2010!!

Perfect! This means we can take vertical rhythm to the next level! We must take into account the fact that whilst the web might be comprised mainly of text, there are also images, videos, audio clips… The list goes on. And this is where synchronicity comes in. If the same vertical rhythm principles are applied to these more modern elements, we can construct works of art to truly do justice to the websites we use every day!

Having vertical rhythm in your web pages can do a lot of good for you. Having rhythm greatly increases the legibility of your typographic elements. It allows you to synchronise the flow of content. It allows you, right from the planning/wireframing stage, to project how your page will look, both from left to right, and up and down. Lastly, but perhaps most importantly, having vertical rhythm in your web pages adds a layer of subtle beauty to your typography as a whole.

Get that rhythm beating!

To achieve vertical sync & rhythm on the web, there are a few habits we need to develop. It may come as no surprise to you that the three or four (depending on the element and the desired effect) rules we will use to devise our rhythm are line-height, font-size, and padding/margin. These three or four factors must be calculated with care in order to keep the rhythm going. We will discuss some best practises later in the article, but for now, let us learn!

The first step to establishing vertical rhythm is to decide upon a line-height. To establish a line-height, we must pick a typographical scale to work from. As per proper typographical practise for flexible, accessible type, we will set our body element’s font-size at 100% (for full browser font-sizing support). This is equal to 16px, or 1em. The code is as follows:

body {
     font-size: 100%; /* 16 pixels */
}

Note how we have set a font-size to the body element of 16px, yet we have set no line-height. If we set a single line-height to the entire body, none of our individual elements would have any rhythm! We will need to apply our rules to each individual text element. As it is arguably the most used text element, we should start with paragraphs. At this point, we also need to establish a line-height for the document.

This is also where we need to start thinking in advance! We need to apply a line-height to our paragraph element, whilst ensuring that both larger and smaller text elements will be able to fit into our rhythm. To this effect, we will use a line-height of 24px. This gives us 4px of space above and below our paragraphs, and allows for larger headings, and smaller text (if needed). Diagram 1 below shows how text is rendered by the browser:

So, to apply this to the main text elements of our page, we would use the following code:

p {
     line-height: 1.5em;
}
h1 {
     font-size: 2.25em; /* 36px */
     line-height: 1.3333em; /* 48px */
}
h2 {
     font-size: 1.875em; /* 30px */
     line-height: 1.6em; /* 48px */
}
h3 {
     font-size: 1.5em; /* 24px */
     line-height: 1em; /* 24px */
}
h4 {
     font-size: 1.125em; /* 18px */
     line-height: 1.3333em; /* 24px */
}
h5, h6 {
     font-size: 1em; /* 16px */
     line-height: 1.5em; /* 24px */
}
.note {
     font-size: 0.875em; /* 14px */
     line-height: 1.7143em; /* 24px */
}
.fineprint {
     font-size: 0.625em; /* 10px */
     line-height: 2.4em; /* 24px */
}

If you look at this example, you can see how we have attributed each of the main text elements with its own height, and line-height. Notice that for the heading elements that are larger than the original 24px line-height, we double it, to 48px.

Now that we have set the rhythm going at 24px, we need to maintain it! It is very easy to lose rhythm in the gaps between one element and the next. This is because the default behaviour of most browsers is to set the margin at a flat 1em. So, unless every text element on your page is the exact same size as the value you set on the body element, it is going to throw your rhythm off. Close attention to detail is essential if you want to achieve true vertical rhythm!

So… to the magic sauce! How do we give our text rhythm? Here goes… Our base measure of rhythm is the value of the default font-size’s (body element, 16px) line-height: 24px. Therefore, as we move down the page, we do so in increments of 24px, as per diagram 2, below:

As we saw before, with the font-sizes that are larger than our base line-height of 24px, we double it. Each time we exceed the height of the line i.e. 24px, we go up, in multiples of 24. For example, 24, 48, 72, 96, 120, 144, etc. This keeps the rhythm going within the same element.

So, we have our increments in place. We have our text element sizes in place. We now need to add margins, in order to give our type the breathing room it deserves. There are several options available to us here, that become increasingly beneficial as our text sizes grow. A technique used often is to add 1 line-height’s worth of margin below a text element. We will apply this to our paragraph element, as follows:

p {
     line-height: 1.5em;
     margin: 0 0 1.5em 0;
}

At this point, we come to our other text elements, the H1-6 elements, and the .note and .fineprint classes. This is where the extra options come in. As the font-size increases, there is more and more space between each 24/48/72px increment. What this means is that we could, by carefully calculating the margins of each element, place the actual text anywhere, vertically, inside it’s specified line-height.

Unfortunately, that kind of advanced typography is best suited to it’s own article. In this article, we will be setting our elements with a margin-bottom of 0px, allowing more breathing room above the text. This means that margin-top will be taking up the slack and keeping our elements in the vertical rhythm! The code we need is as follows:

h1 {
     font-size: 2.25em; /* 36px */
     line-height: 1.3333em; /* 48px */
     margin-top: 0.6667em;
     margin-bottom: 0em;
}
h2 {
     font-size: 1.875em; /* 30px */
     line-height: 1.6em; /* 48px */
     margin-top: 0.8em;
     margin-bottom: 0em;
}
h3 {
     font-size: 1.5em; /* 24px */
     line-height: 1em; /* 24px */
     margin-top: 1em;
     margin-bottom: 0em;
}
h4 {
     font-size: 1.125em; /* 18px */
     line-height: 1.3333em; /* 24px */
     margin-top: 1.3333em;
     margin-bottom: 0em;
}
h5, h6 {
     font-size: 1em; /* 16px */
     line-height: 1.5em; /* 24px */
     margin-top: 1.5em;
     margin-bottom: 0em;
}
.note {
     font-size: 0.875em; /* 14px */
     line-height: 1.7143em; /* 24px */
     margin-top: 1.7143em;
     margin-bottom: 0em;
}
.fineprint {
     font-size: 0.625em; /* 10px */
     line-height: 2.4em; /* 24px */
     margin-top: 2.4em;
     margin-bottom: 0em;
}

Got rhythm, gettin’ heavy

This example shows what you should be looking at right about now. We have achieved vertical rhythm! By carefully calculating the size, line-height and margins of our text elements, we have created a flowing, perfectly-structured piece of typography. There are, of course, many more, and varied elements that we need to include in our websites these days, such as lists, images, video. The same principles that applied to the elements we have already covered, apply to everything else.

There are two more elements I will cover in this tutorial; in-line images, and borders. Why? Like gaps between elements, whole elements themselves have the ability, if not properly catered for, to throw your page off its rhythm.

Images

An in-line image obviously has a vertical height. Often, quite a large height. There are two methods of getting around this issue, and they even work in conjunction with each other!

Firstly, the method of using margin and padding to place the image within the rhythm is employed, and although there is no line-height, there is, well, height. The second method for ensuring your images are synchronised with your type is to set the height of the image in increments of your baseline line-height. In this instance, we would use, as before, increments of 24px, and the code follows as:

p img {
     float: left;
     margin: 1em 1em 0 0.5em; /* 16px 16px 0 8px */
     padding: 0;
}

Borders

Horizontal borders are a sure-fire way to destroy your rhythm if you do not account for them. Remember, for every pixel you add, something else, usually a padding, or margin, has to give, in order to maintain rhythm. As an example, a 5px border would, logically, push down the document by 5px. This slack has to be picked up, and kept in line with our interval of 24px. By way of example, consider the following:

body {
     font-size: 100%; /* 16px */
     font: Georgia, serif;
     border-top: 0.5em solid #444; /* 8px */
     margin-top: 1em; /*16px */
}

Almost made it

So, we’ve discussed the ins, the outs, and the how to’s. When we put all of this together, and couple it with some minimal styling, we can achieve some quite simple, but very effective typography. In this final example, the elements are drawn together, and we can see exactly the benefits vertical sync & rhythm can bring to your projects.

This method of setting type on the web is a little less simple than just working your way down the page, adding space here and there. It does require some fore-thought, some planning, and a little simple math. I leave you with a few considerations and best practises that I have learned in my time as a creator of websites. I hope you have found this article interesting and helpful, and I would love to hear your thoughts on this subject!

A parting gift, for your consideration…

The most precise method of implementing vertical rhythm is to use em’s, as opposed to pixels. This is because em’s are a true typographical measure, whereas pixels are governed first and foremost by the myriad of browser rendering engines available.

If you use an element, and the element occupies any vertical space, you need to calculate appropriate margins and padding to keep the element rhyming vertically.

Vertical rhythm is not always essential to achieving beautiful typography on the web. There are some kinds of application where it is more suitable than others. A good example of vertical rhythm being put to use is on a blog, where a user might read for more extensive periods of time.

Tweet

About the Author

Dan Stark is a 23 year old father and freelance web designer & developer with a strong passion for web typography, illustration, and tea. When not working for clients, he can often be found downhill mountain biking, or working on one of several web projects.

YOU MAY ALSO ENJOY:

• Create Texture Shadowed Type In Photoshop
• Create a Watercolor Text Effect in Photoshop
• 60 Amazing Typography-Based Posters
• 10 WordPress Plugins For Enhancing Typography
• 30 Awesome Examples Of Typography Animation

Tags: typography