# Monikielinen typografia: fontit ja pidemmät sanat

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

Englanniksi täydellinen asettelu voi hajota saksaksi, leikata tanskan tarkkeet tai kääntyä väärin arabiaksi. Näin suunnittelet käännöksen kestävän typografian.

## The short version

- Käännetty teksti on yleensä englantia pidempi. Lyhyet tunnisteet kasvavat eniten, joten asettelun pitää sallia laajeneminen.
- Monikielisen fontin tulee sisältää kaikki julkaistavat merkit ja kirjoitusjärjestelmät, myös å, ø, ß, ã ja œ.
- Arabia ja heprea kulkevat oikealta vasemmalle, arabian kirjaimet liittyvät toisiinsa eikä kummassakaan ole versaaleja. Lisävälistys ja versaalikeinot eivät siirry niihin.
- Noto ja IBM Plex kattavat useita kirjoitusjärjestelmiä yhteisellä ilmeellä, mikä pitää brändin yhtenäisenä eri kielillä.
- Merkitse HTML:n kieli ja suunta lang- ja dir-attribuuteilla, jotta selain valitsee oikeat kirjainmuodot, tavutuksen ja rivinvaihdot.

**Monikielinen typografia** tarkoittaa tekstin latomista toimivaksi jokaisella julkaisukielellä. Käytännössä kyse on neljästä tavasta: jätä tilaa englantia pidemmille käännöksille, valitse tarvittavat kirjoitusjärjestelmät ja tarkkeet sisältävät fontit, kunnioita kunkin lukutapaa ja testaa oikeaa käännöstekstiä paikkamerkkien sijaan. Arabia ja heprea kulkevat oikealta vasemmalle, kiinassa ja japanissa ei ole välilyöntejä. Kun nämä ovat kunnossa, yksi suunnittelujärjestelmä kantaa brändiä tusinalla kielellä.

## Varaudu pidempiin sanoihin

