How To Choose Typefaces For Fintech Products: Our Best Practices Guide (Part 1) — Smashing Magazine

By admin
How To Choose Typefaces For Fintech Products: Our Best Practices Guide (Part

1
CARDINAL

)


14 min
TIME

read

Share on Twitter, LinkedIn

Fintech products are systems that are overloaded by many types of data like numerals, texts, spreadsheets, and so on. Working with these products requires the designer to pay a high level of attention and responsibility, as he becomes a provider between user and data.

Daria
PERSON

shares her approach to digital product typography and reviews the key points to consider when choosing typefaces.

Fintech
ORG

products are systems that are overloaded by many types of data like numerals, texts, spreadsheets, and so on. Working with these products requires the designer to pay a high level of attention and responsibility, as he becomes a provider between user and data.

Daria
PERSON

shares her approach to digital product typography and reviews the key points to consider when choosing typefaces.

Hi! My name is

Daria
PERSON

, and for

the last two years
DATE

, I’ve been working at

Devexperts
PERSON

. I have experience creating various products, from crypto wallets to exchange administration platforms. Our target audience is diverse from professional and non-professional brokers, novice and experienced traders to dealing staff and trade desk operators. All of them use financial tools

daily
DATE

, and some of them — with high intensity.

Сontinuous use of the product under high tension conditions (which is common when we talk about the financial sphere) might cause eyestrain and general weariness. Consequently, users might make poor decisions and become inattentive to details, which will lead to harming their investment portfolios. My goal, as a designer, is to prevent these drawbacks and make

daily
DATE

operations comfortable.

The main designer’s instrument to work with the product is the

UI
ORG

kit, a collection of reusable components, such as controls, color palettes, effects, and text styles. Typography is an important part of it as it defines a text style library and conveys the most valuable and powerful instrument — the information — from platform to user.

To explain my approach to digital product typography, I invite you to go over each step, from research to implementation. Before diving deep, let’s cover the basic terms.

Basic Terminology Before We Begin

A typeface (or a font family) is a range of graphically similar fonts with a common visual idea behind them. For example,

Helvetica
ORG

is a typeface.

A font is part of a typeface. It is a collection of symbols that might differ in weight (

Semibold/Bold/Black
WORK_OF_ART

), might be upright or italic (Regular/Cursive/Italic), have various widths (Narrow/Wide), and so on.

The definition of a typeface/font family and a font. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

Please keep in mind that these

two
CARDINAL

terms are often interchangeable, even when used by type designers.

Now that we have our basic terms defined let’s go over our suggestions on the workflow when creating or choosing a font for a fintech product.

Web forms are at the center of every meaningful interaction. Meet

Adam Silver
PERSON

’s

Form Design Patterns
ORG

, a practical guide to designing and building forms for the web. Jump to table of contents ↬

Step

1
CARDINAL

: Detect Data Types And User Flows

If you’re a fintech designer in the trading sphere, you’ll mainly deal with spreadsheets. Usually, they represent fundamental page units with data on markets.

Other standard data media include product cards and forms for order entry, cancellation, adjustment, and so on. Product cards provide users with more detailed information on trading instruments, while forms allow users to interact with markets. These interactions are user flows.

What do all these different kinds of information have in common? They’re all displayed as texts. In this case, the core design values are the following:

An appropriate typeface,

Working with typography,

A layout,

An accurate representation of information.

Examples of data-overloaded interface, exchange administration platform. (Image credit:

Devexperts
PERSON

) (Large preview)

In the picture above, you can see the example of a platform for exchange administrators with all typical types of data. A spreadsheet displays a list of trades and

dozens
CARDINAL

of their parameters. At the back is an example of a trading instrument card (currency pair) with dynamic quotes that update in real time. The chart displays trade history with prices and volumes, and the Market Depth graph at the right shows the current state of the market — the volume of Buy and Sell orders and their prices.

Now when we have defined the most common types of data in fintech products, let’s zoom in and see what specific circumstances we need to consider in our product.

Step

2
CARDINAL

: Consider Your Requirements

Best design practices facilitate current requirements and consider potential scenarios of product evolution. When working on a fintech product, you should also consider features such as language support, special characters, and use conditions. Let’s have a look at these spheres and highlight the most considerable points in each of them.

Language Support

Forecasting specific typographical cases at the start of a project might be a great investment for future development. For instance, product localization and translation to various languages is

one
CARDINAL

such case. Should your product support

one
CARDINAL

or multiple languages? If multiple, try to understand the average difference in word lengths.

Distribution of word lengths in various languages. (Source: www.ravi.io) (Large preview)

For example,

German
NORP

words are generally much longer than

English
LANGUAGE

ones. Compared to these

two
CARDINAL

,

French
NORP

and

Spanish
NORP

words are somewhere in between. Consequently,

French
NORP

or

German
NORP

versions need more text space in design than the

English
LANGUAGE

one, which will cause layout changes.

Compare the same modal window for

English
LANGUAGE

and

French
LANGUAGE

language settings. (Image credit:

Devexperts
PERSON

) (Large preview)

