Tips for Great Typography in UI Design
Ever since its conception in the 11th century, typography has been concerned with the visual qualities of written information. Over the years, typography has found use in many different media and most recently in digital media and our digital devices. Whether it’s a website or a digital product, written words make up the largest part of a user’s digital information intake. The quality of the typographic design, hence, directly affects the quality of the overall user interface and user experience.
In this article, we will go over the 7 fundamental elements of typography and helpful tips on how to implement them. They will help guide your typographic decisions to ensure a pleasant and readable user interface.
1. Typeface
A typeface is a set of design features for letters and other characters. For instance, Poppins, Roboto and Times New Roman are typefaces. Font refers to the typeface variation in weight. Poppins Regular, for instance, is a font. Font families contain multiple variations of the same typeface or multiple fonts, such as Regular, Medium, Semibold, Black etc. Typeface, Font and Font Family can seem interchangeable at times, but understanding the nuance between the three can help you communicate your typographic choices more precisely to avoid confusion.
There are three basic typeface classifications: Serif, Sans Serif and Decorative. Serif typefaces contain embellishments intended to reference old handwriting styles. Sans Serif typefaces exclude ornamentations for a more geometric and cleaner look. Decorative typefaces move away from typography conventions present in the other two categories, leading to more creative and expressive character forms.
Helpful Tips
- Readability is key. Make sure that your choice of typeface does not interfere with the readability. Use sans serif text for long paragraphs (or paragraphs in general) as it makes them easier to read on-screen. Of course, this rule can be challenged as long as on-screen readability is preserved.
- Limit the number of typefaces. Using 2 typefaces can help you create the necessary hierarchy and contrast without reducing readability and harmony. Most font families today, however, contain a variety of font weights that can help you achieve this by using only one typeface.
- Choose heading typeface to emulate context and branding. Typefaces can elicit feelings of trust, modernity, tradition, etc. and more closely embody the values that make up your brand through serif, sans serif or decorative fonts. Headings usually contain shorter strings of words where a more expressive typeface can set the mood and context, without sacrificing the overall readability.
2. Contrast
Contrast helps create an interesting and dynamic experience. It provides emphasis and effectively supports the overall hierarchy. The contrast in typography can be achieved through size, weight, color and style variations as well as through different typefaces.
Helpful Tips
- Use a strong contrast to highlight titles, CTAs and buttons. Evident differences in size and weight (and/or color) can help differentiate between elements of various importance. Skip at least one weight and more than double the size to make sure that the heading text stands out.
- Limit the use of contrasting relationships. The more elements are bold, colored and large, the less they are emphasized. A small amount of text elements with different weights, sizes, (accent) colors and/or styles against a large amount of less imposing text leads to higher contrast and emphasis.
3. Color
Color is a complex design element that supports both the function and the aesthetic of the overall user interface. In typographic design, color plays a functional role in creating (or increasing) the contrast necessary to guide the user’s attention through the written content and its various degrees of importance.
Helpful Tips
- Limit your total number of colors. If you are still inexperienced with color theory, stick to Monochromatic, Analogous, or Complementary color schemes for a cohesive look.
- Analyze how successful designs resolve their color palettes. Aside from reading up on color theory, the most effective approach to creating successful color palettes is by taking inspiration from other visual designs — in UI and beyond.
- Use color to create contrast between different text element types. Manipulate hue, saturation and value within your color scheme to create necessary distinctions between text elements such as titles, subtitles, forms, paragraphs and buttons for an enhanced hierarchy.
- Avoid using the color black. When you feel compelled to use black for your body or heading text, replace it with a darker value of a dominant color in your palette. When this is hard to achieve, fall back on darker grays. This will reduce the severe contrast that otherwise makes large bodies tiring to read.
4. Alignment
Alignment is the spatial organization of interface elements along “invisible” lines. It helps to achieve order, cohesiveness and clarity in the composition. Text can be aligned with a left, right and central alignment within the text box that contains it. Similarly, text and interface elements alike can be horizontally aligned with a left, right, or central alignment in reference to each other or the “invisible” lines of the established grid system. The same goes for vertical alignment, where elements are aligned with the top, bottom and central alignment to each other to establish relationships and distinctions between different horizontal sections.
Helpful Tips
- Use “natural” text alignment for large paragraphs. Left-aligned text is easier to read for left-to-right languages such as English, because it gives the eye a “vertical line” to follow in reading consecutive rows. Similarly, the right-aligned text is easier for right-to-left languages such as Arabic.
- Use central text alignment rarely but intentionally. Central text alignment without the vertical anchor makes long paragraphs harder to read. However, it can create emphasis when used for short paragraphs and titles.
- Align text with other related elements. Whether vertically or horizontally, aligning text boxes with related elements such as images and illustrations, helps the eye create relationships within vertical and horizontal sections.
5. Hierarchy
Typographic hierarchy conveys various levels of importance to the written content through font weight, size and capitalization. By defining font variations specific to different uses, such as headings, subheadings and body text, the font hierarchy provides order, scannability and readability. The font hierarchy can be further amplified through color to create contrast and distinctions between the different levels of information.
- Typify all text types you will use in your design. Understanding the relative importance of various headings, sub-headings, paragraphs, quotes, prices and buttons will help you approach the font hierarchy more systemically and designate font levels successfully.
- Use a standard hierarchy. The HTML heading tags that range from H0 to H6 provide an effective guide that is rooted in technical conventions. Following this guide will help you create a font hierarchy and a well-organized design system for easy handover and an optimized outcome.
- Be sure to account for mobile responsiveness. As the screen size changes, so does the font hierarchy to maintain readability at smaller screen sizes. Make sure you consider how your font hierarchy will change to accommodate various screen sizes.
6. Consistency
Consistency is perhaps the most overarching element in successful UI typography. The effective implementation of all typographic elements is predicated on their consistent use across the entire interface. Consistent fonts, weights, sizes and colors, as well as consistent use of contrast, alignment and white space, all contribute to how easily users familiarize themselves with and navigate the interface. Moreover, consistency is not only important for an enjoyable reading experience, but also for a successful design process.
Helpful Tips
- Establish a font hierarchy and a color palette and stick to them. Implement your typographic decisions systemically to support a consistent typographic design system.
- Iterate on your choices when consistency is challenged. When you come across new needs for emphasis and visual interest throughout the design process, go back and revisit your font hierarchy and the accompanying typographic elements. See if the new uses can fit into the existing design system and if they can’t, see how you can accommodate for them without sacrificing the overall consistency.
7. White Space
White space or negative space is a seemingly straightforward concept, but when utilized critically it holds the power to improve content organization and readability tremendously. In text elements, white space is realized through leading (line height) and tracking (letter spacing). Appropriate space between lines of text and between individual characters reduces strain on the reader’s eye thereby improving readability. Additionally, the amount of white space can convey meaningful visual relationships (or distinctions) between different elements (paragraphs, images, buttons) by utilizing the principle of proximity to form meaningful groupings.
Helpful Tips
- Ensure that the line height measures about 140%-180% of the font size for optimal readability in large bodies of text. This means that if a paragraph font is 18pt, the line height should be around 27pt. This number will vary based on the specific typeface and its use cases.
- Use a tighter line height for larger fonts and shorter strings of text such as headings. Unlike paragraphs, 150%-line distance in titles can make them look oddly distanced, relative to optically tighter paragraphs and smaller text.
- Make the letter spacing for headlines and all-capital text smaller than the default. The default tracking between letters is usually appropriate for large bodies of text. However, titles and all-caps text may require a tighter spacing to look similarly compact at larger font sizes.
- Pay attention to the relative proximity of elements within a grouping. A meaningful grouping is created when related text elements are placed closer to help the reader easily determine their relationship. Within a grouping, however, different elements don’t necessarily have to be equidistant from one another. Employing relative proximity within a grouping can help suggest more intricate relationships between the contained elements.
The elements we covered in this article will certainly help you make better typographic considerations when coming up with a readable and enjoyable user interface. However, there is much more nuance to each, than we could possibly cover in a single short(ish) Medium article. Much of this nuance will come from experimentation and the design experience you will accumulate along the way. In the meantime, remember that typography’s main function is to arrange text in a way that is easy to scan, read and understand. Using the typographic elements in your design toolbelt, always examine if and how your design decision support this function.
Images prepared by Sonja Jankovikj from our client work at Codeart.
— — — —
Starting a new project? Contact us if you a looking for a digital partner that will enable your business to flourish.
