The short version
- Translated text is usually longer than English, and short labels grow the most, so layouts need room to expand.
- A multilingual font must contain every character and script you will publish, including accents such as å, ø, ß, ã and œ.
- Arabic and Hebrew run right to left, Arabic letters join, and neither script uses capital letters, so letter spacing and all caps tricks do not transfer.
- Large families such as Noto and IBM Plex cover many scripts with a shared design, which keeps a brand consistent across languages.
- Mark up language and direction in HTML with lang and dir attributes so browsers choose the right shaping, hyphenation and line breaks.
On this page
Multilingual typography is the craft of setting type that works in every language you publish, not just the one you designed in. In practice it comes down to four habits: leave room for translations that run longer than English, choose fonts that actually contain every script and accent you need, respect how each script reads (Arabic and Hebrew run right to left, Chinese and Japanese have no spaces), and test real translated text rather than placeholder copy. Get those right and one design system can carry a brand across a dozen languages.
Plan for longer words
Most European languages take more room than English. The effect is strongest on short strings: a one word button can double, while a long paragraph grows far less. The W3C's note on text size in translation explains why. Here are a few everyday labels from languages a European brand often needs.
French
Finnish
Spanish
French
Finnish
Spanish
German
French
Finnish
Spanish
French
Finnish
Spanish
The English line fits comfortably on two lines with space around it.
The German version needs more width and a longer eyebrow. A layout built with slack absorbs it.
- Let headlines wrap to an extra line instead of fixing them to one.
- Size buttons and tags to their content, never to a fixed width.
- Keep a third or more spare space in short labels and eyebrows.
- Avoid words laid out letter by letter, such as a vertical label, which cannot reflow.
Choose fonts that cover every script
Before you fall in love with a typeface, check its character set. A font that lacks a character falls back to a different one for that letter alone, so a Danish headline can end up with one ø in a different design. Fonts list their supported languages on Google Fonts and on most foundry pages.
Scripts covered
Good for
Good for
Good for
Scripts covered
Good for
Scripts covered
Good for
Where one family can't cover everything, pair a Latin face with a script specific face of similar weight, x height and tone. The same principles as font pairing apply, with one more: set them side by side at the same size and adjust until neither looks smaller.
Arabic typography and right to left layouts
Arabic is the script where Latin habits fail most visibly. It reads right to left, letters change shape depending on their position in a word and join to their neighbours, and there are no capitals. Hebrew also runs right to left but its letters don't join.
Avoid
- Letter spacing Arabic text, which breaks the joins between letters
- Faking emphasis with capitals, which Arabic does not have
- Mirroring a Latin layout without checking icons, numbers and logos
- Arabic set at the same point size as Latin, which often looks smaller
- Line spacing so tight that dots and marks collide
Do
- Use weight or colour for emphasis
- Flip the layout's direction so reading starts on the right
- Keep logos, media controls and phone numbers in their usual direction
- Size Arabic up until it matches the Latin visually
- Allow generous line height for the marks above and below
Kufi styles are geometric and suit headlines and logos; Naskh styles are rounder and read better in long text. Noto Kufi Arabic and Noto Naskh Arabic give you both in one family.
Accents, diacritics and line height
European languages add marks above and below letters: Å in Swedish, Danish and Norwegian, É in French, Ä and Ö in Finnish and German, Ç in Portuguese. Tight line height, which looks sharp in English capitals, clips these marks or lets them crash into the line above. Test headlines with your heaviest accented capitals before you fix the spacing. Line height covers the basics; all caps text needs extra care here.
Test string
Test string
Test string
Test string
Test string
Test string
Test string
Multilingual typography in CSS
On the web, tell the browser what language and direction every page or passage is in. It then chooses the right letter shapes, hyphenation, quotation marks and line breaking. Use logical properties so spacing flips with the direction automatically.
<html lang="ar" dir="rtl">
<head>
<style>
body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
:lang(ar) { font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", sans-serif; line-height: 1.7; }
:lang(de), :lang(fi) { hyphens: auto; }
.card { padding-inline-start: 24px; border-inline-start: 4px solid currentColor; }
</style>
</head>
<body>
<p>…</p>
<p lang="en" dir="ltr">An English quote inside Arabic text.</p>
</body>
</html>The details of dir and the bidirectional algorithm are on MDN.
A workflow for designing in many languages
- 1
List every language and script
Write down what you publish today and what you might add. Choose fonts against that list, not just against English.
- 2
Design with your longest language
Mock up key screens and posts in German or Finnish first. If they fit, English will.
- 3
Test the heaviest accents
Run the test strings above through every heading style.
- 4
Get a native reader to look
Line breaks, hyphenation and tone can be technically valid and still feel wrong. A fluent reader catches what tools cannot.
Gradiently's own interface speaks 12 languages, from English, French and German to Danish, Norwegian and Finnish, so a team can work in the language they think in. On Pro, the brand kit takes uploaded heading and body font files, so you can add a face that covers your accents, and new designs start with it. Upload custom fonts and using Gradiently in other languages explain both.
Questions people ask
What is multilingual typography?
Setting type so it works in every language you publish: fonts that cover each script, layouts with room for longer translations, and correct direction and line breaking.
Which fonts support the most languages?
The Noto family covers the widest range of scripts. IBM Plex also covers Latin, Cyrillic, Greek, Arabic, Hebrew, Devanagari, Thai, Japanese and Korean.
How much longer are translations than English?
It varies by language and string. Short labels grow the most and can double in length, while long paragraphs grow less, so test with real translations.
Can I add letter spacing to Arabic text?
No. Arabic letters join to each other, and letter spacing breaks those joins. Use weight, size or colour for emphasis instead.
How do I make a website right to left?
Set dir="rtl" and the right lang on the html element, and use logical CSS properties such as padding-inline-start so spacing flips with the direction.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile