Create Vertical Rhythm on Your Webpage

The technical side of typography can be a bit tough to grasp since it means dealing with numbers and proportions. However, it means that you will understand typography more and be able to adjust it to make better designs and better reading experiences. Vertical rhythm is the term that comes to mind when talking about typography on the web, which can be difficult to get right.

Through trial and error — adjusting spacing and sizing of fonts — you’ll figure out the right proportions to set a perfect vertical rhythm in motion.

SEE ALSO: Free Fonts for Web Design, Print and Products

What is Vertical Rhythm?

Now that I have introduced you to the term, let’s define vertical rhythm. In general, rhythm is a repeated pattern where the more consistent the pattern, the better the rhythm. When it comes to web design, vertical rhythm is how a viewer’s eyes scan content. The more consistent and balanced the pattern, the easier it is for the viewer to read.

Vertical Rhythm

Why Does it Matter?

Vertical rhythm is important because it allows a viewer to read content easier. When the rhythm is consistent, it is less straining to read content, resulting in a better overall experience. It is all about removing visual strains and barriers that get in the way of information.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Creating good vertical rhythm can be challenging. It is difficult to create a harmonious relationship between images and text on a website. There are a lot of questions you should be asking: Are the headlines too big? Are they too small? Is the spacing between paragraphs too big or too small?

It is all about getting the proportions right, which is not rocket science but it takes some figuring out. There is no magical number that works universally as vertical rhythms change from one design to the next. The good news is this is not actually that hard to figure out and get the hang of.

Understanding the Basics

There are three factors which affect vertical rhythm: Line height, font size and padding and/or margins. Let’s go over them one by one to figure out how you can calculate vertical rhythm.

Defining Font Size and Line Height

What you want to do first is to define the default font size and line height of body text. In order for the text to be read clearly, the spacing between the lines of text, or line height, needs to be spacious enough for the reader’s eye to skim across the text with ease. That’s what we are defining the in the example below.

body {
    font-size: 12px;
    line-height: 1.5;
}
p {
    font-size: 1em;
    line-height: 1.5em;
}

For the sake of the example, I will use 12px as the base size. I am then setting the line height at 1.5em, which would add 6px to the bottom of the text making the line height 18px. This is how we create basic units for line height and, therefore, vertical rhythm.

Measuring Margins

By default, browsers add margins to the top and bottom of paragraphs where rhythm can be messed up. A lot of browsers set the margin top and bottom at 1em, but in order to maintain a good rhythm margins need to be the same size as line height. When you think about it, this makes total sense because spacing between paragraphs is the same as spacing of individual lines, making everything nice and equal.

Resetting Margins

I’d actually recommend you do a hard reset on all elements with Mayer’s Reset, which gets rid of browser defaults for all elements. This is helpful because you are able to start with a clean slate on all browsers with no strange default settings that you have to worry about as you code.

For a quick and dirty way to get rid of unnecessary padding and margins from the various elements, follow the steps below:

* {
	padding: 0;
	margin: 0; 

}

Defining Margins

Whether you have a reset in place or not, we need to define margins for paragraphs. The difference here is that with the reset you are now defining margins where if you didn’t have it you’d be overriding browser-set defaults.

p {
    font-size: 1em; /* equiv 12px */
    line-height: 1.5em;
    margin: 1.5em 0;

}

As you can see above, we are simply defining margins to be the same as the line height. Of course, you can set the margins separately as margin-top and margin-bottom but that’s unnecessary for this example.

Setting the Remainder of Text

Paragraphs are not the only text type on the page. Let’s walk through how to set various heading sizes.

No matter what the text type, it should stick with the line height defined for paragraphs (for our example that is 18px). You can do this by adjusting the ems of various headings to match this line height.

H1

Define the h1 to be something easy like 2em which doubles the paragraph’s size. In order to keep the line height consistent with our paragraphs, we need to set the h1’s line height to be 1.5em. This in fact means that the h1 is bigger then line height so we will have to use margins to compensate for that.

h1 {
    font-size:  2em; /* equiv 24px */
    line-height: 1.5em;
    margin:  1.5em 0;
}

H2

The h2 will have to be a little smaller then h1. While keeping in mind the 18px line height, let’s set the h2 to have a height of 22px or 1.8333em. In order for the 18px line height to be preserved, we need to define h2’s line height and margin top and bottom to be 1.6364em. Why? Because 18/14 = .8181em, yet h2 is bigger than that. So, we simply need to double the line height and the top margin where 2* .8181 = 1.6364em.

h2 {
    font-size:  1.8333em; /* equiv 22px */
    line-height: 1.6364em;
    margin:  1.6364em 0;
}

H3 Through H6

By now you should get the idea behind setting vertical rhythm. I’m just going to provide you with the remainder of code for h3-h6 so you have the right measurements.

h3 {
    font-size:  1.6667em; /* equiv 20px */
    line-height: 1.8em;
    margin:  1.8em 0;
}
h4 {
    font-size:  1.5em; /* equiv 18px */
    line-height:  1em;
    margin:  2em 0;
}
h5 {
    font-size:  1.3333em; /* equiv 16px */
    line-height:  1.125em;
    margin:  2.25em 0;
}
h6 {
    font-size:  1.1667em; /* equiv 14px */
    line-height:  1.2857em;
    margin:  2.5714em 0;
}

Conclusion

I hope that you know have a pretty good idea of how vertical rhythm can be set in your CSS. It is actually a simple thing to define and it does so much for your website design.

Paula Borowska

Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book.

Newsletter

6 Comments
  1. Martin Jun 2, 12:48 pm

    I’d strongly suggest using REMs instead of EMs for font-sizing, especially in circumstances such as this where you need a consistent sizing mechanism. The additive nature of EM sizing would mean that only top-level elements would really have any predictability in terms of resultant font size, which would not be conducive to the creation of a global rhythm.

    Reply
    +5
  2. Maik Thoma Jun 2, 1:07 pm

    Never really understood how to calculate it, but this clears it all out.
    There is a handy tool online at type-scale.com which calculates is for you and spits out the css :)

    Reply
    +4
  3. Thomas Jun 2, 1:35 pm

    “Because 18/14 = .8181em” on the H” explanation is wrong – it has to be “18/22 = .8181em”

    Reply
    +3
    • Ralph Marchant Jun 3, 1:17 pm

      I have to concur, I think there is a typo on the H2 line-hieght calculation. It should be 18/22.

      Reply
      0
  4. joan Jun 2, 1:43 pm

    12px is too extremely small to read, especially for English text – instead of CJK text. I would recommend a 20px font size for Latin-based text. For CJK text, for limited typeface support, and for a CJK character would usually be about twice as wide as a Latin one is, 14-16px would be OK.

    Reply
    0
  5. Amar Jun 11, 2:09 am

    Great post!

    I tried your example using compass’s vertical rhythm library, and h5, h4 have line-height too big. Another thing i don’t like at vertical rhythm is that if a lower header like h5 is long enough to wrap in two rows the distance between rows is huge…. visually i do not like it,
    i rather prefer a line-height of 1.8 – 1.9em for a h5.

    IMO the baseline from h1 to h6 should lowering proportionally…

    I guess i dont understand this concept of vertical rhythm.

    ps: sorry for my english

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters