Headings create the structure of the interface and text. They help guide and direct users’ attention and make the content more user-friendly, improving understanding of the information.


Balance and calm are essential in user interfaces. Large, contrasting headings don’t always make sense or matter. They can be distracting and interfere with receiving information or taking action.

Balance and harmony define quality typography. Disproportionately large headings ruin everything.


This is especially critical in those interfaces that require more information density and where data is most valuable, so the focus should be on the data itself, not the headings.

Of course, the main appeal can be significant and explicit if you’re making a landing page. The headings can be quieter and more balanced in dashboards and other control panels.

The landing page has a huge heading; the dashboards have less hierarchy and contrast.


Sometimes, it seems that a strong contrast will be the best solution. But all the interface typography is tied together, and even a normal-sized body text with a giant heading will not look good.

The heading and text have too much contrast.


It is better to reduce the heading size to make it more balanced with the text or, conversely, to increase the text’s size by adding a lead paragraph.

The lead paragraph is larger than the body text and creates a balance between the size of the big heading.



Often, you don’t need to make the heading larger than the text because the weight of the title already has enough contrast with the text.

The weight of the heading is enough for contrast, and there is no need to increase its size.


The heading may not have a bold style if it is large enough. Although this is a challenging technique and requires excellent work with the ratio of the heading size to the text. You must ensure that the text is weaker in contrast to the heading.

A big heading doesn’t have to be bold but requires caution.


You can type the heading with Black, ExtraBold, or Heavy. This gives perfect contrast and makes it stand out from the other elements. However, it is essential not to overdo it and leave only one heading on the screen this way. Otherwise, the entire design becomes overly saturated and even messy.

Black, ExtraBold, or Heavy font-weight gives a good contrast.



The size of the headings depends on the size of the body text. The larger the body text, the bigger the heading. Usually, a good ratio is 1 to 3 to body text. The bold style gives good contrast and a balanced design. Making the ratio of the heading to text more than three is unlikely. It can upset harmony and balance.


When creating a design, it’s convenient to create tables like the one in the example above by manually selecting the headings and checking how they work with the text. Then, you can pick the exact values of the heading sizes using the modular scale we discussed in the Principles chapter.

All caps

All-caps headings are usually hard to read in large sizes. It is even worse if the heading is long and divided into several lines.

The big heading in all caps is hard to read.


A short and small heading typed with all caps reads well and can be a great decorative option to create contrast without increasing the size of the heading.

A small heading with all caps is a great feature.


Letter spacing

It is worth remembering that in all-caps headings, it is necessary to increase the letter spacing slightly. Increased letter spacing creates space between the characters and helps them to be perceived better as separate ones. The heading does not turn into a single solid black line in this case.

All-caps headings always require increased letter spacing.


Headings not typed in all capital letters often require lower spacing between characters. It will give an excellent balance and make the heading more coherent. There are no strict rules for letter spacing; it depends on the size of the font and on the font itself. So, it relies solely on practice and experimentation in your case.

Headings, especially large ones, look more balanced if you reduce the letter spacing.


Line spacing

Headings have rules for line spacing, which differ from how we do with text. Meanwhile, for text of all sizes, you can choose a single line spacing value, such as 1.5, and it will work fine. But in headings, you need to select the value for each size separately.

Each heading has its own line spacing.


As a rule, line spacing for headings is between 1.1 and 1.4 of their font size. Larger values cause problems. If the heading is two lines, the second line may fall off.

The wrong line spacing causes problems for two-line headings.


Always check headings by making them on two lines. It helps to find the proper line spacing and avoid mistakes. Many interfaces are adaptive, working on different screens, and at some point, a two-word one-line heading may well become a two-line heading.

Balanced line spacing value.



Headings create the structure of the text. It makes sense to emphasize the rhythm of the text with balanced and adequately chosen spacing from the text to the headings. This makes the design and the text itself solid and reliable-looking. But more importantly, the correct distances between headings and text introduce the right pauses into the content and help separate one semantic section of text from another.

Perfect vertical rhythm is achieved by multiple line spacing between elements.


It is ideal if the spacing between the heading and paragraphs is based on the relationship to the line spacing of the body text. This gives incredible harmony and wholeness. But you can pick relative values if you are designing based on a 4px, 5px, or 8px spacing scale. Generally, after the heading, a reasonable distance would be 0.375…0.75 of the line spacing of the body text. And before the heading 1.25…2 of the line spacing.

Approximate distances after and before headings.


These values are perfect and can serve as a guide. But of course, it depends on the body text size and the headings themselves, as well as on what tasks you have in mind. Therefore, each project may have different spacing values.


If you create dividers in the content, for example, for more expressiveness or additional emphasis on the text, it is worth paying attention to its location relative to the title.

The divider after the heading breaks up the content.


It turns out that the heading and text become different modules. The divider between heading and text breaks the single meaning of the content. If you didn’t want to do that purposefully, putting the divider above the heading is better.

The divider before the heading becomes an excellent focal point.


The divider above the heading does not break the single meaning of the content block and helps to increase the focus on it.


It’s good when the heading is black on a white background. It is the best combination for readability and proper contrast. Sometimes, it makes sense to do the heading not pure black but tone it down or give it a warm or cool hue. This can help create a balance of the titles with the overall design. They will contrast less, but it’s worth muting just a bit.

A black heading is always ideal.


A color heading is an excellent way to create contrast between text and draw extra attention from users. It often looks spectacular.

A colored heading creates contrast and emphasis.


It sometimes makes sense to make the heading less bold on dark-colored backgrounds, especially on black. The bold weight is too strong in some typefaces, and headings look too contrasty.

The bold style contrasts too much with a black background.


You can do the heading in regular font or semibold, which will be more balanced on dark backgrounds.

Semibold style doesn’t look so contrasting as bold.


Sometimes, a colored heading on a black background creates interest and provides a good impression. This is an excellent solution for giving the design more appeal and breaking up the black-and-white look.

A colored heading on a black background is unusual and exciting.


Color can add attention to headings and make them even more emphasized, but it requires a careful approach to avoid making the interface too garish and, because of this, less readable.

Familiar solutions and combinations, such as a black heading on a white background, always give more consistency and work predictably.