Participate in the next Webflow Challenge!

How to calculate the Hn spacing?

I have found an automated solution that will make your life easier: you will be able to perform the Hn spacing calculation automatically.

Updated on


Hn spacing
Photo by Jessica Ruscello on Unsplash

All designers aspire to make every web page they create attractive. I bet that's part of your goals too! So start by taking care of the spacing between your titles and subtitles (also called Heading). I have found an automated solution that will make your life easier: you will be able to calculate the Hn spacing automatically. But first, do you really know what are the advantages of using Hn on a website?

Using Hn: good or bad idea?

By using Hn, you can be sure that the web pages you create will be clearer and more understandable. You are killing two birds with one stone: not only will the pages appeal to internet users, but they will also appeal to search engines.

Tell me: have you ever had to face a page with only a long text block? How did it make you feel? I meet them all the time. I have to confess that they make me run away right away, before I've even had time to understand what she was talking about.

Hn spacing
Photo by Pine Watt on Unsplash

So, if a human has trouble understanding a text devoid of Hn, what would a machine or a robot do? Sure, they are intelligent, but not intelligent enough to decipher such information. Hence the importance of prioritizing arguments, ideas... This is precisely where headings (different Hn) come into play. They facilitate the structuring of a web page. And if the calculation of the Hn spacing is well done, the result is even better.

Also, Internet users love well-structured pages. It gives them a good user experience.

The Hn are much more important on the SEO side.

From an SEO point of view, the implementation of different Hn and the calculation of the Hn spacing are also of paramount importance. I already touched on this earlier, that it would be easier for search engines to understand what the website is about.

Google will have no trouble indexing your site. Have you ever taken the time to read my other article on SEO tips to get your site in the best search results, you may remember one of my tips: insert keywords in the Headings. By doing so, you make Google understand what your page, your site, is still about.

Hn spacing
Photo by Jonny Caspari on Unsplash

How to place the Hn and calculate the Hn spacing?

If you want everything to go well, you still have to follow a certain rule. When placing the different Hn, you must do it in order. Never, you must never jump levels; knowing that the Hn are composed of: H1, H2, H3, H4, H5 and H6. The most used being H1 to H3.

Here is a more concrete example:

A page should be structured like this: H1 > H2 > H3 > H4..., and not like this: H2 (at the top of the page) > H4 (immediately following this H2) > H1 > H3... In short, it is a question of simple logic.

In addition, it is important to balance the number of Hn. It would not be appropriate to insert several H1 or several H2, or even several H3. Moreover, for a page, only one H1 is allowed. The H2s act as subheadings, and H3s as sub-subheadings.

For example:

  • H1
  • Introduction
  • H2
  • Paragraph
  • H3
  • Paragraph
  • H3
  • Paragraph
  • H2
  • Paragraph
  • Conclusion

The H1 is generally used to describe the entire content (a kind of summary in 4 or 5 words); it is the general title of the text. Make sure that it does not contain too many words, and includes the main keyword.

Hn spacing
Photo by Rolands Zilvinskis on Unsplash

How does the Headings formatting work?

The H1 has the largest size of all; it is also the fattest. This is followed by H2, then H3 and so on. However, you should know that we're not talking about shaping here, but about "structure". These sizes and fat levels only show the importance of headings.

However, it is quite possible to change their shapes, so that they are visually appealing, and thus make the whole page pleasing to the eye. In general, these typographies depend on the themes and CSS adopted for the site.

Now, here's how you can do it with this Hn formatting and spacing.

Uses a style guide

Do you remember the style guide I often talk about. I give it to those who follow my training (and it's free).

For each Heading, I chose a specific size and typography. With each new page you create on Webflow, the Hn automatically adopt these sizes and typos. Only, you won't necessarily like the style I've refined. That's not a problem, you can create your own style guide.

Get help from type-scale.com

The problem when you have to create your own style guide is that you may have no idea how much Hn spacing to adopt between headings. That's when you use type-scale.com. Now say goodbye to manual spacing calculations. On the platform, you have direct access to a number of pixels that are automatically proposed, a ratio that allows you to get a good spacing.

There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"

Hn spacing
Photo by Clark Street on Unsplash

The details make all the difference! Yes, the Hn spacing is one of those details. That's why their calculation is very important. Fortunately for you, there is now a tool that allows you to do it automatically and, above all, for free!

YouTube: Heading spacing (H1, H2, H3...) calculated for you! (2020)

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like


Register here to receive the free Discovery Training

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training