Hey! Free yourself to discover the 'magic' trick that will propel your business on the Web

How to calculate the spacing Hn?

Web Design,Freelance,Business
spacing Hn
Photo by Jessica Ruscello on Unsplash

All designers aspire to make every web page they create look good. I bet that's one of your goals too! So start by taking care of the spacing between your titles and subtitles (also called headings). I've found an automated solution that will make your life easier: you'll 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 kill two birds with one stone: not only will the pages be appealing to Internet users, but they will also be appealing to search engines.

Tell me: have you ever been faced with a page that was just a long block of text? How did you feel? I encounter them all the time. I have to tell you that they make me run away immediately, before I even have time to understand what they are talking about.

spacing Hn
Photo by Pine Watt on Unsplash

So, if a human has trouble understanding a text without Hn, what would a machine or a robot do? Of course, the latter are intelligent, but not enough to decipher such information. That's why it's important to prioritize arguments and 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.

Hn are much more important, on the SEO side

From an SEO point of view, setting up different Hn and calculating Hn spacing is also of paramount importance. I already touched on this earlier, as 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 make your site appear in the top 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.

spacing Hn
Photo by Jonny Caspari on Unsplash

How to place the Hn and calculate the Hn spacing?

If you want everything to go well, you should still follow a certain rule. When placing the different Hn, you must absolutely do it in order. You must never skip a level, knowing that the Hn are composed of : H1, H2, H3, H4, H5 and H6. The most used ones are H1 to H3.

Here is a more concrete example:

You have to structure a page in this way: H1 > H2 > H3 > H4..., and not in the following way: H2 (at the top of the page) > H4 (immediately following this H2) > H1 > H3... In short, it is a question of simple logic.

On the other hand, it is important to balance the number of Hn. It would not be appropriate to insert several H1 or several H2, or several H3. Moreover, for a page, only one H1 is allowed. The H2's play the role of sub-headings, and H3's, sub-sub-headings.

For example:

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

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

spacing Hn
Photo by Rolands Zilvinskis on Unsplash

How does the Headings formatting work?

Basically, the H1 has the largest size of all; it is also the fattest. Then follows the H2, then H3 and so on. However, you should know that we are not talking about formatting here, but about "structure". These sizes and levels of boldness only show the importance of the headings.

However, it is quite possible to change their shapes, so that they are visually appealing, and thus, make the whole page pleasant to see. 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.

Use a style guide

Do you remember the style guide I often talk about. I give it to people who take 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 may not like the style I have refined. That's not a problem, you can create your own style guide.

Get help from type-scale.com

The problem with creating your own style guide is that you may have no idea what Hn spacing to adopt between headings. That's when you turn to type-scale.com. Say goodbye to manual spacing calculations. On the platform, you have direct access to an automatically suggested number of pixels, a ratio that allows you a nice spacing.

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

spacing Hn
Photo by Clark Street on Unsplash

Details make all the difference! Yes, the Hn spacing is one of these details. That's why you have to pay a lot of attention to their calculation. 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 find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be
Kevin Palombo, Manager of Happydesk
Make the counter explode to reach 1M subscribers together (Pssst...it's in real time)
Together it's more fun

1 Million with you.

It's really amazing how our YouTube community can be a true source of inspiration for all of us. So if you're looking for a community that will give you a boost to reach your personal and business goals, you've come to the right place!
Certified 100%
ULTRA enriching and hair-raising!
Receive a mountain of gifts


We all keep our childish soul, so we like to receive lots of gifts, a montaaaagne of gifts, a galaxiiiiiie of gifts, a.... YOUHOU, are you still with us? Since you also love gifts, receive in your mailbox energy, strategies and tools (each one more grandiose than the other) that will generate results in your business.


Clearsome time for Thursday because an intergalactic surprise awaits you.
Propel your life & your business in 30 days!


The only one, the only one, the real one where all ideas can germinate, develop and succeed. Each phase of business development is thought out down to the smallest detail (even the smallest) to accompany you in your project.

Foundations, development, support, mutual aid, coaching, website, web tools and even cookies. Joining the Happy.webacademy is to be part of this ecosystem without risk, just jump in and let yourself be guided.
AI enabled to accelerate your transformation 🤖
12 Up-to-date modules
We give you crazy training with action plans, regular updates, access for life, and 24/7 support, 365 days a year. Everything you need (and more) to make your life, your business and your skills shine.
Your thruster
We make sure that you are always on top of your questions and that you can grow with a community that has the same dreams as you, and that you can meet super inspiring people.
Never again alone
Your Website!
Who better than Web experts to create a turnkey Website and sell your offers quickly without having to break your head with the technique. No more sleepless nights tearing your hair out, we've got you covered to accelerate your online growth!
We will create you
an Asteroid
12 months Free
We answer all your business, mindset and nugget questions. It's also the best way to get your daily dose of motivation, anything is possible!
Don't forget to bring
Strategy 3.0
The Web and e-commerce are evolving at an incredible speed, and if you don't keep up, you'll lose money. That's why we're going to share with you all our latest tips, discoveries and innovations (automation, artificial intelligence,...) so that you and your business stay on top!
2 Business Coaches
Kevin & Sophie, 2 coaches in the field for 10 years who will be there to motivate you, boost your mindset, and much more! Throughout your entrepreneurial adventure on the Web & in e-commerce, we will support you to validate opportunities or help you optimize your performance. You will NEVER be alone again!
Continuous monitoring
It's sometimes hard to take a step back from your work when you're just starting out (even after), which is why we'll always be there to review your work privately BEFORE you spend any money on advertising or influencers.
Creating a profitable business requires financial optimization. That's why we'll give you the tips we use so you can learn how to invest the money you'll earn in the long run to create wealth.