L’essentiel en bref
- 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.
Sur cette page
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 en explique la raison. Voici quelques étiquettes courantes dans des langues dont une marque européenne a souvent besoin.
Français
Finnois
Espagnol
Français
Finnois
Espagnol
Allemand
Français
Finnois
Espagnol
Français
Finnois
Espagnol
La ligne anglaise tient à l’aise sur deux lignes, avec de l’espace autour.
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 et sur la plupart des pages de fonderies.
Écritures couvertes
Idéale pour
Idéale pour
Idéale pour
Écritures couvertes
Idéale pour
Écritures couvertes
Idéale pour
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 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 donne les bases ; le texte en capitales demande ici un soin particulier.
Chaîne de test
Chaîne de test
Chaîne de test
Chaîne de test
Chaîne de test
Chaîne de test
Chaîne de test
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 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>Les détails de dir et de l’algorithme bidirectionnel sont sur MDN.
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 et utiliser Gradiently dans d’autres langues expliquent les deux.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil