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

Created on November 12, 2023 at 10:46 am

How To Choose Typefaces For Fintech Products: Best Practices Guide (Part 2 CARDINAL )

14 min TIME read

Share on Twitter, LinkedIn

Finding the right typeface is tricky as a whole. Dividing the process into steps and having the right information at hand will make this journey a design adventure full of surprises. To avoid sinking into unnecessary details, use this guide as a map for your path. Review various font paraments and learn how to apply them to your designs. Finding the right typeface is tricky as a whole. Dividing the process into steps and having the right information at hand will make this journey a design adventure full of surprises. To avoid sinking into unnecessary details, use this guide as a map for your path. Review various font paraments and learn how to apply them to your designs.

Welcome to the second ORDINAL part of the guide to typography in fintech. In Part 1 CARDINAL , we reviewed the key points to consider when choosing typefaces:

What is the content of your product? What type of data do you mainly work with?

Who is your common user, and in which circumstances do they use the product?

What are the specific points you need to keep in mind? For example, what language support is planned for the future? Or, maybe you need to use some specific glyphs (math or rare currency symbols) in your product.

We also reviewed all font parameters and started investigating how they affect readability and legibility. Now, let’s discuss how to apply them to your designs.

Adjust Texts And Tables

Point Size WORK_OF_ART

When choosing a point size, we need to consider the body text first ORDINAL . Body text is the most massive part of your content, and its style determines design and visual appearance. It’s also essential to remember that x-height might vary slightly from type to type. Therefore, not all typefaces will look the same in the same size, and you will probably need to adjust it.

The general rule is that the size of the screen body text should be 12 CARDINAL -16px. But this measurement may change depending on your needs. When you work with investment apps, users should be able to see a large amount of information on a single screen. An appropriate solution here might be to reduce the body text size to 10px but pay attention to legibility. In addition, traders usually want to see big amounts of data on a single screen, without scrolling anything, as it might affect the speed of reaction. We had such a case when a client asked us to make all the body text smaller to fit the screen.

Comparison of x-heights in the same point size. (Image credit: Daria Karpenko PERSON ) (Large preview)

Secondly ORDINAL , consider headings. Try to build a clear content hierarchy that will help users to work with the content. Figure out how many levels of headings you need. Don’t use too many, aiming for three to five CARDINAL levels.

A page with typography style definitions for one CARDINAL of our projects. We have five CARDINAL levels of headers here, two CARDINAL of them both in lower and uppercase. Uppercase versions are used mainly for specific information, such as currency symbols, tickers, and so on. (Image credit: Devexperts PERSON ) (Large preview)

Try to avoid using uppercase capitalization. But if you capitalize headings in uppercase, make them short.

When set in uppercase, the text is less legible. The lowercase text has different shapes, ascenders, and descenders. They help us intuitively recognize letters in context without spending time deciphering them when reading. Uppercase text reduces this recognition because capital letters generally have square shapes. So, the more capitalized text you have in a row, the more time a user needs to read it.

Compare these two CARDINAL paragraphs and the time you need to read each of them. Did you notice that you recognize lowercase text faster? (Image credit: Daria Karpenko PERSON ) (Large preview)

Another tip is to avoid italics, underlining, and other ways to differentiate headings visually unless you’re working on a small visual material and have a strong reason for such expressive typography. If it’s a must, choose a bold font for visual contrast and accents, but use it sparingly.

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 ↬

Text Column

When working with texts, you must determine a suitable length of text lines. Overly long text lines are hard to follow. Generally, the average size is 55-60 CARDINAL characters per line. Following these values will help you keep the text readable.

For Devexa GPE , we chose a reasonable width of text blocks. Big messages are broken down into multiple lines so users can read them comfortably. (Image credit: Devexperts PERSON ) (Large preview)

Line Spacing

