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

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 förklarar varför. Här är några vardagliga etiketter på språk som ett europeiskt varumärke ofta behöver.

• 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 och på de flesta typsnittshusens sidor.

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

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 tar upp grunderna, och text med versaler kräver extra omsorg här.

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

Detaljerna om dir och den dubbelriktade algoritmen finns på MDN.

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

1. 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. 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. 3

   Testa de tyngsta accenterna

   Kör teststrängarna ovan genom varje rubrikstil.

4. 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 och använda Gradiently på andra språk förklarar båda.