User Interfaces & Type Hierarchy

The Delicate Balance of Font Weight

Aciron "the quick brown fox" with different levels of bold type

The font weight is the thickness of the characters relative to their height. In digital design, font weights are specified using numeric values from 100 to 900.

It is common for web fonts to include at least 4 weights. Expect to see 400 (Regular) and 700 (Bold) across all font families.

Lighter weights contribute to a more open feeling, but when used on small text they can lead to accessibility issues. Font weight and color must be considered together for the same reason. On a dark background, light-colored text must have a heavier weight to be readable than dark text on a white or light background.

Aciron font weight description two sentences black and white backgrounds
Aciron "36pt is a good size for an extra light font"

While font weight must provide enough contrast to ensure readability, lighter weights can work for larger text, especially page headers. A large, bold header delivers impact, but that might not be what you want in the context of application's user interfaces.

Take time to select a range of font weights corresponding to different header levels, and you'll have a consistent system that you can scale as the application changes over time. Just remember: each font style or weight that you add to your system increases the load time of your application.

Case & Specialized Headings

Aciron "the quick brown fox" with different levels of bold type

There are scenarios when a header text needs to be small, but easily identifiable. Eyebrow headers are a great example of this, and they show up frequently in UI Design.

In complex user interfaces with many sections on a screen, a new user needs headers to organize sections and know where to look for certain content or functionality. Restricting the size of these headers is important to maximize space efficiency and avoid overwhelming the user.

As the user becomes more familiar with the application, the header still needs to exist as a reminder. It should not be a distraction.

Type Relationships: The Secret Sauce in Your UI Kit

Aciron blog two paragraphs with pink text double spaced
Aciron Consulting blog two paragraphs with pink headers

If positioning addresses where a certain typographical level exists on the screen, defining how different application elements relate to each other is the key to deftly guiding the user. Think about a set of paragraphs grouped by thematic headers. Those groups need to be separated from each other by spacing that is larger than the distance from each header to its text.

Tabs are another example of where type relationships come into play. There is a trend in UI design right now to create tabs as a row of words or phrases, with the selected tab differentiated by an underline or color change. Horizontal distribution of such tabs should feature more padding than a bank of icons, especially if the tab names include multi-word phrases. Otherwise, the tabs run together and scanning will be compromised.

There is so much more to master in order to use type effectively in UI design. For font pairing recommendations and resources on typography in general, Typewolf is a great place to start.

Enjoy this article?

Share it with your network.