Flerspråklig typografi: skrifttyper, skriftsystemer og lengre ord

Flerspråklig typografi er håndverket med å sette skrift som fungerer på alle språkene du publiserer på, ikke bare det du designet i. I praksis handler det om fire vaner: gi plass til oversettelser som blir lengre enn engelsk, velg skrifttyper som faktisk inneholder alle skriftsystemer og aksenter du trenger, respekter hvordan hvert skriftsystem leses (arabisk og hebraisk går fra høyre til venstre, kinesisk og japansk har ingen mellomrom), og test med ekte oversatt tekst i stedet for plassholdertekst. Får du dette riktig, kan ett designsystem bære en merkevare på tvers av et dusin språk.

Planlegg for lengre ord

De fleste europeiske språk tar mer plass enn engelsk. Effekten er sterkest på korte tekststrenger: en knapp på ett ord kan doble seg, mens et langt avsnitt vokser langt mindre. W3Cs notat om tekststørrelse ved oversettelse forklarer hvorfor. Her er noen hverdagslige etiketter fra språk en europeisk merkevare ofte trenger.

• La overskrifter brytes til en ekstra linje i stedet for å låse dem til én.
• Gi knapper og merkelapper størrelse etter innholdet, aldri en fast bredde.
• Hold en tredjedel eller mer ledig plass i korte etiketter og overlinjer.
• Unngå ord satt bokstav for bokstav, som en vertikal etikett, som ikke kan flyte om.

Velg skrifttyper som dekker alle skriftsystemer

Før du forelsker deg i en skrifttype, sjekk tegnsettet. En skrifttype som mangler et tegn, faller tilbake til en annen bare for den bokstaven, så en dansk overskrift kan ende opp med én ø i et annet design. Skrifttyper lister opp støttede språk på Google Fonts og på de fleste sidene til skriftstøperier.

Der én familie ikke kan dekke alt, kombinerer du en latinsk skrifttype med en skrifttype for det aktuelle skriftsystemet med lignende vekt, x-høyde og tone. De samme prinsippene som ved kombinering av skrifttyper gjelder, med ett til: sett dem side om side i samme størrelse og juster til ingen av dem ser mindre ut.

Arabisk typografi og oppsett fra høyre til venstre

Arabisk er skriftsystemet der latinske vaner svikter mest synlig. Det leses fra høyre til venstre, bokstavene endrer form avhengig av plasseringen i ordet og henger sammen med naboene, og det finnes ingen store bokstaver. Hebraisk går også fra høyre til venstre, men bokstavene henger ikke sammen.

Kufi-stiler er geometriske og passer overskrifter og logoer; Naskh-stiler er rundere og leses bedre i lang tekst. Noto Kufi Arabic og Noto Naskh Arabic gir deg begge i én familie.

Aksenter, diakritiske tegn og linjehøyde

Europeiske språk legger til tegn over og under bokstaver: Å på svensk, dansk og norsk, É på fransk, Ä og Ö på finsk og tysk, Ç på portugisisk. Tett linjehøyde, som ser skarp ut med engelske versaler, kutter disse tegnene eller lar dem krasje inn i linjen over. Test overskrifter med de tyngste versalene med aksent før du låser avstanden. Linjehøyde og linjelengde dekker det grunnleggende; tekst i versaler krever ekstra omtanke her.

Flerspråklig typografi i CSS

På nettet forteller du nettleseren hvilket språk og hvilken retning hver side eller hvert tekstparti har. Da velger den riktige bokstavformer, orddeling, anførselstegn og linjeskift. Bruk logiske egenskaper, så avstanden snur 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>

Detaljene om dir og den toveis algoritmen finner du på MDN.

En arbeidsflyt for design på mange språk

1. 1

   List opp alle språk og skriftsystemer

   Skriv ned hva du publiserer i dag og hva du kanskje legger til. Velg skrifttyper ut fra den listen, ikke bare ut fra engelsk.

2. 2

   Design med det lengste språket ditt

   Lag skisser av viktige skjermer og innlegg på tysk eller finsk først. Passer de, passer engelsk også.

3. 3

   Test de tyngste aksentene

   Kjør teststrengene over gjennom hver overskriftsstil.

4. 4

   La en morsmålsbruker se på det

   Linjeskift, orddeling og tone kan være teknisk gyldige og likevel føles feil. En flytende leser fanger det verktøy ikke kan.

Gradiently sitt eget grensesnitt snakker 12 språk, fra engelsk, fransk og tysk til dansk, norsk og finsk, så et team kan jobbe på språket de tenker på. Med Pro tar merkevaresettet imot opplastede skriftfiler for overskrift og brødtekst, så du kan legge til en skrifttype som dekker aksentene dine, og nye design starter med den. Last opp egne skrifttyper og bruke Gradiently på andre språk forklarer begge deler.