01Heading hierarchy

Hierarchy is one of the foundations of design and good typography. By manually scaling headlines or using type scale tools, you can create a strong hierarchy, thereby increasing content contrast. This will greatly improve the structure of the content and the design as a whole.

A weak heading hierarchy has poor contrast.
A strong heading hierarchy has a good contrast.

In the example below, all four headers are different sizes from H1 to H4. Although at first glance they seem to be about the same. In such text, it is difficult to distinguish which of the headings is more important and what structure it forms.

A weak heading hierarchy has poor contrast.

A strong hierarchy creates a good contrast between the text and the headings, and between the headings themselves. In the example below, the strong hierarchy is the only reason the structure is set up so well, helping to immediately identify what is primary and secondary and to understand the relationship of each text element to the other.

A strong heading hierarchy has a good contrast.

02Don't put the headings in the body text baseline

Building text on a baseline has little to do with vertical rhythm and text harmony. It only complicates typography, as it becomes impossible to size multiline headlines. It also puts unnecessary limitations on the size of headings, so that they match the body text's baseline.

The baseline of the text has nothing to do with the line height of the headings. It is better to choose for each heading an independent ratio of size and line height.

Do not put the headings in the text baseline.
Independent heading size and line height.

03Large headings don't have to be bold

Sometimes large headings don't need to be bold. A large heading in regular font-weight has a good contrast to the text.

A large heading without bold looks contrasting.

04Contrast of heading with the color or italic

Contrasting headings can be achieved through color and style without bolding. This often looks more advantageous and interesting than monochrome bold headings.

The italic font style creates a good contrast of the heading.
The color creates the contrast of the heading.

05Heading balance by reducing letter spacing

Large headings can look unbalanced because of the large spacing between characters. Therefore, you can reduce the letter spacing a bit, and it will give a nice 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 depends solely on practice and experimentation in your case.

Reduced letter spacing for large heading sizes creates a good balance.

06Balance all caps heading by increasing letter spacing

For headings in uppercase, it is better to increase the letter spacing so that the characters do not merge into a single line. This increases the readability of the heading.

Normally, the larger the header's uppercase size, the larger the letter spacing should be.

Increased letter spacing for uppercase headings creates better readability.

07Positioning the line at the heading

Usually, the purpose of a horizontal line is to separate one from the other. So if the line is below the title, it rather separates it from the text. Thus, if you are using the line as a decorative element, it is better to place it above the heading. That way the line, heading, and text will be one block.

The line separates the heading from the text, even though it refers to the text
The line does not separate the heading from the text.