🇺🇸 You’ve probably heard of H0, H1, H2 … but do you know what it means and how should we apply them in the interface?
Published in · 5 min read · Jun 9, 2019
The name H1, H2, H3 is a short form of representing font size and style in the HTML language. Separating in two parts to better understand the structure the H refers to the reduction of Heading Tags, which is a marker that calls this function in the code. Next, there is a number that can usually range from 1 to 6. The variation of these numbers directly relates to the relevance that the content has in the interface. The higher the number, more prominence, and the importance it will have.
The use of Heading Tags in the interface, such as the Logical Flow that was analyzed in an earlier text, has a lot of value in the hierarchy of information in the creation of a product. Giving a differentiated weight to the content that is most important in that context.
With the entire page having a well-defined hierarchy of information, it is possible to work by linking Keywords to Heading Tags in order to be found more easily in search engines like Google for example. The link of this information is the famous SEO that many people speak nowadays.
Using this type of naming in Design System, for example, greatly facilitates communication with the developer, who normally relies on these attributes to build his code, and also helps ensure consistency on the part of the designer by avoiding using a variety of font sizes in a project.
In addition to the points cited above, Heading tags are extremely important for accessibility, especially for the visually impaired. Screen reader programs use this categorization to differentiate information and convert it into audio format. So it is strongly suggested to think of design solutions that fit those programs.
There is no magic formula for defining how many styles to create, this varies within the need of each project/company. But I always like to leave a starting point in common for the projects in which I work. This common point is:
From there I adapt the needs and specificities of each project.
It is extremely important to make sense of each of these tags by analyzing the product strategy and defining which tags will be applied to each type of content to achieve the desired result.
Another point that many people have difficulties but that there is no formula magic is the size of Tags. An H0 tag applied to a website can have a size of 32px, when we apply that same size to a smartwatch for example, it makes the tag totally unfeasible for that device.
Then the size of the font can change because of the screen size and the strategy of each product.
The source chosen may also be a factor that changes the size of the tags. There are fonts that if placed in the size of 11 pt are extremely illegible, others already have a good reading. Only visual and user tests will answer these questions.
But let’s go to the patterns that I usually use:
- H0: 40 pt (45–38pt)
- H1: 32 pt (30–34pt)
- H2: 26 pt (24–28pt)
- H3: 22 pt (20–24pt)
- H4: 20 pt (18–22pt)
- P1*: 13pt (Minimum size)
- P2*: 11pt (Minimum size)
A good practice of tag size is the more tags you use in a project, the smaller the difference between their sizes. With little font size difference and many variations of tags, the user can be confused between which type of content is most relevant in the interface.
* Usually I use P to identify the font styles I use for plain text and H for indicating Titles and subheadings.
Organizing is always good, is not it? Whenever I have my styles defined and tested, I put them in the Sketch library (or Figma). This is very good when working on a team and we need to share the files with other members, making everyone in the team have a complete view of all the possible source variations we have on the project.
In the image below we have an example of how a text style gets organized in my file. Remember that the bar between items, in this case, works to group similar features, making it easier to find some specific information since the libraries can contain many symbols and styles.
Heading Tag: H0,H1,H3…
Font Family: Poppins, Roboto, San Francisco,…
Weight: Light, Book, Bold, …
Color*: Active, Selected, Unavailable,…
Alignment: Left, Center, Right.
* I do not particularly like to put the color name directly in style. I prefer to put the function of it because it is more scalable and facilitates communication between teams.
This is the way I use to set the font size. I think it’s always good to have a starting point to start the projects, but the end result of all this work will always depend on the purpose and the target audience that the interface is being developed.
Do it in a way that will best meet your needs, just do not forget the importance of thinking about it in the development of the project. It will help ensure consistency, improve communication and make a solution that is accessible to various types of audiences
Extra
I recived an indication of a platform developed by Jean-Lou Désiré (Ti’kuto Design Studio) that helps in defining the size of the fonts using different strategies to arrive at the desired result, besides having much technical content on typography.
Check Layout Grid Caltulator for more information.
___________________________________________________________________
If you have any feedback contact me (in the links below) to share your opinion. Feedbacks are very important for creating new texts.
LinkedIn — Instagram — Facebook
___________________________________________________________________
References
