Monikielinen typografia: fontit ja pidemmät sanat

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ä selittää miksi. Tässä tavallisia tunnisteita eurooppalaisen brändin usein tarvitsemilla kielillä.

• 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 ja useimpien fonttivalmistajien sivuilla.

Jos yksi perhe ei kata kaikkea, yhdistä latinalainen kirjasin kyseisen kirjoitusjärjestelmän fonttiin, jolla on samanlainen paino, x-korkeus ja tunnelma. Fonttiparien 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.

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 kertoo perusteet. Versaaliteksti vaatii erityistä huolellisuutta.

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

dir-attribuutin ja kaksisuuntaisen algoritmin tiedot löytyvät MDN:stä.

Monikielisen suunnittelun työnkulku

1. 1

   Luettele kielet ja kirjoitusjärjestelmät

   Kirjoita nykyiset ja mahdolliset tulevat julkaisukielet. Valitse fontit listan, älä pelkän englannin mukaan.

2. 2

   Suunnittele pisimmällä kielellä

   Tee tärkeät näkymät ja julkaisut ensin saksaksi tai suomeksi. Jos ne mahtuvat, englanti mahtuu.

3. 3

   Testaa suurimmat tarkkeet

   Kokeile yllä olevia testitekstejä joka otsikkotyylissä.

4. 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 ja Gradientlyn käyttö muilla kielillä selittävät molemmat.