# Flerspråkig typografi: typsnitt, skriftsystem och längre ord

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

En layout som passar engelskan perfekt kan gå sönder på tyska, klippa danska accenter eller vändas fel på arabiska. Så designar du text som överlever översättning.

## The short version

- Översatt text är oftast längre än engelska, och korta etiketter växer mest, så layouter behöver utrymme att expandera.
- Ett flerspråkigt typsnitt måste innehålla varje tecken och skriftsystem du ska publicera, inklusive accenter som å, ø, ß, ã och œ.
- Arabiska och hebreiska läses från höger till vänster, arabiska bokstäver binds ihop och ingetdera skriftsystemet har versaler, så bokstavsavstånd och versalknep överförs inte.
- Stora familjer som Noto och IBM Plex täcker många skriftsystem med en gemensam design, vilket håller ett varumärke enhetligt över språk.
- Märk upp språk och riktning i HTML med attributen lang och dir så att webbläsare väljer rätt formning, avstavning och radbrytning.

**Flerspråkig typografi** är hantverket att sätta text som fungerar på varje språk du publicerar, inte bara det du designade på. I praktiken handlar det om fyra vanor: ge plats åt översättningar som blir längre än originalet, välj typsnitt som verkligen innehåller varje skriftsystem och accent du behöver, respektera hur varje skriftsystem läses (arabiska och hebreiska löper från höger till vänster, kinesiska och japanska saknar mellanslag) och testa riktig översatt text i stället för platshållartext. Får du det rätt kan ett designsystem bära ett varumärke genom ett dussin språk.

## Planera för längre ord