The next step is to choose an appropriate line spacing (or leading) for your text. This measurement determines the distance from the baseline to the baseline in a text paragraph. Usually, optimal line spacing equals 120% PERCENT of body text size, e.g., 12×1,2=14.4 CARDINAL for 12px text. But depending on the circumstances, you can vary this setting between 120% and 145% PERCENT .

Line length and spacing. (Image credit: Daria Karpenko PERSON ) (Large preview)

Besides the point size, the width of the column is an important aspect that affects line spacing. Generally, the rule is the wider the text column, the more spacing between lines you need (see the illustration above). For narrow columns, quite tight spacing works well, as you don’t need to follow the long way from the beginning to the end of the line. Also, consider the space between columns: line spacing should not be larger but noticeably smaller, as it will cause confusion and mess. Users should be able to distinguish text blocks from one another easily.

Letterspace PERSON And Tracking

In high-quality typefaces, type designers carefully adjust letter spacing so you can use them by default. However, there are several cases when additional settings are required.

First ORDINAL , when setting text in small point size (10px or less), e.g., for captions or tooltips, add some small positive tracking — 1–2% PERCENT is enough. It helps make the text more legible.

Positive tracking is also needed in lines set in capital letters. Uppercase characters (and their sidebearings) are designed to come before lowercase at the beginning of a word. For this reason, the All Caps setting is usually too tight and requires additional spacing.

Tips:

Think twice when setting text in uppercase, and don’t do this without a strong reason because it affects legibility.

Avoid more than three to five CARDINAL words in uppercase.

For a larger amount of text, choose a typeface with small caps.

Don’t try to imitate small caps by using capitals in smaller sizes.

All-Caps captions in the Devexa GPE platform are one CARDINAL word long and have positive tracking. (Image credit: Devexperts PERSON ) (Large preview)

Negative tracking might be applied when you use a type in an extremely large point size.

Small negative spacing in numerals. (Image credit: Devexperts PERSON ) (Large preview)

Design The Spreadsheets WORK_OF_ART

A spreadsheet is a complex form of data representation that should have a high level of legibility. Setting up a spreadsheet can be tricky because, in digital products, we work with dynamic data, and therefore, we can only sometimes predict their behavior.

A good practice is to consider all possible corner cases. What if a number has ten CARDINAL digits in the fractional part? Do we really need to show the whole number, or can we shorten it? What if cells contain data of very different lengths? Ask your analyst to consider all possible situations to avoid unpleasant surprises after release.

Here are several core rules to improve your spreadsheet:

Use Monospace (Or Tabular) Digits

Monospace digits are a set of digits with equal space width and central position within them, unlike default ones. It’s the most convenient way to align data precisely, allowing you to place digits in a column one CARDINAL below another. Tabular digits are especially useful in compound products like traders’ watchlists and spreadsheets. They help to keep the layout while values change in real time.

The Open Type format supports this feature and can be enabled in the Type Settings menu > Details in Figma ORG .

Where to find Monospaced PERSON digits feature in Figma ORG . (Image credit: Daria Karpenko PERSON ) (Large preview)

Align Numbers WORK_OF_ART By The Right Side Or By A Decimal Separator

Depending on using integers or fractionals, choose the appropriate alignment. The aim is to place digits with the same meaning one CARDINAL below another in a column.

Right alignment allows you to align digits according to their position in the numeral system. It works well if you work with integers.

If you work with fractionals, align by a decimal separator.

Alternatively, fill empty spaces with zero CARDINAL symbols. In this case, columns will align by separator automatically.

In Gate45, we have two CARDINAL types of numeral columns: the ones that are not required to be comparable between each other (VWAP) have left alignment, the rest have right alignment, and decimals sit one above the other. (Image credit: Devexperts PERSON ) (Large preview)

When adding additional symbols after values, such as currency or footnote, do it with an overhang.

Prices are carefully aligned by the decimal separator in the given example. Currency codes are aligned to the left, next to the price. (Image credit: Devexperts PERSON ) (Large preview)

Choose a suitable alignment for the column’s headings. Usually, the heading is aligned on the same side as the column’s content, and this is the most convenient and fast path for developers when working with dynamic data.

