# Typographie multilingue : polices, écritures et mots longs
[Canonical HTML page](https://gradiently.design/fr/guide/arabic-and-multilingual-type)
Une mise en page parfaite en anglais peut craquer en allemand, rogner les accents danois ou s’inverser mal en arabe. Voici comment composer un texte qui survit à la traduction.
## The short version
- Un texte traduit est en général plus long que l’anglais, et les étiquettes courtes grandissent le plus : les mises en page doivent pouvoir s’étendre.
- Une police multilingue doit contenir chaque caractère et chaque écriture que vous publierez, y compris des accents comme å, ø, ß, ã et œ.
- L’arabe et l’hébreu se lisent de droite à gauche, les lettres arabes se lient, et aucune des deux écritures n’a de capitales : l’espacement des lettres et les astuces de capitales ne se transposent pas.
- De grandes familles comme Noto et IBM Plex couvrent de nombreuses écritures avec un dessin commun, ce qui garde une marque cohérente d’une langue à l’autre.
- Balisez la langue et la direction en HTML avec les attributs lang et dir pour que les navigateurs choisissent le bon rendu, la bonne césure et les bons retours à la ligne.
La **typographie multilingue** est l’art de composer un texte qui fonctionne dans chaque langue publiée, pas seulement celle dans laquelle on a créé. En pratique, elle se résume à quatre habitudes : laisser de la place à des traductions plus longues que l’anglais, choisir des polices qui contiennent vraiment chaque écriture et chaque accent nécessaires, respecter la lecture de chaque écriture (l’arabe et l’hébreu vont de droite à gauche, le chinois et le japonais n’ont pas d’espaces) et tester de vrais textes traduits plutôt qu’un texte factice. Une fois ces points acquis, un seul système de design peut porter une marque dans une douzaine de langues.
## Prévoir des mots plus longs
La plupart des langues européennes prennent plus de place que l’anglais. L’effet est le plus fort sur les chaînes courtes : un bouton d’un mot peut doubler, alors qu’un long paragraphe grandit bien moins. La note du W3C sur la [taille du texte en traduction](https://www.w3.org/International/articles/article-text-size) en explique la raison. Voici quelques étiquettes courantes dans des langues dont une marque européenne a souvent besoin.
| Anglais | Allemand | Français | Finnois | Espagnol |
| --- | --- | --- | --- | --- |
| Settings | Einstellungen | Paramètres | Asetukset | Ajustes |
| Download | Herunterladen | Télécharger | Lataa | Descargar |
| Opening hours | Öffnungszeiten | Horaires d’ouverture | Aukioloajat | Horario de apertura |
| Book now | Jetzt buchen | Réserver | Varaa nyt | Reservar ahora |
Les composés allemands forment de longs mots uniques qu’on ne peut pas couper. Le finnois est parfois plus court, parfois bien plus long. Concevez pour le plus long, pas pour la moyenne.
Un post social en portrait annonçant l’ouverture tardive du vendredi, en anglais, avec beaucoup d’espace autour du titre
La ligne anglaise tient à l’aise sur deux lignes, avec de l’espace autour.
Le même post en allemand, avec un titre et un surtitre plus longs qui tiennent toujours dans la mise en page
La version allemande demande plus de largeur et un surtitre plus long. Une mise en page conçue avec du jeu l’absorbe.
- Laissez les titres passer sur une ligne de plus au lieu de les figer sur une seule.
- Dimensionnez boutons et étiquettes selon leur contenu, jamais à largeur fixe.
- Gardez un tiers d’espace libre ou plus dans les étiquettes et surtitres courts.
- Évitez les mots disposés lettre par lettre, comme une étiquette verticale, qui ne peuvent pas se réagencer.
## Choisir des polices qui couvrent chaque écriture
Avant de craquer pour une police, vérifiez son jeu de caractères. Une police qui manque d’un caractère en emprunte un autre pour cette seule lettre : un titre danois peut se retrouver avec un ø d’un autre dessin. Les polices indiquent leurs langues prises en charge sur [Google Fonts](https://fonts.google.com/) et sur la plupart des pages de fonderies.
| Famille | Écritures couvertes | Idéale pour |
| --- | --- | --- |
| Noto Sans et Noto Serif | Latin, cyrillique, grec, arabe, hébreu, devanagari, thaï, chinois, japonais, coréen et bien d’autres | La couverture la plus large avec un dessin commun |
| IBM Plex | Latin, cyrillique, grec, arabe, hébreu, devanagari, thaï, japonais, coréen | Les marques qui veulent une seule famille partout |
| Inter | Latin, cyrillique, grec, vietnamien | Interfaces en langues européennes |
| Source Sans 3 avec Source Han Sans | Latin, cyrillique, grec, plus chinois, japonais, coréen | Associer le latin à du texte d’Asie de l’Est |
| Readex Pro, Cairo, Tajawal | Arabe et latin | Marques d’abord arabes avec prise en charge du latin |
Les familles conçues pour plusieurs écritures gardent la même épaisseur de trait et les mêmes proportions : une marque se ressemble dans chaque langue.
Quand une seule famille ne peut pas tout couvrir, associez une police latine à une police propre à l’écriture, de graisse, de hauteur d’x et de ton proches. Les mêmes principes que pour l’[association de polices](https://gradiently.design/fr/guide/font-pairing) s’appliquent, avec un de plus : placez-les côte à côte à la même taille et ajustez jusqu’à ce qu’aucune ne paraisse plus petite.
## Typographie arabe et mises en page de droite à gauche
L’arabe est l’écriture où les habitudes latines échouent le plus visiblement. Elle se lit de droite à gauche, ses lettres changent de forme selon leur place dans le mot et se lient à leurs voisines, et elle n’a pas de capitales. L’hébreu va aussi de droite à gauche, mais ses lettres ne se lient pas.
### À éviter
- Espacer les lettres d’un texte arabe, ce qui brise les liaisons entre les lettres
- Simuler l’emphase avec des capitales, que l’arabe n’a pas
- Mettre en miroir une mise en page latine sans vérifier icônes, chiffres et logos
- De l’arabe composé au même corps que le latin, qui paraît souvent plus petit
- Un interlignage si serré que points et signes se heurtent
### À faire
- Utiliser la graisse ou la couleur pour l’emphase
- Inverser la direction de la mise en page pour que la lecture commence à droite
- Garder logos, commandes média et numéros de téléphone dans leur sens habituel
- Agrandir l’arabe jusqu’à égaler visuellement le latin
- Prévoir un interlignage généreux pour les signes au-dessus et en dessous
Les styles koufiques sont géométriques et conviennent aux titres et aux logos ; les styles naskh sont plus arrondis et se lisent mieux en texte long. Noto Kufi Arabic et Noto Naskh Arabic offrent les deux dans une seule famille.
## Accents, signes diacritiques et interligne
Les langues européennes ajoutent des signes au-dessus et en dessous des lettres : Å en suédois, danois et norvégien, É en français, Ä et Ö en finnois et en allemand, Ç en portugais. Un interligne serré, net en capitales anglaises, rogne ces signes ou les fait percuter la ligne du dessus. Testez les titres avec vos capitales accentuées les plus lourdes avant de fixer l’espacement. [L’interligne](https://gradiently.design/fr/guide/line-height-and-line-length) donne les bases ; le [texte en capitales](https://gradiently.design/fr/guide/all-caps-typography) demande ici un soin particulier.
| Langue | Chaîne de test |
| --- | --- |
| Français | Été, Œuvre, ÇA, déjà |
| Allemand | ÄÖÜ, Straße, Größe |
| Espagnol | ¿Mañana? ¡Sí! |
| Portugais | Ação, Coração, São |
| Danois et norvégien | Æble, Øre, Århus, blåbær |
| Suédois et finnois | Åsa, Älvsjö, Hyvää yötä |
| Néerlandais et italien | IJsland, città, perché |
Collez-les dans un titre à votre interligne le plus serré. Si un signe touche la ligne du dessus ou est coupé, desserrez l’espacement.
## La typographie multilingue en CSS
Sur le web, indiquez au navigateur la langue et la direction de chaque page ou passage. Il choisit alors les bonnes formes de lettres, la césure, les guillemets et les retours à la ligne. Utilisez des propriétés logiques pour que l’espacement s’inverse tout seul avec la direction.
```html
…
An English quote inside Arabic text.
```
lang choisit la police et la césure selon la langue ; dir fixe le sens de lecture ; padding-inline-start tombe à droite en arabe et à gauche en anglais.
Les détails de `dir` et de l’algorithme bidirectionnel sont sur [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).
## Une méthode pour créer dans de nombreuses langues
1. **Listez chaque langue et chaque écriture** Notez ce que vous publiez aujourd’hui et ce que vous pourriez ajouter. Choisissez les polices selon cette liste, pas seulement selon l’anglais.
2. **Concevez avec votre langue la plus longue** Maquettez d’abord les écrans et posts clés en allemand ou en finnois. S’ils tiennent, l’anglais tiendra.
3. **Testez les accents les plus lourds** Passez les chaînes de test ci-dessus dans chaque style de titre.
4. **Faites relire par un locuteur natif** Retours à la ligne, césure et ton peuvent être techniquement valides et sonner faux. Un lecteur courant repère ce que les outils ne voient pas.
L’interface de Gradiently parle elle-même 12 langues, de l’anglais, du français et de l’allemand au danois, au norvégien et au finnois : une équipe peut travailler dans la langue dans laquelle elle pense. Avec Pro, le kit de marque accepte des fichiers de polices de titre et de texte téléversés : vous pouvez ajouter une police qui couvre vos accents, et les nouvelles créations partent avec elle. [Téléverser des polices personnalisées](https://gradiently.design/fr/guide/custom-fonts-upload) et [utiliser Gradiently dans d’autres langues](https://gradiently.design/fr/guide/languages-in-gradiently) expliquent les deux.
## FAQ
### Qu’est-ce que la typographie multilingue ?
Composer un texte qui fonctionne dans chaque langue publiée : des polices qui couvrent chaque écriture, des mises en page qui laissent la place à des traductions plus longues, et un bon sens de lecture et de retour à la ligne.
### Quelles polices prennent en charge le plus de langues ?
La famille Noto couvre la plus large gamme d’écritures. IBM Plex couvre aussi le latin, le cyrillique, le grec, l’arabe, l’hébreu, le devanagari, le thaï, le japonais et le coréen.
### De combien les traductions sont-elles plus longues que l’anglais ?
Cela varie selon la langue et la chaîne. Les étiquettes courtes grandissent le plus et peuvent doubler, tandis que les longs paragraphes grandissent moins : testez avec de vraies traductions.
### Peut-on espacer les lettres d’un texte arabe ?
Non. Les lettres arabes se lient entre elles et l’espacement brise ces liaisons. Utilisez plutôt la graisse, la taille ou la couleur pour l’emphase.
### Comment passer un site web de droite à gauche ?
Définissez dir="rtl" et la bonne langue lang sur l’élément html, et utilisez des propriétés CSS logiques comme padding-inline-start pour que l’espacement s’inverse avec la direction.