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:
> {F28701 size=full}
> *an example from [Typing golf](http://golf.sealcode.org/)*
(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?](http://zellwk.com/blog/why-vertical-rhythms/) - is a **very** good article, give it a read!
* [Improving Layout With Vertical Rhythm](http://webdesign.tutsplus.com/articles/improving-layout-with-vertical-rhythm--webdesign-14070) - 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.
> {F28703 size=full}
> *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:
> {F28705 size=full}
>
*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!
> {F28707 size=full}
> *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.
* `rem`s 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!
* `rem`s 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. `rem`s 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 `rem`s
When using `rem`s for vertical rhythm, in practice it boils down pretty much to these "rules of thumb":
* keep all `line-height`s 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
:slight_smile:🙂
I'll keep this section up-to-date as I'll gather feedback on this article :)
### Scaling `rem`s
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](https://developer.mozilla.org/en-US/docs/Web/CSS/length)):
> 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:
```
lang=css
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:
```
lang=css
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:
{F28709 size=full}
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:
{F28711 size=full}
## Debugging vertical rhythm in your layout
I highly recommend using [Basehold.it](http://www.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.
> {F28713 size=full}
> *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:
> {F28715 size=full}
> *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 `rem`s 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](https://github.com/kuba-orlik/css-vertical-rhythm-reset/blob/master/reset.css) to kick-start the design process. PRs welcome ;)