Mehrsprachige Typografie: Schriften und längere Wörter

Mehrsprachige Typografie ist das Handwerk, Schrift so zu setzen, dass sie in jeder Sprache funktioniert, die du veröffentlichst, nicht nur in der, in der du gestaltet hast. In der Praxis läuft es auf vier Gewohnheiten hinaus: Platz für Übersetzungen lassen, die länger sind als das Englische, Schriften wählen, die wirklich jedes nötige Schriftsystem und jeden Akzent enthalten, respektieren, wie jedes Schriftsystem gelesen wird (Arabisch und Hebräisch laufen von rechts nach links, Chinesisch und Japanisch haben keine Leerzeichen), und mit echtem übersetztem Text testen statt mit Platzhaltertext. Wenn das sitzt, kann ein Designsystem eine Marke durch ein Dutzend Sprachen tragen.

Für längere Wörter planen

Die meisten europäischen Sprachen brauchen mehr Platz als Englisch. Am stärksten wirkt das bei kurzen Zeichenfolgen: Ein Button mit einem Wort kann sich verdoppeln, ein langer Absatz wächst weit weniger. Die Notiz des W3C zur Textgröße in der Übersetzung erklärt, warum. Hier ein paar alltägliche Labels in Sprachen, die eine europäische Marke oft braucht.

• Lass Schlagzeilen in eine zusätzliche Zeile umbrechen, statt sie auf eine zu fixieren.
• Bemesse Buttons und Tags nach ihrem Inhalt, nie nach fester Breite.
• Halte bei kurzen Labels und Eyebrows ein Drittel oder mehr Platz frei.
• Vermeide Wörter, die Buchstabe für Buchstabe gesetzt sind, etwa ein vertikales Label, das sich nicht umbrechen lässt.

Schriften wählen, die jedes Schriftsystem abdecken

Bevor du dich in eine Schrift verliebst, prüfe ihren Zeichensatz. Fehlt einer Schrift ein Zeichen, springt für genau diesen Buchstaben eine andere ein, sodass eine dänische Schlagzeile ein einzelnes ø in anderem Design bekommen kann. Schriften nennen ihre unterstützten Sprachen bei Google Fonts und auf den meisten Seiten der Schriftanbieter.

Wo eine Familie nicht alles abdecken kann, kombiniere eine lateinische Schrift mit einer schriftsystemspezifischen von ähnlichem Gewicht, ähnlicher x-Höhe und ähnlichem Ton. Es gelten dieselben Prinzipien wie bei Schriftkombination, mit einem zusätzlichen: Setze beide in gleicher Größe nebeneinander und passe an, bis keine kleiner wirkt.

Arabische Typografie und Rechts-nach-links-Layouts

Arabisch ist das Schriftsystem, an dem lateinische Gewohnheiten am sichtbarsten scheitern. Es wird von rechts nach links gelesen, Buchstaben ändern ihre Form je nach Position im Wort und verbinden sich mit ihren Nachbarn, und es gibt keine Großbuchstaben. Auch Hebräisch läuft von rechts nach links, aber seine Buchstaben verbinden sich nicht.

Kufi-Stile sind geometrisch und passen zu Schlagzeilen und Logos; Naskh-Stile sind runder und lesen sich in langem Text besser. Noto Kufi Arabic und Noto Naskh Arabic bieten dir beides in einer Familie.

Akzente, Diakritika und Zeilenabstand

Europäische Sprachen setzen Zeichen über und unter Buchstaben: Å im Schwedischen, Dänischen und Norwegischen, É im Französischen, Ä und Ö im Finnischen und Deutschen, Ç im Portugiesischen. Ein enger Zeilenabstand, der bei englischen Versalien scharf aussieht, schneidet diese Zeichen ab oder lässt sie in die Zeile darüber stoßen. Teste Schlagzeilen mit deinen schwersten Großbuchstaben mit Akzent, bevor du den Abstand festlegst. Zeilenabstand behandelt die Grundlagen; bei Versalien ist hier besondere Sorgfalt nötig.

Mehrsprachige Typografie in CSS

Sag dem Browser im Web, in welcher Sprache und Richtung jede Seite oder Passage steht. Er wählt dann die richtigen Buchstabenformen, Silbentrennung, Anführungszeichen und Zeilenumbrüche. Nutze logische Eigenschaften, damit Abstände automatisch mit der Richtung umkehren.

<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>

Die Details zu dir und zum bidirektionalen Algorithmus stehen bei MDN.

Ein Workflow zum Gestalten in vielen Sprachen

1. 1

   Jede Sprache und jedes Schriftsystem auflisten

   Schreib auf, was du heute veröffentlichst und was dazukommen könnte. Wähle Schriften nach dieser Liste, nicht nur nach Englisch.

2. 2

   Mit deiner längsten Sprache gestalten

   Gestalte wichtige Screens und Posts zuerst auf Deutsch oder Finnisch. Passen sie, passt auch Englisch.

3. 3

   Die schwersten Akzente testen

   Lass die Teststrings oben durch jeden Überschriftenstil laufen.

4. 4

   Eine Muttersprachlerin oder einen Muttersprachler draufschauen lassen

   Zeilenumbrüche, Silbentrennung und Ton können technisch korrekt sein und sich trotzdem falsch anfühlen. Wer die Sprache fließend liest, bemerkt, was Tools nicht merken.

Gradiently selbst spricht 12 Sprachen, von Englisch, Französisch und Deutsch bis Dänisch, Norwegisch und Finnisch, damit ein Team in der Sprache arbeiten kann, in der es denkt. Im Pro-Plan nimmt das Markenkit hochgeladene Schriftdateien für Überschrift und Text an, sodass du eine Schrift ergänzen kannst, die deine Akzente abdeckt, und neue Designs starten damit. Eigene Schriften hochladen und Gradiently in anderen Sprachen nutzen erklären beides.