User Interfaces and Type Hierarchy
The most important design decisions a consultant must make when prototyping user interfaces of an application have to do with type. Typographical hierarchy is the assignment of type attributes to establish an order of importance within written data. Determining that structure early in your definition process sets your entire design system in motion, structuring the information on the screen in the service of the user.
Let's Set the Scene
Your type hierarchy needs to be flexible: the user’s needs inevitably change as they gain familiarity with the system. If size, color, position, and typeface are the basic attributes that must be addressed at the genesis of a new type hierarchy, then weight, case, and relationship are the nuances that ensure usability.
Intricate Balance of Font Weight
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.
Considerations
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.
Specialized Headings
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.
Enter eyebrow headers. Often smaller than the content below them, eyebrow headers can be distinguished by weight, color, and case. Small, dense text in all caps can be easily scanned to deliver information but be careful with how you use them. Eyebrow headers should function like keywords and be kept short, ideally under four words.
Exploring Font in Greater Depth
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.
The Secret Sauce in Your UI Kit
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.
Final Thoughts
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. At Aciron Consulting, we are here to help you succeed. Contact us today!