# Meertalige typografie: lettertypes, schriften en langere woorden

[Canonical HTML page](https://gradiently.design/nl/guide/arabic-and-multilingual-type)

Een opmaak die perfect past bij Engels kan breken in het Duits, Deense accenten afknippen of verkeerd omdraaien in het Arabisch. Zo ontwerp je tekst die een vertaling overleeft.

## The short version

- Vertaalde tekst is meestal langer dan Engels, en korte labels groeien het meest, dus opmaken moeten ruimte hebben om uit te zetten.
- Een meertalig lettertype moet elk teken en schrift bevatten dat je publiceert, ook accenten zoals å, ø, ß, ã en œ.
- Arabisch en Hebreeuws lopen van rechts naar links, Arabische letters verbinden zich, en geen van beide schriften kent hoofdletters, dus letterspatiëring en hoofdlettertrucs werken niet.
- Grote families zoals Noto en IBM Plex dekken veel schriften met een gedeeld ontwerp, waardoor een merk over talen heen consistent blijft.
- Markeer taal en richting in html met de attributen lang en dir, zodat browsers de juiste vormgeving, afbreking en regelbreking kiezen.

**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](https://www.w3.org/International/articles/article-text-size) legt uit waarom. Hier een paar alledaagse labels uit talen die een Europees merk vaak nodig heeft.

| Engels | Duits | Frans | Fins | Spaans |
| --- | --- | --- | --- | --- |
| 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 |

Duitse samenstellingen maken losse lange woorden die niet kunnen afbreken. Fins is soms korter, soms veel langer. Ontwerp voor het langste, niet voor het gemiddelde.

Een staande socialpost die in het Nederlands laat openen op vrijdag aankondigt, met ruim wit rond de kop

De Nederlandse regel past comfortabel op twee regels met ruimte eromheen.

Dezelfde post in het Duits, met een langere kop en eyebrow die nog in de opmaak passen

De Duitse versie heeft meer breedte en een langere eyebrow nodig. Een opmaak met speling vangt dat op.

- 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](https://fonts.google.com/) en op de meeste pagina’s van letterontwerpers.

| Familie | Gedekte schriften | Goed voor |
| --- | --- | --- |
| Noto Sans en Noto Serif | Latijn, Cyrillisch, Grieks, Arabisch, Hebreeuws, Devanagari, Thai, Chinees, Japans, Koreaans en nog veel meer | De breedste dekking met een gedeelde look |
| IBM Plex | Latijn, Cyrillisch, Grieks, Arabisch, Hebreeuws, Devanagari, Thai, Japans, Koreaans | Merken die overal één familie willen |
| Inter | Latijn, Cyrillisch, Grieks, Vietnamees | Interfaces in Europese talen |
| Source Sans 3 met Source Han Sans | Latijn, Cyrillisch, Grieks, plus Chinees, Japans, Koreaans | Latijnse tekst combineren met Oost-Aziatische tekst |
| Readex Pro, Cairo, Tajawal | Arabisch en Latijn | Merken met Arabisch voorop en Latijnse ondersteuning |

Families die over schriften heen zijn ontworpen houden streekdikte en verhoudingen consistent, zodat een merk er in elke taal als zichzelf uitziet.

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](https://gradiently.design/nl/guide/font-pairing) 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.

### Vermijd

- Letterspatiëring op Arabische tekst, die de verbindingen tussen letters breekt
- Nadruk faken met hoofdletters, die het Arabisch niet kent
- Een Latijnse opmaak spiegelen zonder pictogrammen, getallen en logo’s te controleren
- Arabisch op dezelfde puntgrootte als Latijn, wat vaak kleiner oogt
- Zo krappe regelafstand dat punten en tekens botsen

### Doe

- Gebruik gewicht of kleur voor nadruk
- Draai de richting van de opmaak om zodat het lezen rechts begint
- Houd logo’s, mediabediening en telefoonnummers in hun gebruikelijke richting
- Maak Arabisch groter tot het visueel overeenkomt met het Latijn
- Geef ruime regelhoogte voor de tekens erboven en eronder

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](https://gradiently.design/nl/guide/line-height-and-line-length) behandelt de basis; [tekst in hoofdletters](https://gradiently.design/nl/guide/all-caps-typography) vraagt hier extra zorg.

| Taal | Teststring |
| --- | --- |
| Frans | Été, Œuvre, ÇA, déjà |
| Duits | ÄÖÜ, Straße, Größe |
| Spaans | ¿Mañana? ¡Sí! |
| Portugees | Ação, Coração, São |
| Deens en Noors | Æble, Øre, Århus, blåbær |
| Zweeds en Fins | Åsa, Älvsjö, Hyvää yötä |
| Nederlands en Italiaans | IJsland, città, perché |

Plak deze in een kop op je krapste regelhoogte. Raakt een teken de regel erboven of wordt het afgeknipt, maak de spatiëring dan ruimer.

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

lang kiest per taal het lettertype en de afbreking; dir bepaalt de leesrichting; padding-inline-start komt in het Arabisch rechts uit en in het Engels links.

De details van `dir` en het bidirectionele algoritme staan op [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

## Een werkwijze om in veel talen te ontwerpen

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. **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. **Test de zwaarste accenten** Laat de teststrings hierboven door elke kopstijl lopen.
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](https://gradiently.design/nl/guide/custom-fonts-upload) en [Gradiently in andere talen gebruiken](https://gradiently.design/nl/guide/languages-in-gradiently) leggen beide uit.

## FAQ

### Wat is meertalige typografie?

Tekst zetten zodat hij werkt in elke taal die je publiceert: lettertypes die elk schrift dekken, opmaken met ruimte voor langere vertalingen en de juiste richting en regelbreking.

### Welke lettertypes ondersteunen de meeste talen?

De Noto-familie dekt het breedste scala aan schriften. IBM Plex dekt ook Latijn, Cyrillisch, Grieks, Arabisch, Hebreeuws, Devanagari, Thai, Japans en Koreaans.

### Hoeveel langer zijn vertalingen dan het Engels?

Dat verschilt per taal en tekenreeks. Korte labels groeien het meest en kunnen in lengte verdubbelen, terwijl lange alinea’s minder groeien, dus test met echte vertalingen.

### Kan ik letterspatiëring toevoegen aan Arabische tekst?

Nee. Arabische letters verbinden zich met elkaar, en letterspatiëring breekt die verbindingen. Gebruik gewicht, grootte of kleur voor nadruk.

### Hoe maak ik een website van rechts naar links?

Stel dir="rtl" en de juiste lang in op het html-element, en gebruik logische css-eigenschappen zoals padding-inline-start zodat spatiëring met de richting meedraait.