Vertical rhythm using CSS lh and rlh units
Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base. I learned it in my design days when printed media was still a thing1. How much the same concept applies to the Web’s fluid nature is debatable, but this post is not about that. To fulfil your curiosity — yes, the primitively simple design of my website follows the vertical rhythm.
Correctly implementing vertical rhythm is a tedious task. Luckily, the CSS Values and Units Module Level 4 defines two helpful units that make the job a breeze: lh and rlh, which are equal to the computed line-height of the element on which it is used and the root element, respectively.
At the time of writing this article, the browser support is limited to Safari and Chromium-based browsers. Have a look at this simple example.
Baseline: lh unit is newly available
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
Baseline: rlh unit is newly available
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
html {
font-size: 100%;
line-height: 1.5;
}
main {
padding: 1rlh; /* 🫶 */
}
This post is not a tutorial, just a quick appreciation of modern CSS features. Expect more of these because CSS tricks worth writing about are bombarding me daily. Also, it is the first article where I embedded StackBlitz demo — it is a great tool. Have a great day, folks 😙
It is just a snarky joke. I love you designers out there ❣️ ↩︎
What about images with random height?
This is a fair question. Yes, of course there is a slim chance your image will align to the grid perfectly. The point of vertical rhythm is not to align everything with a grid, but more to keep consistency around elements. You can try some serious
calc()andaspec-ratiotricks, but personally I wouldn't.