Use Appropriate Separation Marks

Consider applying different rules to the sign of the decimal separator. Depending on localization, it might be a comma or period: use periods for the US GPE , the UK GPE , Australia GPE , and Canada GPE , and choose a comma if your audience is from European NORP countries, like France GPE , Germany GPE , and so on.

Thousands CARDINAL of separators vary between space, comma, apostrophe, and period, depending on the region. Find out which sign is used in your case and apply your approach consistently.

Possible variations of decimals and thousands CARDINAL of separators in various countries. For more information, check the Wiki PRODUCT article. (Large preview)

Pay Attention To Currency Symbols

Note that the appropriate place for currency symbols also varies. The dollar sign and most signs of European NORP currencies usually stand before the value. If you work with a specific symbol, ensure you know the usage rules.

The placement of the euro sign is determined by language. According to the EU ORG

Interinstitutional NORP style guide (page 114 CARDINAL ), the character is placed before value in English LANGUAGE -speaking countries, as well as in Dutch NORP , Irish NORP , and Maltese NORP . In all other European NORP languages, the order is reversed.

Currency codes and corresponding symbols. (Image credit: Daria Karpenko PERSON ) (Large preview)

There are also rare cases when symbols are placed in the decimal separator position, for example, Cape Verdean LOC escudo.

Make sure to place currency codes after value. It is a rule.

Avoid Unnecessary Graphics

Striped backgrounds, lines, and borders are instruments of cell connection that help users follow the line in the spreadsheet. Repetitive striped backgrounds and lines often create visual noise and disturb attention. Make sure you have a solid reason to use it and apply sparingly.

Avoid using bright colors and patterned lines (dashed, dotted, and so on). Lines and borders should be solid and thin, as they are supporting elements that shouldn’t distract from data.

A neat layout is the best way to connect elements (cells) into a solid unit (row). Use the Proximity principle to show a relation between objects.

Try it before using any extra elements.

Master Accessibility

If you’re a designer, you probably use high-quality screens to see a wide color range. In this situation, it is very tempting to use subtle color shades, pale shadows, and other details to make your product look visually sophisticated.

In real life, the average trading platform user may work in various conditions: on an old computer, on a low-quality screen, or simply in bright sunlight. Do not forget about people with special needs: low vision, color blindness, and so on. It is essential to remember that 90% PERCENT of your audience will barely notice delicate color schemes and nuances. And this is a reason to take care of the contrast ratio.

Contrast Ratio

Contrast ratio is a numeral value in format X:1 where X may vary from 1 CARDINAL (weakest contrast) to 21 CARDINAL (maximum). 1:1 means comparing colors with no contrast, and 21:1 CARDINAL is obtainable by comparing black and white.

When checking your contrast ratio, you will meet such labels as AA ORG and AAA ORG . These are levels of accessibility, from lower to higher, based on WCAG accessibility standards. According to several factors, such as how broad your audience is, which is the average age of the user, and which possible use circumstances you can predict, you should meet at least AA.

There are different criteria for text and graphic elements for each standard. Each level requires a specific contrast ratio:

AA : at least 4.5:1 CARDINAL for normal text and 3:1 PERSON for bold or large text,

: at least 4.5:1 CARDINAL for normal text and 3:1 PERSON for bold or large text, AAA ORG : 7:1 for normal text and 4.5:1 CARDINAL for bold or large text.

Examples of color pairs, their contrast ratio and the compliance with WCAG requirements. (Image credit: Daria Karpenko PERSON ) (Large preview)

How do you check if your product meets these criteria? You can use one CARDINAL of many online tools, for example, Web AIM ORG contrast checker. There are also plenty of plugins in Figma ORG that you can try.

At Devexperts PERSON , we usually create products with dark themes as it gives us more freedom in color choice. Due to our specialization, we often need many colors to highlight various values and functions. It’s easier to pick a color with enough contrast to the dark background and make our products accessible to as many people as possible.

