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?

• Why use Hn (H1, H2, H3...)?
• What are the advantages of Hn, on the SEO side
• Some methods to place the Hn
• What are the tricks for formatting Hn?
• 1. By the use of style guide
• 2. By using a software to calculate the Hn automatically

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.

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.

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.

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".

Conclusion
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