There are hundreds of thousands of typefaces to choose from. How to pick the right one for your UI project?
Here are my preferred key elements to help and guide on this selection.
1. Budget:
Let’s start with the most boring limiting factor. How much can you spend on the typeface? Is there already a specific preserved budget for this? Or can you make an estimate of what a reasonable amount of money the project can spend on fonts. The found number can be anything from zero to thousands per month.
Why to start with a budget? It’s the fastest way to narrow down the options. Even knowing your playpark makes continuation of the design much easier. Is the budget none, small or justifiably large? This basically tells you what sources you can use or can you even think of hiring a type designer for the project.
In a UI project, it is crucial to prioritize the budget right from the project's outset, especially considering various licensing policies. Font licensing expenses may be influenced by factors such as the number of distinct website visitors or mobile app downloads. Therefore, it is necessary to project and estimate potential scenarios, considering how potential growth could impact the associated costs.
Your product should have a comprehensive budget for your product needs. This typically includes servers or connected third-party services. The fonts used in the service can easily be added to this same list. Based on your product's revenue model, you can assign a value to, for example, individual page views. Based on these estimates, constraints can be placed on the necessities of maintaining the service. What is a reasonable cost for individual components as well as for aggregated totals.
Setting a budget is not necessarily a creativity-fueling approach to a design project, but it creates important constraints, and constraints foster creativity.
2. Localisation
A Simple but very limiting factor. In which different languages will the user interface be used? If the UI is going to be multilingual that limits the suitable fonts that can be used. Or if there is any specific language that is going to be the main language the font should be chosen suitable for that. For example support or quality of needed diacritics can be a surprise that is visible only after typefaces have been used in the UI.
3. Design Goals
What are the design goals? What measurable objectives your UI Design has. These goals should be the roadmap for your design and that way be the determinant for the selection of the right typefaces.
Design goals can be for example: Functionality, Accessibility, Emotional Impact, Efficiency and Usability and Cross-Platform Compatibility. All these samples have different approaches for design and all can be relevant for your project. The key is to find a perfect balance between what to emphasise.
4. Brand Guidelines
If the brand guidelines don't provide strict rules on what typefaces can be used in the UI context you have to make decisions how the fonts in UI align with other materials from the same brand.
Does the brand have really unique typefaces in use, could these be used for example as an display typeface in UI in places like larger headers.
5. Readability according for the purpose
UI copy can be divided into three main categories. Functional UI copy such as buttons, non functional UI copy like article text and last numeral data. The ratio between these three categories determines what kind of readability is key to your project. Should the typefaces be optimised for long scalable texts or is the focus more on function oriented UI views. If analytics such as graphs and tables are the key elements of your UI you should really focus on the details of how the data of numbers is presented with different typefaces.
Some thoughts for readability:
- Enough x-height. Plenty of x-height makes the texts easier to read in smaller sizes.
- Distinguishable letters. Some typefaces have similar shapes used in different letters or numbers.
- Test your typefaces. Most likely you need to have a type that looks good both large sizes and small sizes all the way to 10px. And if your project is web UI the fonts could be displayed on mobile devices or large 4k screen with different browsers and different Operating Systems which can cause differences on rendering the fonts.
And last. Do not be overwhelmed by the infinite choice of resources
There isn't a designer who hasn't been lost in an endless search for just the right font. The guidelines above should at least make it easier to narrow down the options. Good luck with your search.