Find That One CARDINAL Typeface

So, knowing these simple steps to consider, it’s time to choose a font for your fintech product. There are plenty of marketplaces where you can purchase licensed typefaces. Check myfonts.com first ORDINAL , as it is the biggest player in this field. Many type foundries and independent designers sell their fonts on this platform.

You can also buy a font directly from the type foundry’s website. This is probably the best idea, as you (or the type designer) will not pay an additional fee to the platform. You can also explore all typefaces by this type foundry and find some more fonts you like for future projects. Here is a list of foundries to check out.

Commercial Type

Commercial Type’s library includes a wide range of typefaces of exceptional quality.

The founders of Commercial Type are Paul Barnes PERSON and Christian Schwartz PERSON , designers who are well-known for their typeface Guardian Egyptian ORG , created for The Guardian ORG in 2004–05 DATE .

Type.Today

Type. Today DATE is a store with an inspiring collection of modern, high-quality typefaces. The project was founded by Ilya Ruderman PERSON and Yuri Ostromensky PERSON , who are also co-founders of CSTM ORG fonts type foundry.

You might also want to check the other part of the project: Type. Tomorrow DATE , which presents more experimental and crazy typefaces.

Typotheque

Typotheque PERSON is a Netherlands GPE -based type design company founded by Peter Bilak PERSON in 1999 DATE . It has a massive library of retail fonts that may serve any designer’s need. They have plenty of great type-related products in their shop.

Klim

Founded ORG by Kris Sowersby PERSON in 2005 DATE , Klim PERSON type foundry creates custom and retail typefaces. Their work combines deep historical knowledge with a contemporary approach to graphics. Check their blog — it has lots of exciting reading.

Colophon Foundry

Colophon Foundry is a London GPE -based type agency that offers an impressive choice of modern, perfectly executed typefaces. Don’t forget to check trials as well.

I Love Typography

WORK_OF_ART ILT is not only a shop with an impressive collection of accurately-picked typefaces. It is also a blog with lots of great type-related materials on a wide range of topics. Highly recommended!

Grilli Type

Grilli Type PERSON is a foundry that offers types with a very modern feeling. Their library is not that wide in amount of typefaces, but each has a vast number of styles. They also provide trial versions for all their faces.

TypeTogether ORG

Established in 2006 DATE by two CARDINAL graduates from Reading University ORG , TypeTogether ORG foundry is concentrated on text typefaces for editorial purposes. Except for that, they have plenty of display retail fonts in their catalog.

If you’re a student looking for a typeface for non-commercial use, check student license support on the website. Sometimes, foundries give scholars good discounts or even offer some fonts for free. There are also trial versions provided, so you can check if the typeface works well for your project before purchasing.

Also, you can try Fontstand PERSON . It is a great platform where you can try and rent fonts for a couple of dollars MONEY and use them for commercial projects.

At Future Fonts ORG , you can find a great variety of typefaces in progress available for purchase with a good discount. You will also receive all updates for the purchased typeface, which sounds like a great investment!

And finally, if you don’t have a budget at all, there are still some options. For example, Google Fonts PERSON have a number of good typefaces which you can use for free for any kind of project. Take a look at IBM Type Family ORG , Open Sans, PT Sans ORG , Inter ORG , or Roboto PERSON . These are widely used fonts we all know and meet in various products. For sure, you will find something suitable there.

In any case, do not forget to read the license carefully, and feel free to ask the vendor/type foundry if you have questions.

Conclusion

Finding the right typeface is tricky as a whole. Dividing the process into steps and having the right information at hand will make this journey a design adventure full of surprises. To avoid sinking into unnecessary details, use this guide as a map for your path, and you will never get lost.

That’s it! Hopefully, you’ve found this article helpful for improving your workflow. Explore typefaces, as this is a great and powerful instrument for designers, and stay in touch!

Further Reading On SmashingMag ORG

(yk)

Connecting to blog.lzomedia.com... Connected... Page load complete