Typografia

Typografia on sitä, miltä teksti näyttää ja miten se luetaan. Sana tulee kreikasta, ja alun perin sillä tarkoitettiin kirjapainotaitoa. Nykyään se kattaa tekstin visuaalisen käsittelyn missä tahansa, myös verkkosivuilla ja sovelluksissa.

Verkkosivulla suurin osa sisällöstä on tekstiä. Typografia vaikuttaa siis suoraan siihen, jaksaako kävijä lukea sivua vai lähteekö hän pois jo ensimmäisen kappaleen jälkeen.

Mistä typografia koostuu?

• Kirjaintyyppi ja fontti. Kirjaintyyppi on muotoilu, esimerkiksi Inter. Fontti on siitä yksi leikkaus, kuten Inter Semibold. Arkikielessä sanoja käytetään ristiin, eikä siitä ole haittaa.
• Koko ja hierarkia. Otsikoiden, leipätekstin ja kuvatekstien kokoerojen pitää olla niin selviä, että rakenne näkyy yhdellä silmäyksellä.
• Riviväli. Leipätekstissä toimiva riviväli on yleensä noin puolitoista kertaa kirjainkoko. Isot otsikot tarvitsevat paljon vähemmän.
• Rivin pituus. Leipätekstin rivillä on hyvä olla noin 45:stä 75:een merkkiä. Liian pitkällä rivillä silmä hukkaa seuraavan rivin alun.
• Välistys. Kirjainvälistys säätää koko tekstin kirjainvälejä, parivälistys yksittäisiä kirjainpareja, kuten AV tai To.

Kun leipäteksti tuntuu raskaalta, vika on harvoin itse fontissa. Rivin pituus ja riviväli kannattaa tarkistaa ennen kuin alkaa etsiä uutta kirjaintyyppiä.

Mitä erityistä suomenkielisessä typografiassa on?

Suomen sanat ovat pitkiä. Saavutettavuusvaatimukset ei mahdu kapeaan mobiilipalstaan, ja ilman tavutusta sana joko valuu reunan yli tai overflow-wrap-säännön kanssa katkeaa mistä sattuu. CSS:n hyphens: auto tavuttaa tekstin selaimen sanaston avulla, kun sivun lang-attribuutti on fi. Tavutuksen laatu vaihtelee selaimittain, joten tulos pitää tarkistaa oikeilla laitteilla.

Suomessa lainausmerkit ovat samanlaiset molemmissa päissä (”näin”), ja ajatusviivana käytetään lyhyttä ajatusviivaa välilyöntien kanssa. Englanninkielisestä pohjasta tehty sivusto unohtaa nämä helposti.

Fonttia valitessa kannattaa myös tarkistaa, että ä, ö ja å löytyvät jokaisesta käytetystä painosta. Google Fontsin latin-osajoukko kattaa ne, mutta itse karsittu osajoukko tai kapea display-fontti ei välttämättä.

Miten typografia toimii verkkosivuilla?

Verkossa fontit ovat tiedostoja, jotka selain lataa. Jos lataus kestää, selain näyttää ensin varafontin ja vaihtaa sen sitten oikeaan, jolloin teksti hyppää. Hyppy pienenee, kun fontit ovat omalla palvelimella WOFF2-muodossa, ensimmäisen näkymän fontit esiladataan ja font-display on asetettu. Muuttuva fontti (variable font) sisältää useita painoja samassa tiedostossa.

Kaupallisten fonttien lisenssi kannattaa lukea ennen julkaisua. Työpöytälisenssi ei yleensä kata verkkokäyttöä, vaan verkkosivulle tarvitaan erillinen web-lisenssi.

Kirjainkoon voi sitoa näkymän leveyteen liukuvasti. CSS:n clamp() kasvattaa otsikkoa näkymän mukana minimin ja maksimin välillä, esimerkiksi font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem). Erillisiä kokoja ei silloin tarvita jokaiselle breakpointille, ja rem-yksikkö pitää käyttäjän oman tekstikokoasetuksen voimassa.