Top 5 Fonts That a UI Designer Needs In 2022
Based on accessibility.digital.gov, you can see that they say to choose a typeface that emphasizes clarity and legibility. First
- it performs well when it’s small or large,
- it has large x-height,
- the character is large for its point size,
- the metrics (such as x height) are consistent between letterforms,
- individual letterforms are distinct in shape and can’t be confused with others, for example, capital I (I – l – 1), l, and one are distinct, zero and o (0 – o) are distinct,
- the typeface support all characters and font styles that are needed.
Inter
Now the very first point that I have for you is “Inter”. It is a Google font. It has been created by “Rasmus Andersson”. It is one of the most popular and common UI design fonts. It has quite a standard look, nothing too unique about it but the legibility and the symmetry of this font is absolutely perfect. It has 69% x-height, meaning that the baseline is 69% of the entire height of this font. So, it sits within the 68 to 69 percent range which is preferred for something to be used in UI design.
Space Grotesk
If you are looking for a UI design font with a little bit more personality I would highly recommend another google font Space Grotesk by Florian Karsten. It has only 70% x-height which is great for legibility. It reads perfectly well at a small scale in the top left corner. It also reads perfectly fine at a large scale.
Work Sans
Now the third font is Work Sans which is also a google font. It is quite similar to Inter with some slight nuances in the actual typeface. It reads perfectly fine when it’s small and also reads well when it’s large. It also has 75% x-height. So it is little more than what is recommended which is around 68 to 70 percent but it reads perfectly well when it is on a very small scale.
DM Sans
The next font we have is DM Sans. And this is a google font once again created by Jonny Pinhorn & Colophon Foundry. It has x-height of 72% which is still sits around the great legibility ratio. It does read quite well on a small scale as well as a large scale.
Satoshi
The next one we have Satoshi. Satoshi isn’t a google font, it is a fontshare font and is been created by Indian Type Foundry. It reads well in the small case and reads very well in the large case. It has 66% x-height. I’ve personally used this on a number of my projects and really get a best result.