De flesta europeiska språk tar mer plats än engelskan. Effekten är starkast på korta strängar: en knapp med ett ord kan fördubblas, medan ett långt stycke växer mycket mindre. W3C:s artikel om [textstorlek vid översättning](https://www.w3.org/International/articles/article-text-size) förklarar varför. Här är några vardagliga etiketter på språk som ett europeiskt varumärke ofta behöver.

| Svenska | Tyska | Franska | Finska | Spanska |
| --- | --- | --- | --- | --- |
| Inställningar | Einstellungen | Paramètres | Asetukset | Ajustes |
| Ladda ned | Herunterladen | Télécharger | Lataa | Descargar |
| Öppettider | Öffnungszeiten | Horaires d'ouverture | Aukioloajat | Horario de apertura |
| Boka nu | Jetzt buchen | Réserver | Varaa nyt | Reservar ahora |

Tyska sammansättningar blir enstaka långa ord som inte går att bryta. Finskan är ibland kortare, ibland mycket längre. Designa för det längsta, inte genomsnittet.

Ett socialt inlägg i porträttformat som meddelar sen öppning på fredagar, på svenska, med gott om utrymme runt rubriken

Den svenska raden ryms bekvämt på två rader med utrymme runt.

Samma inlägg på tyska, med en längre rubrik och överrad som fortfarande ryms i layouten

Den tyska versionen behöver mer bredd och en längre överrad. En layout byggd med marginal tar upp det.

- Låt rubriker brytas till en extra rad i stället för att låsa dem till en.
- Anpassa knappar och etiketter efter sitt innehåll, aldrig till en fast bredd.
- Behåll minst en tredjedel ledigt utrymme i korta etiketter och överrader.
- Undvik ord som läggs ut bokstav för bokstav, som en lodrät etikett, som inte kan flöda om.

## Välj typsnitt som täcker varje skriftsystem

Innan du förälskar dig i ett typsnitt, kontrollera dess teckenuppsättning. Ett typsnitt som saknar ett tecken faller tillbaka på ett annat för just den bokstaven, så en dansk rubrik kan få ett ø i en annan design. Typsnitt anger vilka språk de stöder på [Google Fonts](https://fonts.google.com/) och på de flesta typsnittshusens sidor.

| Familj | Skriftsystem som täcks | Bra för |
| --- | --- | --- |
| Noto Sans och Noto Serif | Latinska, kyrilliska, grekiska, arabiska, hebreiska, devanagari, thailändska, kinesiska, japanska, koreanska och många fler | Bredast täckning med ett gemensamt uttryck |
| IBM Plex | Latinska, kyrilliska, grekiska, arabiska, hebreiska, devanagari, thailändska, japanska, koreanska | Varumärken som vill ha en familj överallt |
| Inter | Latinska, kyrilliska, grekiska, vietnamesiska | Gränssnitt på europeiska språk |
| Source Sans 3 med Source Han Sans | Latinska, kyrilliska, grekiska, plus kinesiska, japanska, koreanska | Att para latinsk text med östasiatisk |
| Readex Pro, Cairo, Tajawal | Arabiska och latinska | Varumärken med arabiskan först och stöd för latinska |

Familjer ritade över flera skriftsystem håller strecktjocklek och proportioner enhetliga, så ett varumärke ser ut som sig självt på varje språk.

Där en familj inte kan täcka allt, para ett latinskt typsnitt med ett skriftsystemspecifikt av liknande vikt, x-höjd och ton. Samma principer som för [typsnittspar](https://gradiently.design/sv/guide/font-pairing) gäller, med en till: sätt dem sida vid sida i samma storlek och justera tills ingetdera ser mindre ut.

## Arabisk typografi och layouter från höger till vänster

Arabiska är skriftsystemet där latinska vanor misslyckas mest synligt. Det läses från höger till vänster, bokstäverna ändrar form beroende på position i ordet och binds till sina grannar, och det finns inga versaler. Hebreiska löper också från höger till vänster men dess bokstäver binds inte.

### Undvik

- Bokstavsavstånd i arabisk text, vilket bryter bindningarna mellan bokstäver
- Att fejka betoning med versaler, som arabiskan inte har
- Att spegla en latinsk layout utan att kontrollera ikoner, siffror och logotyper
- Arabiska satt i samma punktstorlek som latinska, vilket ofta ser mindre ut
- Radavstånd så snävt att prickar och tecken krockar

### Gör

- Använd vikt eller färg för betoning
- Vänd layoutens riktning så att läsningen börjar till höger
- Behåll logotyper, mediekontroller och telefonnummer i sin vanliga riktning
- Sätt arabiskan större tills den visuellt matchar den latinska
- Ge generös radhöjd för tecknen ovanför och under

Kufiska stilar är geometriska och passar rubriker och logotyper, medan naskh-stilar är rundare och läses bättre i lång text. Noto Kufi Arabic och Noto Naskh Arabic ger dig båda i en familj.

## Accenter, diakritiska tecken och radhöjd

Europeiska språk lägger till tecken över och under bokstäver: Å på svenska, danska och norska, É på franska, Ä och Ö på finska och tyska, Ç på portugisiska. Snäv radhöjd, som ser skarp ut i engelska versaler, klipper de här tecknen eller låter dem krocka med raden ovanför. Testa rubriker med dina tyngsta versaler med accent innan du fastställer avståndet. [Radhöjd](https://gradiently.design/sv/guide/line-height-and-line-length) tar upp grunderna, och [text med versaler](https://gradiently.design/sv/guide/all-caps-typography) kräver extra omsorg här.

| Språk | Teststräng |
| --- | --- |
| Franska | Été, Œuvre, ÇA, déjà |
| Tyska | ÄÖÜ, Straße, Größe |
| Spanska | ¿Mañana? ¡Sí! |
| Portugisiska | Ação, Coração, São |
| Danska och norska | Æble, Øre, Århus, blåbær |
| Svenska och finska | Åsa, Älvsjö, Hyvää yötä |
| Nederländska och italienska | IJsland, città, perché |

Klistra in de här i en rubrik med din snävaste radhöjd. Om något tecken nuddar raden ovanför eller klipps, öppna avståndet.

## Flerspråkig typografi i CSS

På webben talar du om för webbläsaren vilket språk och vilken riktning varje sida eller avsnitt har. Den väljer då rätt bokstavsformer, avstavning, citattecken och radbrytning. Använd logiska egenskaper så att avstånd vänds automatiskt med riktningen.

```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 väljer typsnitt och avstavning per språk, dir anger läsriktningen och padding-inline-start hamnar till höger på arabiska och till vänster på engelska.

Detaljerna om `dir` och den dubbelriktade algoritmen finns på [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

## Ett arbetsflöde för att designa på många språk

1. **Lista varje språk och skriftsystem** Skriv ner vad du publicerar i dag och vad du kan lägga till. Välj typsnitt utifrån den listan, inte bara utifrån engelskan.
2. **Designa med ditt längsta språk** Skissa viktiga skärmar och inlägg på tyska eller finska först. Passar de, passar engelskan.
3. **Testa de tyngsta accenterna** Kör teststrängarna ovan genom varje rubrikstil.
4. **Låt en modersmålstalare titta** Radbrytningar, avstavning och ton kan vara tekniskt korrekta och ändå kännas fel. En flytande läsare fångar det verktyg inte kan.

Gradiently har ett gränssnitt på 12 språk, från engelska, franska och tyska till danska, norska och finska, så ett team kan arbeta på det språk de tänker på. I Pro tar varumärkeskittet emot uppladdade filer för rubrik- och brödtypsnitt, så du kan lägga till ett typsnitt som täcker dina accenter, och nya designer startar med det. [Ladda upp egna typsnitt](https://gradiently.design/sv/guide/custom-fonts-upload) och [använda Gradiently på andra språk](https://gradiently.design/sv/guide/languages-in-gradiently) förklarar båda.

## FAQ

### Vad är flerspråkig typografi?

Att sätta text så att den fungerar på varje språk du publicerar: typsnitt som täcker varje skriftsystem, layouter med plats för längre översättningar och korrekt riktning och radbrytning.

### Vilka typsnitt stöder flest språk?

Notofamiljen täcker det bredaste urvalet skriftsystem. IBM Plex täcker också latinska, kyrilliska, grekiska, arabiska, hebreiska, devanagari, thailändska, japanska och koreanska.

### Hur mycket längre är översättningar än engelska?

Det varierar med språk och sträng. Korta etiketter växer mest och kan fördubblas i längd, medan långa stycken växer mindre, så testa med riktiga översättningar.

### Kan jag lägga till bokstavsavstånd i arabisk text?

Nej. Arabiska bokstäver binds till varandra, och bokstavsavstånd bryter bindningarna. Använd vikt, storlek eller färg för betoning i stället.

### Hur gör jag en webbplats från höger till vänster?

Sätt dir="rtl" och rätt lang på html-elementet, och använd logiska CSS-egenskaper som padding-inline-start så att avstånd vänds med riktningen.