This article is a small part of the book named “Designing User Interfaces” written by Michal Malewicz. He is one of the most creative designers that has done an enormous amount of work in designing digital products.

You can get your copy of the book at https://www.designingui.com/

Typography is one of the more boundless discussions in design, and there are many books dedicated to this topic. There are, though, some basic typography rules for UI design that can help bring your designs to the next level. The fonts you choose extremely influence the style, and message of the entire project. That’s why it’s necessary to know how to use them.

FONT OR TYPEFACE?

first of all, let's understand the difference between a font and a typeface.

A Typeface is a collection of several styles of the same lettering. Each of those styles is a font. So Roboto is a typeface, and Roboto Bold is a font.

In general, though, a font is a digital representation of how letters seem. That display is about all the singular letters and their relation.

Each font has a set of properties, based on its fundamental definition. It’s great to understand how accurate and relevant these values are.

BASELINE

The baseline is a flat surface on which our font is sitting. You can use it to align the type to other on-screen elements.

CAP-HEIGHT

Cap height is the height of the capital letter.

Text Cap-Height the height of capital letters

X–HEIGHT

The height of lowercase x is as a default value for other, less uniform lowercase letters.

ASCENDERS

All elements above our x-height are called ascenders.

DESCENDERS

All elements below our x-height are called descenders.

Text Descenders is on the bottom of the text

KERNING

Kerning is the space between letters. All fonts have a default kerning value that differs between them.

The best way is to stick to the default value or a global value in UI as it may prove challenging to code an entirely custom set. When the value of kerning is too small, or too large, it can negatively impact readability.

If you’re not sure how to set it, a safe range in which you can play around with the default value is between -0.5 and +0.5.

LEADING

Leading is the vertical space between lines of text.

In mobile apps, it’s usually a slightly lower value than on the desktop. The default value can often be too small for the readability of larger blocks of text. You can try to increase it slightly, or use the golden ratio by multiplying the font size by 1.618 to get the best line-height value.

The line-height name should be used instead of leading as this name also functions in most of the programming languages.

Font leading vertical space between lines

In the up example, we have the text size set at 12 points. To calculate the optimal font leading size, we multiply this by 1.618 and get 19.4. After that, we round the number to the closest value and get 19.

In order to spread leading evenly inside the lines, we round it up to 20, which is the next even number. The same rules implement to other font sizes. If your size is an odd number, the line-height has to be odd as well.

If you’re not certain for kerning and leading, hold on to the default values.

The Golden Ratio (1.618) has many uses in design. One of those uses is defining hierarchy. Let’s assume your body text (also known as paragraph or <p> in HTML) size is 10p. Multiply that by the Golden Ratio, and you’ll get 16 for the subheading (H2). Multiply it again by 1.618, round it up, and you’ll get 26 for the main title (H1).

You can also use your base-grid value (8 or 10) as a divider for your font sizes. In the case of having a base number of 8, you end up with 16,24,32,40 and 48 possible font sizes that work well together. Of course, it all depends on the font itself, but this method works well for many simple, sans-serif typefaces.

LINE LENGTH

If you’re designing text blocks for mobile devices, try to keep within 30 to 50 characters per line. That will help with achieving legibility on a small screen.

On larger screens (like tablets and laptops), the best range is between 6 and 9 words per single line. This method should help you pick the right font size for a specific text block.

SANS-SERIF FONTS

Sans-serif is a category of typefaces that do not use serifs — the small lines at the ends of characters. Sans-serifs are well suited to digital products because of their simplicity in shape and form. They look good even on lower-quality displays.

SANS-SERIF FONTS Examples

All font styles have their purpose. Sans serifs are more minimal, modern with the primary goal of evading distraction. The simplicity helps in focusing on the content itself without reading the twists and turns of the typeface itself.

WHEN TO USE SANS-SERIF FONTS?

Sans-serifs are the base font style for all digital interfaces.

They work especially well for both headings and mid-length text blocks, descriptions, labels, buttons, and forms.

SERIF FONTS

Serif fonts got their name from having little additional lines (called serifs) at the character edges. They also used to be called Roman fonts.

SERIF FONTS Examples

A serif font is easier to read because the serifs help in discerning the individual lines of text. They control the eye. Serifs are also considered more serious in tone, but the main benefit is simply their ability to be more readable in longer text.

WHEN TO USE SERIF FONTS?

Serif fonts are great for print media (books, newspapers, and magazines).

In digital products, they should co-exist with sans-serif fonts. Using only serifs in an app or on a website is not recommended unless the choice is branding related.

Some fonts are simply not made for UI and high-density displays. Their style is either dated or was severely overused over the years. For that reason, try to avoid system fonts of the past decades (they were often not updated to modern standards).

Try not to use:

Decorative, thin, or otherwise elaborate fonts are a poor choice for UI design

Simple is always the best choice.

Both Android and iOS have their dedicated fonts that should be your first choice for designing apps on these platforms

You don’t have to use those fonts in your design, but unless the font you choose is free, you can face pretty hefty licensing fees. In general, app usage of paid fonts is the most expensive way to use them.