Web Trend: Large-Scale Typographies

Image blog WebSelf

This is not new: Apple does it in a grand way, literally. Large-scale typography is taking an important place in Web design. Why? Is it necessary? What does it add? 

All these questions will be answered in this article.

The main title: the H1

The H1 is crucial when creating a website. This title is the hero of all titles, a general presentation of your website. But what is an H1, and why is it important to choose it thoughtfully? 

The H1 is an HTML tag that indicates a header on a website. Have you found many unknown terms in this sentence? Let us deconstruct it:

HTML: This means “Hypertext Markup Language.” A large majority of sites use this language to create websites.

Tag: An HTML tag is an extract of code that tells your web browser how to view content.

Header: HTML has six different title labels: H1, H2, and so on. The H1 is considered the most important title, and the H6 is the least important.

Why is H1 so important?

Having a good title can help you get better visibility and conversion rates. Your SEO can therefore be improved only by having a title that joins your readers. 

Many web trends are ephemeral, but the H1 remains constant: This is a critical ranking factor. Your SEO will be grateful. 

How to use it well?

Quality, not quantity

Why? Your SEO will not work on four H1s simultaneously; it will focus all its efforts on one title. Google might also think that your website is over-optimized, so it could penalize you if there is more than one. 

Keep it simple and effective

If your main title is too short, you will lose space to have a good SEO. If it is too long, too many words will try to be referenced, and you will lose the power of SEO. A good strategy would be to go between 30 and 50 characters. There is no need to calculate each character; pay particular attention to the length of your main page title.

To every title, its ideal size

The titles

On large screens: from 40px to 64px.

On mobile screens: 32px and less if it uses too much space.

For every other titles (H2, H3, H4), rely on the previous sizes but adjust according to the hierarchy. Headings may be the same size, but must be distinguished; either by fat or a different font. 

The text

On large screens: from 16px to 24px.

On mobile screens: 16px or less if it uses too much space. Never go down 14px.

It is important to remember that text can quickly become too small when reading from a mobile phone. We must not force our eyes when we want to get information easily and quickly. 

A bigger headline, a trend or a benefit?

Apart from being easier to read, large-scale typography really becomes a trend not to be overlooked. We are not just talking about an H1 headline, but all the headlines across the website. 

The bigger the element, the more important it will be considered, and so on; hence the importance of the information hierarchy (H1, H2, H3, H4, etc.). 

Often, large-scale titles will be part of the design and help with the overall look. However, this is not the only goal. Even if the title is bigger, everything is well-balanced and will mix well with the rest of the design. 

How to make an H1 title in WebSelf?

Remember to have one H1 title per page when you create your website. To do it, you only have to click on a title on the website builder to access its settings. You will find a checkbox to activate at this place to make this title the main title of the web page. It is as simple as that.

What can be gained?

Large-scale typography can be used for your SEO as well as the general look, readability, and mobile format. As seen above, it is important that if you want to use it, you must do it well by following some scaling rules. This trend is more than visual; it is also practical. Feel free to try it in the creation of your website. Let's create!