Vertical Rhythm - Tutorial

Updated 1,874 Days AgoPublic

Actions

Keeping a nice, consistent vertical rhythm can have a significant, positive influence on how aesthetically pleasing your visual designs are. In this article I'll shortly explain what vertical rhythm is, and focus on tips on how to achieve it easily in CSS.

What is vertical rhythm?

Short answer: vertical rhythm means that the vertical flow of your design aligns with a set of horizontal lines, spread across at equal distances between each other:

an example from Typing golf

(The distance between those lines will be called *baseline height* throughout this article.)

Keeping the flow of the document/application in sync with a certain rhythm can have various benefits, as explained here:

• Why is Vertical Rhythm an Important Typography Practice? - is a very good article, give it a read!
• Improving Layout With Vertical Rhythm - has a few nice examples of vertical rhythm in action

Please give these articles a read and come back here once you're done for some practical CSS tips.

...

Ok, ready? Here we go.

The baseline height

The baseline is the main measure of rhythm - it's one of the most important choices to consider when designing for vertical rhythm. Think of it as a basic unit of length (height). It is the distance between the horizontal lines that all of the elements should align to.

*The above picture represents a baseline of 24px*

If there's an element that needs to be higher than 24px, either of those two things need to be true:

• the element's height is a multiple of the baseline height.
  
  For example, if the baseline height of the design is 24px, the element's height is 48, 72, 96 (...) px:
  
  >
  
  > the element height is an exact multiple of the baseline height

• the element's height is arbitrary, and padding, margins and/or line-height are used to align it to the closest multiple of the baseline height that is larger than it's element's height.
  
  For example: if the baseline height is 24px, and the height of element you want to include in your design is 30px, the closest larger multiple of the baseline height is 48. That means that you have to use 18px of vertical spacing to make the element align with the rhythm. Remember to divide the top and bottom vertical spacing equally!
  
  >
  
  > *the vertical margin of the element and it's height add up to a multiple of the baseline height*

Setting up your CSS for vertical rhythm

Now that you know what vertical rhythm is, how do you incorporate in your design? The truth is that it might be hard to add vertical rhythm to an already existing design - it's best to keep the concept in mind during the initial phases of the design process.

The rem trick

While beginning to design with vertical rhythm, you might be struck by two questions:

• what if the baseline I choose is too small or too large?
• what will happen to my design when viewed on a high-dpi screen?

Fortunately, there's a way to address both of these questions and it's best incorporated very early in your css-writing process. Ready? You have to ditch pixels in favor of rems in your entire style-sheet. Why? Here are some of the benefits:

• you can simply set your vertical rhythm measure (the baseline height) to 1rem. Now you don't have to calculate the mulitple of an arbitrary number - if an element's box height is a multiple of 1rem, it doesn't break the rhythm! More on that later.
• rems are adjustable - you can change how many pixels are in 1rem in your design. This means that you can dynamically change the measure of your rhythm even very late in the design process!
• rems are responsive - if handled properly, they will behave properly on screens with various pixel densities
• accessibility - some people have the default zoom level of websites set to over 100%, in order to help with things like vision impairment. rems behave nicely in such environments.

Disclaimer: the above benefits hold true as long as you don't use px anywhere in your style-sheet!

Keeping the rhythm with rems

When using rems for vertical rhythm, in practice it boils down pretty much to these "rules of thumb":

• keep all line-heights a multiple of 1rem
• ensure the vertical height of the box for each element (including padding and margins) adds up to a multiple of 1rem

There certainly is more nuance to the process, but if you apply precisely all the above rules to each element of your design, you should be fine 🙂

I'll keep this section up-to-date as I'll gather feedback on this article :)

Scaling rems

By default, on a regular screen, 1rem = 16px. But the meaning of 1rem can easily be changed to whatever measure you want! rem is defined as (via MDN):

represents the font-size of the root element (e.g. the font-size of the <html> element). When used on the font-size on this root element, it represents its initial value.

So, if it represents the font-size of the <html> element, and we can change the font-size of the <html> element, then we can change the size represented by the rem unit :)

Here's an example:

html {
   font-size: 24px; 
}

p {
   line-height: 1rem; /*  `1rem = 24px` everywhere in your style-sheet */
}

Using px is not a good idea here. We can get the same result, but more responsive, with:

html {
   font-size: 1.5em; /* 1em = (usually) 16px. 1.5em = 24px. 
                        If someone prefers their font-size to be larger 
                        (and configured their browser that way), their 
                        preference will be taken into account with this 
                        approach. */
}

p {
   line-height: 1rem; /*  `1rem = 24px` everywhere in your style-sheet */
}

Which baseline to choose?

Your baseline height should be 1rem. You can change the meaning of 1rem, as demonstrated above. I suggest you start with setting 1rem to 1.5em (which will result in 24px baseline on most screens), as it gives you certain benefits:

• 24px has many divisors, so for example you can use font-size: calc(2/3 * 1rem);, which will result in a pixel-perfect (16px) font size, without having to specify it in pixel units;
• it will give a nice breathing room for paragraphs with the familiar font-size of 16px when used as a baseline.

Caveats

• to keep the rhythm you need to set the line-height of p elements to 1rem. But, by default, p has a font-size of 1rem, as well - which gives a very crowded result:
  
  
  
  
  
  You can set the font-size to calc(2/3 * 1rem) (which will resolve into 16px on a default configuration) to give the text some more breathing room. You can either set this for p element only, but I recommend to set this for *all* elements:
  
  
  

Debugging vertical rhythm in your layout

I highly recommend using Basehold.it - it gives you a configurable one-liner that you can copy to your html to overlay it with a baseline to help you see if your design is in sync with your vertical rhythm.

If you discover that at some point, the vertical flow of your design starts to desynchronize with the overlay, it's time to debug. My method is to open up the Developer Tools, click the <img src="/uploads/default/original/1X/8505c2fc005bae51e08cc6f3816c7aa8f002ac30.png" width="27" height="28"> button and hover the mouse cursor over suspicious areas.

*Is the element's height a multiple of the specified basline height? In this example we can see that the height is a nice, round multiple of 24 - so it all checks out!*

For more complicated examples, look for details in the "Box model" view in Web Inspector:

*Here we can see that even though the height of the element (30px) is not a multiple of 24, the overall height of the box that contains the element is 48, so the element doesn't break the rhythm.*

Summary

By using rems all across your style-sheet you can preserve vertical rhythm with ease.

*Thanks for reading! Was this article clear and useful? Do you see any ways to improve? Did I leave out any important aspects of the subject? Please let me know :)*

PS. I have written a simple Vertical Rhythm CSS Reset to kick-start the design process. PRs welcome ;)