How to Select Fonts When Localizing Apps & Websites

How do we pick fonts that both represent our brand and work together in multiple languages? In this post, we'll explore both practical and aesthetic considerations when tackling this problem.

As more and more businesses go international, our approach to software is becoming increasingly intertwined with good internationalization and localization practices. And the written word is still a primary element of our products’ UIs. So it behooves us as software professionals to consider good typography practices as we do the work of localizing apps and websites.

In this article, we’ll take a look at some of the foundational elements of selecting fonts for international products. We’ll look at how to choose different fonts that work together. We’ll address font selection from a practical perspective, and an aesthetic one that relates to brand personality and feel.

Practical Considerations

There is a bit of science when selecting fonts across languages. We have to consider the languages we’re supporting, of course. Diacritical marks, like accents, also come into consideration. Font styles and height come into play as well. And we could just do away with all of this multi-font stuff and select one font for all our languages. Let’s take a look at these practical criteria for selecting fonts across locales.

Locale Support

One of the first things we need to determine when selecting fonts for our software is the languages we need to cover. This seems obvious, yet there is some nuance that can help us when we’re selecting our fonts for different locales.

How to determine the languages that a font supports will be different depending on our toolset. macOS users can use the built-in Font Book app to get an idea of a font’s supported languages. Google Fonts provides a Languages dropdown that can filter the visible fonts to ones that only support the selected language.

Google Fonts provides a selector that helps us determine languages support for fonts

If we (or our clients) are paying for a font, we should check to see if our font supplier gives us the ability to determine what languages a given font supports. Adobe Fonts offers a language-filtration function similar to that of Google Fonts.

Considering Diacritical Marks

Of course, we will have to test our fonts ourselves before using them in our apps and websites. When we do, we should check to see if diacritical marks, like accents, are supported properly in our fonts. Missing diacritical marks in languages that use them can often change the meaning of words, which is less than desirable.

Font Styles

If we’re using bold or italic styles for highlights, we need to make sure that our selected fonts support them for our chosen languages. It’s actually best to avoid italics altogether since some languages like Arabic have no support for them. In all cases, we should check to see if the fonts we’re using support the styles we need for all our covered languages. Alternatively, we could avoid style variances and use color to highlight our copy.

Font Height

If we’re selecting different fonts for the different languages our software supports, we need to look at the characteristics of our fonts to minimize the chance that our UIs will break in different locales. One of the most important of these characteristics is font height.

The highest point of a font, including diacritical marks, is called the ascent line. Ideally, our selected fonts should have the same ascent line. Otherwise, our UIs’ vertical spacing may need to be adjusted for every language we support. Similarly, the lowest points (descent lines) of our selected fonts should match.

Layout breakages can occur in our UIs if ascent lines don’t match

One Font to Rule Them All

A relatively simple approach to font selection is picking one font that covers all our supported languages. This approach can be a bit utilitarian and lacking in personality. However, if our selected font does match our brand, this approach can save us a lot of time and effort.

For its many supported languages, IKEA uses Tahoma, a font that matches IKEA’s utilitarian brand.

Google Noto Fonts

One option for the “one font” solution is Google’s selection of Noto Fonts. While technically a family of fonts, Noto typefaces are designed to work together practically and aesthetically and cover a large variety of languages.

Aesthetics

Sometimes we need fonts that have a distinct personality that matches our brand. In these cases, we want to match the look and feel of the fonts we select across languages.

Line Weight

The overall thickness of a font’s lines plays a big part in the feeling it conveys. A thick font can be bold and in-your-face, while a thinner font can be elegant and chic. And when we pick different fonts for different languages in our app or websites, we need to maintain a consistent line weight across them.

Avenir Roman (Latin) and Cairo (Arabic) have similar line weight

Feel

Is our brand fun and playful or professional and mild-mannered? This will help determine our font selection. And while our main brand font may have already been selected, we can better match fonts for other languages to it if we can lock down its feel.

Both Monsterrat (Latin) and Tajawal (Arabic) have an elegant, rounded look that conveys warmth and professionalism

Signing Off

Are you working on an internationalized software product? Well, consider joining a number of international companies in using PhraseApp for your internationalization and localization needs. Made for developers, managers, and translators, PhraseApp has everything your team needs to deliver translations in your technology of choice – all in a streamlined, people-first workflow. Take a look at the robust feature set PhraseApp offers, or give it a spin yourself for free.

In a world where everything under the sun has an app or website, we want to be more competitive and reach more people than ever before. Selecting the right fonts for our products as we internationalize them can mean the difference between brittle layouts and ones that work well across locales. And if we go the extra mile (or kilometer), we can select fonts that work for our languages while maintaining the design language of our brand. I hope you’ve learned a couple of things about font selection for i18n here. Til next time 👋🏽

How to Select Fonts When Localizing Apps & Websites
5 (100%) 8 votes
Comments