The interface's text is an essential component of any digital project. It explains to users which page they are on, helps them understand what data needs to be entered, and gives hints in case of difficulty.
Before moving on to the specifics of using text elements, you'll find out how to choose a font for your project so that it's pleasant to read, avoiding visual discomfort and increased cognitive load. You'll also learn about the interface's typographic hierarchy and see when and how to use highlighting, as well as covering all the fundamentals.
The topic of fonts and typography is very extensive. The goal here is not to drown in theory and rules but to understand how to use basic ideas and competent approaches to create the user experience you want.
Font types
Two font types are used all the time, and two are used less often (in fact, there are also combinations, but we won't delve into these). The most common font types are Sans-serif and Serif. The main difference is in the style of each character (letters, numbers, or punctuation marks). Sans-serif is smoother, neat, maybe even "modern". Serif is rather conservative, classic — it's characterized by serifs, small lines attached to characters. You can see examples of the four main font types below:
Script and display fonts are primarily decorative. You may have seen or used these kinds of typefaces in business cards, booklets, website designs, and so on. They are hardly ever utilized in apps, platforms, and services.
In most cases, only Sans-serif fonts are used in mobile development. It's pretty rare to find the main font of an application for ordering food or delivery, or an online store, with the serif style. However, there are some cases where serif fonts are used in applications — they look good as large headlines in newsfeeds, can be great in reading apps, and are sometimes chosen for buttons.
Font choice
Choosing fonts (and selecting colors) for a project can end up taking a really long time. So it makes sense to simplify the process by using a special service that allows you to compare text snippets rendered in different font styles. For example, you can use Google Fonts:
Entering a specific phrase or word and seeing how it would look in different styles is a big plus. Special filters will help you choose a font category, which could be used for things like including a short passage of text in a beautiful handwritten style. If your project's text isn't in English, you can choose any of the suggested languages and find fonts that support them. For those who like maximum customization, a selection of style parameters is also available — thickness, letter width, slant, and so on.
The service is very convenient because it enables you to choose the visual appearance of your text for the project and download all the styles of a font as an archive. It even allows you to select your preferred option and see which font pairs are suitable for use together.
It's worth knowing that Google Fonts also has a Developer API, which makes it possible to connect the platform to your project. This could be used for things like allowing users to choose custom fonts inside your service.
Font pairs
Using a second (auxiliary) font in a project is a fairly common practice. For example, you could display all the headers in Lato style and make the body text Ubuntu. To avoid getting stuck when choosing matching fonts or accidentally opting for combinations that make users strain when reading, you can visit the fontpair website. It contains great pairings along with helpful illustrative examples.
Utilizing more than two typefaces in a project isn't recommended, even though some design gurus may promote the idea.
Keep in mind that projects with a single font family can look good, too. Also, some companies even order a unique corporate font for their exclusive use!
Typographic hierarchy
The UI kits you learned about in the Interface Elements topic are sometimes also called style guides. These allow designers and developers to specify the styles of all interface elements in advance so that the product is designed uniformly.
UI kits usually define text styles in addition to all the interface elements. For example, they may specify the size and style of the headers, the format of the main text, the appearance of the auxiliary text, and so on.
A good typographic hierarchy helps users to scan the interface without reading all the content. Thanks to the uniform heading style, the user knows that they are moving from one article to another. Formatting tags and headings in the auxiliary text style will help ensure they don't get muddled up with the main content. Display text is usually the biggest, followed by headings, then body text, and overline text (like tags, dates, and so on).
Text highlighting
If you want your interface to be efficient, you need to allow users to interact with some of its text elements. These could be links to other screens, category filters, or buttons with hints.
You can see examples of interactive text elements in the above picture. The vast majority of users will already have formed the habit of identifying that highlighted pieces of text are clickable. As shown, it's common practice to highlight a phrase in the main text with color and an underline, which creates a hyperlink. If you also highlight the headings in color, users will probably want to click on them, meaning they can be used as transitions to more detailed content pages.
Conclusion
Text management is a vital component of good design. You need to choose fonts that combine well and are easy to read. It's particularly important to pay attention to the typographic hierarchy. This creates a whole system of content interaction in the user's mind — the separation of thematic blocks, focus on the main elements, and so on. Color highlights show users that it's possible to interact with your interface, which can be a pleasant surprise adding zest to simple text content.