Create Vertical Rhythm on Your Webpage

• 5 minutes READ

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.

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.

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?

Newsletter Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

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.

Create Websites with Our Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

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.


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;


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;


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 is a freelance web designer who documents her travels with photos and words.

Posts by Paula Borowska

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree