Applying Type Parameters In Practice
Once you have settled on a typeface, the real work begins: tuning it for your specific product. Body text is the foundation — it makes up the bulk of your content and sets the visual tone. Screen body text typically sits between 12-16px, though your use case may push you beyond that range.
Investment and trading apps are a good example. Users often need to see a dense amount of information on one screen, and traders in particular want to avoid scrolling, as it can slow their reaction time. In such cases, shrinking body text to 10px may be justified, but you must carefully monitor legibility.
Headings deserve the same attention. Establish a clear hierarchy with three to five levels — no more. Avoid uppercase for headings whenever possible; capital letters lack the varied shapes, ascenders, and descenders that help readers recognize words quickly. Long uppercase strings take noticeably longer to parse. If you must use uppercase, keep headings short.
Similarly, skip italics, underlining, or other decorative treatments for headings unless you have a compelling reason. Bold weights can provide visual contrast and accents, but use them sparingly.
Text Columns, Leading, And Tracking
Line length directly affects readability. Aim for an average of 55-60 characters per line; much longer and the eye struggles to track from one line to the next.
Line spacing should generally be 120-145% of the font size — for 12px text, that means a leading of roughly 14.4px to 17.4px. Column width plays a role here: wider columns call for more generous spacing between lines. Narrow columns work fine with tighter leading. Whatever you choose, ensure the spacing between lines is noticeably smaller than the space between columns, so users can easily tell text blocks apart.
Kerning in quality typefaces is already well calibrated by the type designer, but certain situations require manual adjustment. Small text (10px or less), such as captions or tooltips, benefits from a small amount of positive tracking — 1-2% is usually sufficient. Text set entirely in capitals also needs extra letterspacing, since uppercase characters are designed to sit next to lowercase and become too cramped in an all-caps setting.
Negative tracking, by contrast, applies only when using type at extremely large sizes.
- Reserve uppercase for short phrases — no more than three to five words.
- For longer all-caps content, choose a typeface with true small caps rather than scaled-down capitals.
- Never fake small caps by reducing the size of capital letters.
Typesetting Spreadsheets And Data Tables
Spreadsheets and data tables are among the most demanding typographic contexts in fintech. Because digital products display dynamic data, you cannot always predict what values will appear. Work with your analysts to identify edge cases: what happens when a number has ten decimal places? Should it be truncated or rounded? What if cell lengths vary dramatically? Anticipating these issues before release is far cheaper than fixing them after.
A few core rules will keep your tables legible:
Use Tabular Figures
Monospace and tabular digits give every numeral equal width, so values align cleanly in vertical columns. This is essential for dynamic interfaces like watchlists, where numbers change in real time without shifting the layout. In Figma, enable this via Type Settings > Details — the OpenType format supports it natively.
Align Numbers Intentionally
Right-alignment works well for integers, keeping digits in their correct numeral-system positions.
For fractional values, align by the decimal separator instead.
Alternatively, pad empty spaces with zeros; columns will align by the separator automatically.
When adding suffixes like currency symbols or footnotes, use an overhang so they do not disturb the numeral alignment.
Column headings should typically align with the content beneath them. This is also the fastest path for developers working with dynamic data.
Typesetting numeral data in monospaced figures and suitable alignment provides clear data representation and improves legibility.
Respect Localization When Formatting Numbers
The decimal separator differs by region: a period in the US, UK, Australia, and Canada; a comma in much of Europe. Thousands separators vary even more — space, comma, apostrophe, or period depending on locale. Find the appropriate convention for your audience and apply it consistently.
Currency Symbol Placement Matters
Currency symbols do not always precede the value. The dollar sign and most European currency markers generally come before the amount, but the euro sign follows language-specific rules. Per the EU Interinstitutional style guide, the euro symbol precedes the value in English, Dutch, Irish, and Maltese, but follows it in most other European languages.
More unusual placements exist too — the Cape Verdean escudo, for instance, places the symbol where the decimal separator would normally go. Currency codes, by contrast, always follow the value.
Keep Graphics Minimal
Striped row backgrounds, borders, and connecting lines can help users follow data across a wide table — or they can create visual noise. Use them sparingly, and only when there is a real need. If you do use lines, keep them solid and thin; bright colors and dashed patterns draw attention away from the data itself.
A cleaner alternative is spacing. The Proximity principle from Gestalt psychology is a reliable way to group cells into coherent rows without extra decorative elements.
Making horizontal space between columns tighter than vertical space between rows will help you connect elements intuitively without additional graphic details.
Meeting Accessibility Standards
The temptation as a designer is to use subtle color shades, pale shadows, and fine visual detail. But consider the real user: they may view your product on an old monitor, in bright sunlight, or with impaired vision. Roughly 90% of your audience will not notice delicate color schemes — and a meaningful subset will struggle with them entirely. Prioritize contrast over nuance.
Contrast ratio is expressed as X:1, ranging from 1 (no contrast) to 21 (black on white). Web Content Accessibility Guidelines (WCAG) define two levels:
- AA: at least 4.5:1 for normal text and 3:1 for large or bold text,
- AAA: 7:1 for normal text and 4.5:1 for large or bold text.
Most products should target at least AA compliance, depending on audience size, user age, and usage context. Tools like the Web AIM contrast checker and various Figma plugins make verification straightforward.
One practical approach used successfully at Devexperts is embracing dark themes. Dark backgrounds provide more flexibility in color selection, which is especially useful in fintech products that rely on many colors to differentiate values and functions. It is easier to find a color with sufficient contrast against a dark backdrop, making the product usable for a broader audience.
Where to Start Your Typeface Search
Once you have a clear idea of the typeface characteristics your fintech product needs, the next step is finding candidates. The largest marketplace for licensed fonts is myfonts.com, which hosts work from many type foundries and independent designers. Buying directly from a foundry's own website is often a better option, however, as it avoids platform fees for you or the designer and lets you browse the full catalog for future projects.
Several foundries consistently produce work suited to financial and UI design. A good starting set includes:
- Commercial Type — Founded by Paul Barnes and Christian Schwartz, known for the Guardian Egyptian typeface created for The Guardian in 2004–05. Their library spans a wide range of high-quality faces.
- Type.Today — A storefront from Ilya Ruderman and Yuri Ostromensky (also co-founders of CSTM fonts) offering modern, high-quality typefaces. The associated project Type.Tomorrow covers more experimental styles.
- Typotheque — A Netherlands-based company founded by Peter Bilak in 1999 with a large retail library and type-related products in its shop.
- Klim — Founded by Kris Sowersby in 2005, this New Zealand foundry creates custom and retail faces combining historical knowledge with contemporary graphics. Its blog is worth reading.
- Colophon Foundry — A London-based type agency with modern, precisely executed faces and useful trial versions.
- I Love Typography — Both a shop and a long-running blog with type-related materials. The fonts are carefully curated.
- Grilli Type — A foundry with a smaller number of families, each offering a vast range of styles. Trial versions are available for all faces.
- TypeTogether — Established in 2006 by two Reading University graduates, this foundry focuses on text typefaces for editorial purposes, with display fonts also in the catalog.
Budget-Friendly and Alternative Routes
For students or non-commercial projects, check foundry websites for student license support — many offer discounts or free fonts. Trial versions let you test how a face performs before committing. Fontstand is another option, offering fonts for rent at low cost for commercial projects. Future Fonts sells typefaces still in progress at a discount, with all updates included — a reasonable way to invest in a developing project.
If no budget exists, Google Fonts hosts several well-tested, free faces that appear widely in products, including IBM Type Family, Open Sans, PT Sans, Inter, and Roboto. Whichever path you take, read the license carefully and ask the vendor about anything unclear.
The Takeaway
Selecting a typeface becomes manageable when you break it into defined steps and keep the right resources at hand. With that groundwork, the search turns into an exploration rather than a hurdle. Use this guide as a reference point; it is a practical map for navigating the many options available to you.
