Meertalige typografie: lettertypes, schriften en langere woorden

Meertalige typografie is het vak om tekst te zetten die werkt in elke taal die je publiceert, niet alleen in die waarin je ontwierp. In de praktijk komt het neer op vier gewoonten: ruimte laten voor vertalingen die langer zijn dan het Engels, lettertypes kiezen die echt elk schrift en elk accent bevatten dat je nodig hebt, respecteren hoe elk schrift leest (Arabisch en Hebreeuws lopen van rechts naar links, Chinees en Japans kennen geen spaties) en echte vertaalde tekst testen in plaats van vultekst. Als dat klopt, kan één ontwerpsysteem een merk over een dozijn talen dragen.

Plan voor langere woorden

De meeste Europese talen nemen meer ruimte in dan Engels. Het effect is het sterkst bij korte tekenreeksen: een knop van één woord kan verdubbelen, terwijl een lange alinea veel minder groeit. De notitie van het W3C over tekstgrootte in vertaling legt uit waarom. Hier een paar alledaagse labels uit talen die een Europees merk vaak nodig heeft.

• Laat koppen naar een extra regel afbreken in plaats van ze op één regel vast te zetten.
• Maak knoppen en labels zo groot als hun inhoud, nooit een vaste breedte.
• Houd in korte labels en eyebrows een derde of meer ruimte over.
• Vermijd woorden die letter voor letter zijn uitgelegd, zoals een verticaal label, dat niet kan herschikken.

Kies lettertypes die elk schrift dekken

Voordat je verliefd wordt op een lettertype, controleer je de tekenset. Een lettertype dat een teken mist, valt voor die ene letter terug op een ander, dus een Deense kop kan eindigen met één ø in een ander ontwerp. Lettertypes vermelden hun ondersteunde talen op Google Fonts en op de meeste pagina’s van letterontwerpers.

Waar één familie niet alles dekt, combineer je een Latijns lettertype met een schriftspecifiek lettertype met vergelijkbaar gewicht, x-hoogte en toon. Dezelfde principes als bij lettertypes combineren gelden, met één extra: zet ze naast elkaar op dezelfde grootte en pas aan tot geen van beide kleiner lijkt.

Arabische typografie en rechts-naar-links-opmaak

Arabisch is het schrift waarbij Latijnse gewoonten het zichtbaarst falen. Het leest van rechts naar links, letters veranderen van vorm naargelang hun plek in een woord en verbinden zich met hun buren, en er zijn geen hoofdletters. Ook Hebreeuws loopt van rechts naar links, maar de letters verbinden zich niet.

Koefische stijlen zijn geometrisch en passen bij koppen en logo’s; Naskh-stijlen zijn ronder en lezen beter in lange tekst. Noto Kufi Arabic en Noto Naskh Arabic geven je beide in één familie.

Accenten, diakritische tekens en regelhoogte

Europese talen voegen tekens toe boven en onder letters: Å in het Zweeds, Deens en Noors, É in het Frans, Ä en Ö in het Fins en Duits, Ç in het Portugees. Krappe regelhoogte, die er in Engelse hoofdletters scherp uitziet, knipt deze tekens af of laat ze tegen de regel erboven botsen. Test koppen met je zwaarste hoofdletters met accent voordat je de spatiëring vastlegt. Regelhoogte behandelt de basis; tekst in hoofdletters vraagt hier extra zorg.

Meertalige typografie in css

Vertel de browser op het web in welke taal en richting elke pagina of passage staat. Hij kiest dan de juiste lettervormen, afbreking, aanhalingstekens en regelbreking. Gebruik logische eigenschappen zodat spatiëring automatisch met de richting meedraait.

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

De details van dir en het bidirectionele algoritme staan op MDN.

Een werkwijze om in veel talen te ontwerpen

1. 1

   Maak een lijst van elke taal en elk schrift

   Schrijf op wat je nu publiceert en wat je misschien toevoegt. Kies lettertypes tegen die lijst, niet alleen tegen het Engels.

2. 2

   Ontwerp met je langste taal

   Zet eerst belangrijke schermen en posts op in het Duits of Fins. Als die passen, past het Engels zeker.

3. 3

   Test de zwaarste accenten

   Laat de teststrings hierboven door elke kopstijl lopen.

4. 4

   Laat een moedertaalspreker kijken

   Regelbreking, afbreking en toon kunnen technisch geldig zijn en toch verkeerd voelen. Een vloeiende lezer ziet wat tools missen.

De eigen interface van Gradiently spreekt 12 talen, van Engels, Frans en Duits tot Deens, Noors en Fins, zodat een team kan werken in de taal waarin het denkt. Met Pro neemt de merkkit geüploade lettertypebestanden voor koppen en lopende tekst aan, zodat je een lettertype kunt toevoegen dat je accenten dekt, en nieuwe ontwerpen beginnen ermee. Eigen lettertypes uploaden en Gradiently in andere talen gebruiken leggen beide uit.