Many languages also use diacritics (additional typographical signs above and under the letters). These writing systems may require more space between lines to make texts more legible.

Spacing differences depending on the use of diacritics. (Image credit:

Daria Karpenko
PERSON

) (Large preview)


Logographic
PERSON

or logosyllabic writing systems are quite the opposite: unlike

Latin
NORP

-based languages, they are usually very compact. Few font families support both hieroglyphic and

Latin
LANGUAGE

languages, though. So, if you can’t find an appropriate font for your needs, you’ll have to pick out

two
CARDINAL

different typefaces that will match visually.

Having information on supported writing systems and future localizations will allow you to choose a typeface with all the necessary languages. Contact the product owner or manager to determine which languages may appear in your product. This way, you will develop a design for all corner cases and create a visual system fit for all localizations.

Required Symbols

Another critical aspect to consider from the start is special characters. For example, in the fintech sphere, the designer deals with trading markets and often needs to use a variety of currency symbols, math formulas, and decimals.

USD symbols in our products. (Image credit:

Devexperts
PERSON

) (Large preview)

There are plenty of ways to find out what glyphs a typeface includes. You can learn this information on

Type Foundries
ORG

websites and typeface marketplaces. Check the type specimen to explore all supported features, glyphs, languages, and characteristics.

If you already have a typeface on your laptop, it’s easy to check glyphs in a Font book if you use macOS or a Character map if you operate

Windows
PRODUCT

.

Below, we have an example from

macOS
ORG

. Select the font and switch to the repertoire preview mode to find an entire spreadsheet.

A spreadsheet with PT

Serif Regular
PRODUCT

glyphs. (Large preview)

You can also make use of a font-managing app.

One
CARDINAL

of its perks is the font library management according to characteristics. There are many such apps, so it should be easy to find the one that suits your taste and budget. A good option might be Typeface or

FontBase
PRODUCT

if you’re looking for a free app.

Another challenge with glyphs that awaits you is

Figma
ORG

. Unlike

Adobe
ORG

products, it doesn’t offer a glyph panel. It means you don’t see the full contents of a font and can’t choose a symbol you need directly on

Figma
ORG

. However, you can copy the required glyph from

the Font Book or Character
WORK_OF_ART

map and paste it into your design.

Use Conditions

When you start a new project, consider what type of information it represents and the most common use conditions. For example, if it’s an article, it’s mostly text information with extensive accented quotes, or the text consists of short paragraphs broken down by photos. We presume that the user will most likely read it in a calm setting, as it is the most comfortable way to concentrate on a long text and will need

half an hour
TIME

to finish it.

Let’s review a drastically different case. We’re designing a product for professional use overloaded with data comprising mostly repetitive figures. Users operate various gadgets to work with the data

all day
DATE

in varying conditions. They can get tired and lack attention but must analyze the data and react swiftly.

When we work with fintech products, we mainly work with the

second
ORDINAL

scenario. Our average user deals with numbers and important operations. Investors analyze markets and trade securities, while trade desk operators manage orders. Even a slight hiccup in data performance may cause a great mistake in operations. A carefully selected typeface and precise layout will help you support your user and make their workflow convenient.

Step

3
CARDINAL

:

Discover Typeface Options

Understanding
ORG

typeface features will help you decide on the most suitable fonts. For this reason, we’ll

first
ORDINAL

break down the categories and characteristics of typefaces.

Classes

Typeface classification has been a subject of discussion for typographers for a long time. (For further information, you can read “The trouble with font classifications” and “Talking about type: from

Aristotle to Arial
ORG

.”) For

years
DATE

the common classification, adopted by

Association Typographique Internationale
ORG

was the

Vox-ATypI
ORG

system, invented by

Maximilien Vox
PERSON

in

1954
DATE

. This system is based on

two
CARDINAL

characteristics of type: visual traits and the historical period of its appearance. It included

nine
CARDINAL

categories that were later expanded to

11
CARDINAL

by

ATypI.
ORG

However, typography has developed dramatically, and this system does not reflect modern type design, as it simply ignores a big part of contemporary typefaces. Most modern typefaces tend to have a mix of characteristics from different historical periods and refer to several categories. The endorsement of this system was withdrawn in

2021
DATE

, and, at the current moment, the association is working on a new system that would meet needs of modern typographers.

The

Vox
ORG

system might be useful for the exploration of type design history and research if you want to dive deep into this theme. However, for the

daily
DATE

use of a product designer, classification according to visual characteristics rather than historical periods might be more helpful. The division into

four
CARDINAL

abstract meta-groups, based on the

Vox
ORG

system with some additions from modern typeface design, will help you to classify typefaces clearly enough.

Classification system by

Allan Haley
PERSON

. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

Note: If you’d like to dig further, you may want to check other classification systems.

Typeface Proportions

Typefaces fall under

two
CARDINAL

headings: proportional or monospaced, according to the ratio of proportions within the font.

Proportional types have varying widths of letters according to tradition, rules, and the ideas of their designers.


Monospaced
PERSON

