Flersproget typografi: skrifttyper, skriftsystemer og længere ord

Flersproget typografi er håndværket at sætte skrift, der virker på alle de sprog, du udgiver på, ikke bare det, du designede på. I praksis kommer det ned til fire vaner: lad der være plads til oversættelser, der er længere end dansk, vælg skrifttyper, der rent faktisk indeholder hvert skriftsystem og hver accent, du har brug for, respektér, hvordan hvert skriftsystem læses (arabisk og hebraisk løber fra højre mod venstre, kinesisk og japansk har ingen mellemrum), og test rigtig oversat tekst frem for pladsholdertekst. Får du det rigtigt, kan ét designsystem bære et brand på tværs af et dusin sprog.

Planlæg til længere ord

De fleste europæiske sprog fylder mere end engelsk. Effekten er stærkest på korte tekststrenge: en knap med ét ord kan fordobles, mens et langt afsnit vokser langt mindre. W3C’s note om tekststørrelse i oversættelse forklarer hvorfor. Her er nogle få hverdagslabels fra sprog, et europæisk brand ofte har brug for.

• Lad overskrifter bryde over på en ekstra linje i stedet for at låse dem til én.
• Tilpas knapper og tags til deres indhold, aldrig til en fast bredde.
• Hold en tredjedel eller mere ledig plads i korte labels og overlinjer.
• Undgå ord lagt ud bogstav for bogstav, som en lodret label, der ikke kan omformes.

Vælg skrifttyper, der dækker alle skriftsystemer

Før du forelsker dig i en skrifttype, så tjek dens tegnsæt. En skrifttype, der mangler et tegn, falder tilbage på en anden for netop det bogstav, så en dansk overskrift kan ende med ét ø i et andet design. Skrifttyper opregner deres understøttede sprog på Google Fonts og på de fleste udgiveres sider.

Hvor én familie ikke kan dække alt, så par en latinsk skrifttype med en skriftsystemspecifik skrifttype med lignende vægt, x-højde og tone. De samme principper som i skriftparring gælder med ét ekstra: sæt dem side om side i samme størrelse, og justér, til ingen af dem ser mindre ud.

Arabisk typografi og layouts fra højre mod venstre

Arabisk er det skriftsystem, hvor latinske vaner fejler mest synligt. Det læses fra højre mod venstre, bogstaver skifter form afhængigt af deres plads i et ord og hænger sammen med naboerne, og der er ingen versaler. Hebraisk løber også fra højre mod venstre, men dets bogstaver hænger ikke sammen.

Kufi-stilene er geometriske og passer til overskrifter og logoer. Naskh-stilene er rundere og læses bedre i lang tekst. Noto Kufi Arabic og Noto Naskh Arabic giver dig begge i én familie.

Accenter, diakritiske tegn og linjehøjde

Europæiske sprog tilføjer tegn over og under bogstaver: Å på svensk, dansk og norsk, É på fransk, Ä og Ö på finsk og tysk, Ç på portugisisk. Stram linjehøjde, som ser skarp ud i engelske versaler, klipper de tegn af eller lader dem støde ind i linjen over. Test overskrifter med dine tungeste versaler med accenter, før du fastlåser afstanden. Linjehøjde dækker det grundlæggende. Tekst med store bogstaver kræver ekstra omhu her.

Flersproget typografi i CSS

På nettet skal du fortælle browseren, hvilket sprog og hvilken retning hver side eller passage har. Den vælger så de rigtige bogstavformer, orddeling, anførselstegn og linjeskift. Brug logiske egenskaber, så afstande vender automatisk med retningen.

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

Detaljerne om dir og den tovejs algoritme står på MDN.

En arbejdsgang til at designe på mange sprog

1. 1

   List hvert sprog og skriftsystem

   Skriv ned, hvad du udgiver på i dag, og hvad du måske tilføjer. Vælg skrifttyper ud fra den liste, ikke kun ud fra dansk.

2. 2

   Design med dit længste sprog

   Lav først mockups af nøgleskærme og opslag på tysk eller finsk. Passer de, passer dansk.

3. 3

   Test de tungeste accenter

   Kør teststrengene ovenfor gennem hver overskriftsstil.

4. 4

   Få en indfødt læser til at se på det

   Linjeskift, orddeling og tone kan være teknisk gyldige og alligevel føles forkerte. En flydende læser fanger det, værktøjer ikke kan.

brugerfladen i Gradiently taler 12 sprog, fra engelsk, fransk og tysk til dansk, norsk og finsk, så et team kan arbejde på det sprog, de tænker på. På Pro tager brandkittet uploadede filer til overskrifts- og brødtekstskrifttyper, så du kan tilføje en skrifttype, der dækker dine accenter, og nye designs starter med den. Upload egne skrifttyper og brug Gradiently på andre sprog forklarer begge dele.