Useimmat eurooppalaiset kielet vievät englantia enemmän tilaa. Ero korostuu lyhyissä teksteissä: yhden sanan painike voi kaksinkertaistua, pitkä kappale kasvaa vähemmän. W3C:n ohje [tekstin koosta käännöksissä](https://www.w3.org/International/articles/article-text-size) selittää miksi. Tässä tavallisia tunnisteita eurooppalaisen brändin usein tarvitsemilla kielillä.

| Englanti | Saksa | Ranska | Suomi | Espanja |
| --- | --- | --- | --- | --- |
| 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 |

Saksan yhdyssanat ovat pitkiä yksittäisiä sanoja, jotka eivät jakaudu riveille. Suomi on joskus lyhyempi, joskus paljon pidempi. Suunnittele pisimmän mukaan, älä keskiarvon.

Englanninkielinen pystyjulkaisu ilmoittaa perjantain myöhäisestä aukiolosta, otsikon ympärillä reilusti tilaa

Englanninkielinen otsikko mahtuu mukavasti kahdelle riville ja jättää ympärille tilaa.

Sama julkaisu saksaksi, pidempi otsikko ja yläteksti mahtuvat yhä asetteluun

Saksankielinen versio tarvitsee enemmän leveyttä ja pidemmän ylätekstin. Väljä asettelu ottaa kasvun vastaan.

- Anna otsikon jatkua lisäriville yhden rivin pakottamisen sijaan.
- Mitoita painikkeet ja tunnisteet sisällön mukaan, älä kiinteään leveyteen.
- Jätä lyhyisiin tunnisteisiin ja yläteksteihin vähintään kolmannes ylimääräistä tilaa.
- Vältä kirjain kerrallaan aseteltuja sanoja, kuten pystytunnisteita, jotka eivät mukaudu.

## Valitse kaikki kirjoitusjärjestelmät kattavat fontit

Tarkista merkkivalikoima ennen fonttiin ihastumista. Puuttuva merkki korvataan toisesta fontista, joten tanskalaisessa otsikossa voi olla yksi eri tavalla piirretty ø. Tuetut kielet luetellaan [Google Fontsissa](https://fonts.google.com/) ja useimpien fonttivalmistajien sivuilla.

| Fonttiperhe | Kirjoitusjärjestelmät | Sopii |
| --- | --- | --- |
| Noto Sans ja Noto Serif | Latinalainen, kyrillinen, kreikkalainen, arabialainen, heprealainen, devanagari, thai, kiina, japani, korea ja monet muut | Laajin kattavuus yhteisellä ilmeellä |
| IBM Plex | Latinalainen, kyrillinen, kreikkalainen, arabialainen, heprealainen, devanagari, thai, japani, korea | Yhtä fonttiperhettä kaikkialle haluavat brändit |
| Inter | Latinalainen, kyrillinen, kreikkalainen, vietnam | Eurooppalaisten kielten käyttöliittymät |
| Source Sans 3 ja Source Han Sans | Latinalainen, kyrillinen, kreikkalainen sekä kiina, japani ja korea | Latinalaisen ja itäaasialaisen tekstin yhdistäminen |
| Readex Pro, Cairo, Tajawal | Arabialainen ja latinalainen | Arabiapainotteiset brändit latinalaisella tuella |

Eri kirjoitusjärjestelmiin suunnitellut perheet säilyttävät viivan paksuuden ja mittasuhteet, joten brändi näyttää samalta joka kielellä.

Jos yksi perhe ei kata kaikkea, yhdistä latinalainen kirjasin kyseisen kirjoitusjärjestelmän fonttiin, jolla on samanlainen paino, x-korkeus ja tunnelma. [Fonttiparien](https://gradiently.design/fi/guide/font-pairing) periaatteet pätevät yhdellä lisäyksellä: aseta ne rinnakkain samaan kokoon ja säädä, kunnes kumpikaan ei näytä pienemmältä.

## Arabialainen typografia ja oikealta vasemmalle asettelu

Arabia paljastaa latinalaiset tottumukset selvimmin. Se luetaan oikealta vasemmalle, kirjaimen muoto vaihtuu sanan paikan mukaan ja kirjaimet liittyvät naapureihinsa. Versaaleja ei ole. Hepreakin kulkee oikealta vasemmalle, mutta kirjaimet eivät liity.

### Vältä

- Arabian lisävälistystä, joka rikkoo kirjainliitokset
- Korostamista versaaleilla, joita arabiassa ei ole
- Latinalaisen asettelun peilausta kuvakkeita, numeroita ja logoja tarkistamatta
- Arabiaa samassa pistekoossa kuin latina, sillä se näyttää usein pienemmältä
- Liian tiukkaa riviväliä, jossa pisteet ja merkit törmäävät

### Tee

- Korosta painolla tai värillä
- Käännä asettelun suunta niin, että lukeminen alkaa oikealta
- Pidä logot, mediasäätimet ja puhelinnumerot tavallisessa suunnassaan
- Suurenna arabiaa latinaa visuaalisesti vastaavaksi
- Jätä reilu riviväli ylä- ja alapuolisille merkeille

Kufi-tyylit ovat geometrisia ja sopivat otsikoihin ja logoihin. Naskh-tyylit ovat pyöreämpiä ja luettavampia pitkissä teksteissä. Noto Kufi Arabic ja Noto Naskh Arabic tarjoavat molemmat samassa perheessä.

## Aksentit, tarkkeet ja rivikorkeus

Eurooppalaiset kielet lisäävät merkkejä kirjainten ylle ja alle: Å ruotsissa, tanskassa ja norjassa, É ranskassa, Ä ja Ö suomessa ja saksassa sekä Ç portugalissa. Englannin versaaleissa terävältä näyttävä tiukka rivikorkeus leikkaa nämä merkit tai törmäyttää ne ylempään riviin. Testaa suurimmat tarkkeelliset versaalisi ennen välistyksen lukitsemista. [Rivikorkeus](https://gradiently.design/fi/guide/line-height-and-line-length) kertoo perusteet. [Versaaliteksti](https://gradiently.design/fi/guide/all-caps-typography) vaatii erityistä huolellisuutta.

| Kieli | Testiteksti |
| --- | --- |
| Ranska | Été, Œuvre, ÇA, déjà |
| Saksa | ÄÖÜ, Straße, Größe |
| Espanja | ¿Mañana? ¡Sí! |
| Portugali | Ação, Coração, São |
| Tanska ja norja | Æble, Øre, Århus, blåbær |
| Ruotsi ja suomi | Åsa, Älvsjö, Hyvää yötä |
| Hollanti ja italia | IJsland, città, perché |

Liitä nämä otsikkoon tiukimmalla rivikorkeudellasi. Jos merkki koskee ylempää riviä tai leikkautuu, lisää väliä.

## Monikielinen typografia CSS:ssä

Kerro selaimelle jokaisen sivun tai tekstijakson kieli ja suunta. Se valitsee oikeat kirjainmuodot, tavutuksen, lainausmerkit ja rivinvaihdot. Käytä loogisia ominaisuuksia, jotta välit kääntyvät suunnan mukana automaattisesti.

```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 valitsee fontin ja tavutuksen kielen mukaan, dir määrää lukusuunnan ja padding-inline-start tulee arabiassa oikealle, englannissa vasemmalle.

`dir`-attribuutin ja kaksisuuntaisen algoritmin tiedot löytyvät [MDN:stä](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

## Monikielisen suunnittelun työnkulku

1. **Luettele kielet ja kirjoitusjärjestelmät** Kirjoita nykyiset ja mahdolliset tulevat julkaisukielet. Valitse fontit listan, älä pelkän englannin mukaan.
2. **Suunnittele pisimmällä kielellä** Tee tärkeät näkymät ja julkaisut ensin saksaksi tai suomeksi. Jos ne mahtuvat, englanti mahtuu.
3. **Testaa suurimmat tarkkeet** Kokeile yllä olevia testitekstejä joka otsikkotyylissä.
4. **Pyydä äidinkielistä lukijaa katsomaan** Rivinvaihdot, tavutus ja sävy voivat olla teknisesti oikein mutta tuntua vääriltä. Sujuva lukija näkee sen mitä työkalut eivät.

Gradientlyn käyttöliittymä puhuu 12 kieltä englannista, ranskasta ja saksasta tanskaan, norjaan ja suomeen. Tiimi voi siis työskennellä ajattelukielellään. Prossa brändipakettiin voi ladata otsikko- ja leipätekstifontit, joten voit lisätä kaikki tarkkeesi kattavan kirjasimen ja aloittaa uudet työt sillä. [Omien fonttien lataaminen](https://gradiently.design/fi/guide/custom-fonts-upload) ja [Gradientlyn käyttö muilla kielillä](https://gradiently.design/fi/guide/languages-in-gradiently) selittävät molemmat.

## FAQ

### Mitä monikielinen typografia tarkoittaa?

Tekstin latomista toimivaksi kaikilla julkaisukielillä: kirjoitusjärjestelmät kattavat fontit, pidemmät käännökset salliva asettelu sekä oikea suunta ja rivinvaihdot.

### Mitkä fontit tukevat eniten kieliä?

Noto kattaa laajimman joukon kirjoitusjärjestelmiä. IBM Plex kattaa myös latinalaisen, kyrillisen, kreikkalaisen, arabialaisen, heprealaisen, devanagarin, thain, japanin ja korean.

### Kuinka paljon englantia pidempiä käännökset ovat?

Se riippuu kielestä ja tekstistä. Lyhyet tunnisteet kasvavat eniten ja voivat kaksinkertaistua, pitkät kappaleet vähemmän. Testaa oikeilla käännöksillä.

### Voinko lisätä arabian kirjainvälistystä?

Et. Arabian kirjaimet liittyvät toisiinsa, ja lisävälistys rikkoo liitokset. Korosta painolla, koolla tai värillä.

### Miten teen verkkosivun oikealta vasemmalle?

Aseta html-elementille dir="rtl" ja oikea lang. Käytä loogisia CSS-ominaisuuksia kuten padding-inline-start, jotta välit kääntyvät suunnan mukana.