fonts, in contrast, comprise characters of equal width. Design of the glyphs in monospaced typeface may vary: wide characters, such as m or w, may have narrow proportions to fit the width. Such thin letters as i or l may have a lot of empty space around or long serifs to fill this space. In any case, the width of each letter, including its space around, will be equal.

Proportional typefaces are natural and traditionally used for

daily
DATE

needs.

Monospaced
PERSON

fonts are usually used in specific cases when it is essential to set text in accurate columns with each symbol below the other, such as tables with numerals, sales checks, programming code, and so on.

Comparison of proportional and monospaced fonts. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

Characteristics

An essential measurement we constantly work with is the size of a typeface or its x-height. It’s the height of the actual letter in lowercase from the baseline to the mean line that equals character x. Capital height refers to the size of uppercase letters. Small caps are the characters whose height is between lowercase and caps. They are a great instrument for particular cases.

Ascenders and descenders are the elements that go above the mean line and beyond the baseline. The long stem in

h
GPE

is an ascender, and the falling tail in y is a descender.

A counter is an enclosed space inside a letter. For example, in

o
ORG

’s or q’s, the white inner space is a counter.


Serifs
PERSON

are short strokes at the end of stems that differentiate

Serif
PRODUCT

typefaces from

Sans
NORP

Serifs.

Visualized font parameters. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

An aperture describes to what extent symbols are open. A large aperture means that such letters as c or s are open and have a lot of space between their strokes. When these symbols are tight and closed, the aperture is small. This characteristic specifies legibility: a large aperture helps distinguish similar letters in small sizes, such as c and

o.

Contrast
PRODUCT

is a difference between stroke thickness in vertical and horizontal stems.

These terms are basic but essential for understanding how the characteristics of a typeface affect its legibility. If you want to dig into this word, check out the Monotype terms dictionary.

Step

4
CARDINAL

: Define The Typeface’s Purpose

All typefaces may be divided into “display” (or “headline”) and “text” groups. However, there are existing cases when typeface works well both as text and display. (For more information, check “

Text v. Display
WORK_OF_ART

” and “

Selecting Display Type: Getting Started
WORK_OF_ART

.”) Both these sides have their character and tone of voice, but they’re meant to be used in different contexts and situations.

Scale of typefaces. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

Display fonts are better suited for headings, accents, and other cases for large font-size texts. They often have tighter spacing and sophisticated shapes that fade and may cause visual noise in small sizes. But it never hurts to consider the circumstances of use. Users might need more time to recognize a display font with complicated shapes, even in a large size.

High contrast is also a font characteristic of the display role and long ascenders and descenders.

Differences between text and display fonts from the same font family. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

Alternatively, body text fonts have a simplified appearance and a high level of legibility in small sizes. When choosing a typeface for a body text, go for one with low or no contrast. In this case, high contrast will affect readability: thin strokes will cause visual vibration and negatively influence readability. Large aperture and open shapes are also a good choice as they help keep similar letters distinct, such as c and

o.

Different
PERSON

graphics in similar letters, such as i, l, and I, help perceive letters, especially without context (when used in tickers, codes, sets of symbols, and so on). Most text fonts have enlarged x-height and counters, a slight difference in heights between lowercase and caps, and short ascenders/descenders. Thus, it saves vertical space for lengthy texts and ensures their legibility.

Comparison of font families in the same point size. (Image credit:

Daria Karpenko
PERSON

) (Large preview)

If you have plenty of data and need to save horizontal space, a font with compact proportions may be a suitable solution. But avoid overly narrow fonts and consider a font size because you might need to enlarge it a little and add positive tracking, i.e., increased letter spacing (for further information about tracking, don’t forget to check Part

2
CARDINAL

).

Body text in a nice, readable font often needs strong visual accents in your design. You can approach this necessity by differentiating fonts depending on the type of information. For example, you may use

Serif
PRODUCT

for headers and

Sans-Serif
NORP

for body text. The ultimate working solution, though, is to pick a single Font family because it has the same shapes and proportions. For example,

IBM Plex
ORG

has a variety of styles and supports several writing systems.

A typeface name itself can tell you about its purpose. Terms “Text,” “Display,” “Compact,” and “Caption” in the font’s name will help you make the right choice.

In my projects, I usually use

Sans-Serif
NORP

fonts with low contrast for practical reasons. Sans Serif doesn’t have a bright appearance or small details. Consequently, it draws little attention to itself and reduces visual noise, making the text easier to read. As a result, the user quickly receives, understands, and processes information.

Prepare For Part

2
CARDINAL

!

This article reviewed the key points to consider when choosing typefaces. We also reviewed all font parameters and started investigating how to choose the most suitable font for various scenarios.

The next part will be all about applying the fonts we chose. We’ll discuss how to work with texts and tables and what to pay attention to when handling special characters.

Another major topic will be readability improvement through the length of text lines, line spacing, letter spacing, and tracking.

We’ll also touch upon the topic of color contrast. It goes hand in hand with caring for users with all kinds of needs and work conditions.

Stay tuned!

Further Reading On

SmashingMag
ORG

(yk)