Web Interface Handbook / Typography


01 Heading hierarchy

Hierarchy is one of the foundations of design and good typography. Work on the design is always a process of separating the primary from the secondary. Hierarchy is one way of doing this.

By manually scaling headlines or using modular scale tools, you can create a strong hierarchy, increasing content contrast. This will greatly improve the structure of the content and the design as a whole.

02 Balance

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.

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.

Landing page has a huge heading, the dashboards have less hierarchy and contrast.

03 Contrast compensation

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.

Lead paragraph larger than the body text creates a balance between the size of the big heading.

04 Size

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.

Make a table of headings to test and check how they work with the text.

05 Small size and bold style

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 it does require caution.

06 Heading 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.

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

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.

The letter-spacing can also be more significant for huge headings.

07 Balance all caps heading by increasing letter spacing

All caps headings are usually hard to read at large sizes. Even worse if the heading is long and divided into several lines.

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

It is worth remembering that it is necessary to increase letter spacing slightly in headings with uppercase letters. This creates a gap between the characters and helps them be perceived better as separate ones.

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

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.

09 Don'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 to match the body text's baseline.

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

10 Contrast by pairing fonts

If you don't get into the complex anatomy of letters and various complicated techniques such as typeface shapes, similar proportions in the size, ratios of lowercase to uppercase, similar letter design, etc.

You can follow three simple strategies for pairing fonts. This will give excellent results and create a perfect contrast.

11 Perfect rhythm

If you want to build a perfect vertical typographic rhythm, you can stick to a strategy based on proportional values from line spacing body text. This gives incredible harmony and wholeness.

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

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.

This works perfectly for any content, not just long texts. For example, for text in cards or any other small modules.