wp-block-quote">

Localization is more than just writing your content in multiple languages. You need a strategy to determine what localization to send, and code to do it.Sam Richard in Smashing Magazine

As we spoke about in our last article, localisation (or ‘l10n’) is the process of adapting an existing app or website for a different region by adding locale-specific features and text (e.g., translating the language).

A man wearing a sweater with the American flag on it, sweating, to depict the word sweater. Next to him is a man wearing the British flag on his jumper. — Sweater vs Jumper

Although all translation processes are a form of localisation, not all localisation processes involve translation. Localisation can also take the form of changing date formatting, currency symbols, or removing images that are culturally insensitive. In short, making your product accessible and appropriate for a different audience.

Use multilingual typefaces

It’s not just what you say, but how it’s displayed that matters in the design process – especially regarding font styles from one language to another.

An animated screen capture of the Google Noto font landing page being scrolled to demonstrate Noto in Japanese, Egyptian Hieroglyphs, Math, Arabic, and Thai. — Noto: A typeface for the world

Chinese, Japanese, Korean, and Hebrew are just some of the more visually detailed languages that use more pixels than alphanumeric characters.

Whilst English typography uses parameters like ascender, cap height, baseline and descender, Japanese for example uses none of these, and often requires a larger font size, and more generous letter spacing and line height.

Without the right font for the right language, the design of an app can quickly be destroyed. Google on Noto fonts

Choosing the right font for the text you’re localising is a great way to navigate these issues. As shown above, Google released Noto as a font for every language, but here are 16 more multilingual fonts to explore.

Letter

An AI-assisted newsletter builder for content creators, designers, and developers.

This article is supported by Letter.

Adapt your visuals to your audience

Images tend to be the first thing people look at when a page loads, and can set the overall tone. For example, a seemingly innocuous illustration of a bacon strip could be considered highly offensive in countries where pork is prohibited. And although it’s commonplace to see women baring their skin or wearing tight clothes in Western cultures, it’s considered a religious no-no in others. (More on cultural differences later.)

Additionally, whilst it’s deemed acceptable – and even patriotic – to display the Star-Spangled Banner or Union Jack, it’s considered highly offensive to use the Saudi Arabian flag in certain situations.

Emojis can convey a whole host of emotions, as Andy Murray demonstrated in a Tweet summary of his wedding day:

A tweet by Andy Murray composed entirely of emojis, depicting his wedding day e.g. haircut, cry, car, church, ring, wine, beer, sleep — Andy Murray tweets about his wedding day entirely in emojis

But emojis can also appear vastly different across devices and cultures, altering their meaning. When in doubt, leave it out.

“In China, the slightly smiling emoji is not really used as a sign of happiness at all [and] instead implies distrust, disbelief, or even that someone is humouring you.” – Alex Rawlings for BBC Future

Colour connotations vary between cultures and religion, and could cause an unintentional reaction. The colour yellow generally represents happiness, but in Latin America is associated with death and mourning. The colour red, whilst a lucky hue in China, represents communism in the Eastern Bloc.

For a more in-depth analysis of colour meanings across the globe, check out this article.

Localising your text elements

Bidirectional text support during the initial internationalisation phase means once you get to localising your product, supporting RTL Hebrew or vertical Kanji symbols shouldn’t be an issue. But then comes the tricky part… translation software such as Google translate isn’t always reliable, and can leave the text even more confusing than it was in its original version.

Google translator shows mis-translation of the colloquial phrase ‘Turn down for what’ as ‘Rechazar lo que’ in Spanish — Babbel: 15 Best Google Translate Fails

“Considering 65% of people prefer to read content in their local language, that’s a pretty huge barrier.” –CSA Research

Where possible, it’s always best to get the human touch and find someone proficient in the language to translate. A close second is a reliable plug-in. Two examples are Smartcat Translator and Look! Translator.

Spelling variations between American English (AmE) and British English (BrE) has caused many internet wars. Here are the rules each tends to favour (or is that favor?).

Spelling variations between American English (AmE) and British English (BrE)

Differences in numbers across regions

This includes:

Numeric ComponentExamples and ResourcesDate and time formatUK uses dd/mm/yy, whilst USA uses mm/dd/yy

🔖 Date and time localization

🛠 Moment.js javascript library has multiple locale support.

Time ZonesChina: CST, US: EST, PST, CST, Europe: CET…

🔖 Localizing Times in JavaScript

🛠 Moment Timezone can parse and display dates in any timezone.

Currency$, ¥, £, €, ₩, Kr…

🔌 Figma Plugin: Format Currency by Yuan Qing Lim

🔖 Localization sounds simple, but it is not: Part 2 — Supporting multiple currencies

🔖 Formatting localized currency (example design guidelines)

Units of MeasurementImperial vs metric.

🛠 JS Quantities – a javaScript library for quantity calculation and unit conversion

🔖 Displaying metric and imperial measurements

DecimalsUK/USA use a period where Spain uses a comma and vice versa. E.g. One thousand and ten euros = 1.000,10 € – the “.” is used to separate thousands and “,” to indicate decimals.

Gif shows the words day, month, and year in coloured blocks that are changing order according to how the date is written in different regions — Date order in different regions

Case Studies

Here are some well-known brands who have successfully localised their offerings, and how they did it:

Notion – Notion is now in Japanese! みなさん、こんにちは！
Netflix – 4 things to learn from Netflix’s localization strategy
Spotify – Spotify localisation: a case study

Image depicts the Netflix homepage in Japanese — Netflix’s homepage localised for Japanese viewers

So there you have it, the A-Z of how to localise your product. When you adapt your app or site for a new jurisdiction, it’s not just the translation of text you need to think about; there are cultural discrepancies, linguistic nuances, and imagery blunders to consider. Research your target market, and get that cultural thumbs up before launching your product…providing it’s not in Greece.

Image shows the discrepancies between American English and British English. For example, colour is spelled without the U in the USA. Also, the month comes before the day when writing a date, whereas it’s the opposite in British English. — The discrepancies between American English and British English.

Have you localised a product recently? What are some of the challenges and wins you experienced? Let us know!

Designing for Different Cultures: Localisation ≠ Translation