Choosing the Right Font for SaaS Application

Published in

fleetx engineering

3 min readOct 9, 2023

Typography

In the Fleet management product experience, users have to read and process a lot of information during their user journey. This happens at different levels: browsing categories, reviewing day-to-day tracking vehicles, reading tabular data, etc. Easy readability and which is clear enough to be read easily, particularly in small font sizes, are crucial for a good fleet management experience.

The font we used, Roboto, does not utilize the space and looks cramped when displaying large amounts of data. So we are planning to switch to Inter typeface, which is a font designed for improved readability of lowercase and sentence case on screens.

We did a small experiment using Figma. We made a file and added two paragraphs side by side. Set the Roboto typeface for paragraph one and Inter for paragraph two. Both paragraphs have the same size, for example, 16px, to help us see the difference when we compare these 2 paragraphs.

Codepen font comparison Inter vs Roboto.

Compared to Inter, Roboto has a smaller scale.

Inter Font

Inter font is a free and open-source sans-serif typeface. Inter is a variable font family, carefully crafted & designed for computer screens. Inter is used to make mixed-case and lower-case text easier to read, It has a higher x-height. Moreover, a variety of OpenType features are available, including tabular numbers, slashed zero for distinguishing “0” from “o,” contextual alternatives, which vary punctuation based on the shape of nearby glyphs, and more.

Inter Regular

Inter Bold

Character spacing

Two types of character spacing are Tabular and proportional. When selecting a typeface for a project, consider the numbers as well as the letters. If numerals will appear as part of the text — such as address information in corporate identity, or quantities and measurements in marketing collateral — you will need proportional figures. For a financial report or other columns of statistics, tabular figures will be needed.

Proportional: a font type in which the width of letters and symbols varies depending on the letter or symbol

Tabular: the figures are designed for tables, so the figures all have the same advanced width.

Inter fonts are also highly readable at small sizes, clean, and contain a wide selection of weights (eg light, regular, bold, extra bold, etc). There are 9 weights and style in the font