Internationalization
Users of our design system can modify their implementation to build experiences that work everywhere by allowing users to complete journeys in their preferred language and locale. The guidelines below consider languages that use different alphabets, spacing, word length, and right-to-left reading direction.
Localization
Localization is adapting your product’s design so that it works well visually and semantically for different locales and languages. For example, adjusting design for different semantic meanings behind icons or colors or aligning text properly for RTL languages.
Below are additional guidelines that should be taken into account when designing for localization.
- Prepare components for text expansion
- Consider semantic differences between cultures and locales
- Check in with colleagues that have local knowledge to ensure accuracy
- Make sure all visuals and iconography make sense, especially ensure that they do not have alternative meanings in another culture
- All text needs translating, including alt text and aria labels
- Apply a language directly to design system components without considering local norms
- Modify components for localization in a way that makes them inaccessible
- Don’t hard code text
- Don’t apply another language to text without translating any alt text and/or aria labels
Text Expansion
When implementing multiple languages, it is important to consider the length of text. Length of text often changes when switching languages even if they use the same alphabet.
For example, see below for an example of translating text from English to French.
Hello, how are you? | Bonjour, comment allez-vous?
In this simple example, the French text is 26 characters in length while the English text is 18 characters. This is a 62.5% increase in text length.
Below is a great guideline from Eriksen that highlights average text expansion percentages to and from English to the selected language.
| Language | From English | To English |
|---|---|---|
| Arabic | +25% | -20% to -25% |
| Chinese | varies | varies |
| Danish | -10% to -15% | +10% to +15% |
| Finnish | -25% to -40% | +30% to +40% |
| French | +15% to +20% | -10% to - 15% |
| German | +10% to +35% | -20% to -35% |
| Greek | +5% to +10% | -5% to -20% |
| Japanese | varies | +10% to +55% |
| Korean | -10% to -15% | +10% to + 20% |
| Norwegian | -10% to - 15% | +10% to +15% |
| Portugese | +15% to +30% | -5% to -15% |
| Spanish | +25% to +25% | -10% to -20% |
| Swedish | -10% to -15% | +10% to +15% |
If you are looking to translate text from one language to another, American Express offers two translation tools, Systran (for machine translation) and LingoNet (for human translation). Both of these tools are available enterprise wide. To learn more about these tools (internal teams only), visit the Language Translation Tools Square Page or reach out on Slack #language-translation-community.
Line Height
Several writing systems that use different alphabets require different line heights than Latin characters. When designing with the design system and utilizing a language with a different standardized line height, like Hindi, ensure you are adjusting your components to accommodate this change.
As you can see above, Arabic has characters that fall below the English characters line height, while both Thai and Hebrew have characters that fall above the line. It is important to remember to align your text properly within the design system components.
Below is an example of how to ensure proper usage of a button, taking height into consideration.
Avoid Using Flags to Identify Language
Flags and language are not synonymous. Using a flag to identify language can cause confusion for the user.
France
SwitzerlandFrenchFrenchThe flag should represent the country and not the language spoken. In the above examples French is the official language in 29 countries with many different flags representing them. Switzerland has four national languages, with only one of them being French.
Formatting Local Currency
Ensure you are using the correct currency symbol and formatting for the locale you are looking to reach. See below for a few examples of major currency formatting.
Consider where standardized placement of the symbol goes within that locale. This can vary from region to region, for example the Euro symbol (€) can be placed before or after the numbers depending on where you are located.
| Currency | Short Format | Long Format |
|---|---|---|
| US Dollar ($, USD) | $5.00 | $5.00 USD |
| Euro (€, EUR) | €5.00 (Netherlands) 5.00€ (France) | €5.00 EUR (Netherlands) 5.00€ EUR (France) |
| British Pounds (£, GBP) | £5.00 | £5.00 GBP |
| Canadian Dollar ($, CAD) | $5.00 5,00$ | $5.00 CAD 5,00$ CAD |
| Australian Dollar ($, AUD) | $5.00 | $5.00 AUD |
| Japanese Yen (¥, JPY) | ¥5 | ¥5 JPY |
| New Zealand Dollar ($, NZD) | $5.00 | $5.00 NZD |
| Hong Kong Dollar ($, HKD) | $5.00 | $5.00 HKD |
| Singapore Dollar ($, SGD) | $5.00 | $5.00 SGD |
| Danish Krone (Kr, DKK) | 5,00 kr. | 5,00 kr. DKK |
Negative Amounts
Negative amounts can be displayed differently depending on the locale. Some locales place the negative sign after the amount (Netherlands) while others recognize use of parenthesis as showing a negative amount (US).
US Dollar: -$5.00 or ($5.00)
British Pounds: -£5.00
US Dollar: $5.00- or -5.00$
British Pounds: -5.00£
Commas Versus Decimal Points
Commas versus decimal points: Some countries (like the US) use decimal points as a separator between dollars and cents with a comma being used as a separator for thousands. Other countries use this the other way around.
Cultural Significance of Colors
- It is important to consider semantic meaning behind color when designing for different locales
- What means something in U.S. may mean something entirely different in another country
For example, in countries such as Japan and China red does not mean warning or caution like it does in the U.S. Yellow is used for warning, while red is strongly associated with strength or joy. See below for an example as applied to status. To note, color should not be used as your only source of status based on accessibility standards. To read more about using color, please visit our recent blog post on Color Accessibility.
Date Formatting
Many global markets use different formatting to write the date. Some markets put the day before the month and year, while others format the date with month first. Below is example markets and representations on how they format the date. For additional locales, please ensure you are using the correct formatting.
| Market Example | Long Date | Abbreviated Long Date | Short Date | Abbreviated Short Date |
|---|---|---|---|---|
| US | December 14, 2022 | Dec 14, 2022 | December 14 | Dec 14 |
| UK, Canada, Aus | 14 December, 2022 | 14 Dec, 2022 | 14 December | 14 Dec |
| Mexico | 14 Diciembre, 2022 | 14 Dic, 2022 | 14 Diciembre | 14 Dic |
| Japan | 2022/12/14 | n/a | 12/14 | n/a |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.