Fontit ja typografia verkkosivuilla

1. Typografian perusteita

Typografia on tärkeä osa verkkosivujen suunnittelua. Se vaikuttaa sivuston ulkoasuun, luettavuuteen, käytettävyyteen ja saavutettavuuteen. Hyvin suunniteltu typografia tekee sisällöstä miellyttävää lukea ja auttaa käyttäjää hahmottamaan, mikä sivulla on tärkeää.

Typografia ei tarkoita pelkästään sopivan fontin valitsemista. Siihen kuuluvat esimerkiksi kirjasintyypit, fonttikoot, fontin painot, rivivälit, kirjainvälit, tekstirivien pituudet, värit sekä tekstin asettelu.

1.1 Fontti ja kirjasintyyppi

Arkikielessä fontti-sanaa käytetään yleensä tarkoittamaan tekstin ulkoasua, kuten Arial, Roboto tai Times New Roman. Tarkemmin ilmaistuna voidaan kuitenkin erottaa toisistaan kirjasintyyppi (typeface) ja fontti (font).

Kirjasintyyppi tarkoittaa kirjainten yhteistä visuaalista muotoilua. Esimerkiksi Arial, Roboto ja Times New Roman ovat kirjasintyyppejä.

Fontti tarkoittaa tarkemmin kirjasintyypin tiettyä leikkausta tai versiota. Esimerkiksi Roboto Regular, Roboto Bold ja Roboto Italic ovat saman Roboto-kirjasintyypin eri fontteja.

Verkkosivujen tekemisessä fontti-sanaa käytetään kuitenkin yleisesti myös kirjasintyypin synonyymina.

1.2 Fonttityypit

Tekstin värin ja taustan välillä täytyy olla riittävä kontrasti. Jos esimerkiksi vaaleanharmaata tekstiä käytetään valkoisella taustalla, tekstin lukeminen voi olla vaikeaa.

Kirjasintyypit voidaan jakaa erilaisiin ryhmiin. Yleisimmät ovat serif ja sans-serif.

Serif eli päätteellisissä kirjasintyypeissä kirjainten viivojen päissä on pieniä pääteviivoja. Serif-fontit voivat antaa tekstille perinteisen, arvokkaan tai muodollisen vaikutelman. Tunnettuja serif-kirjasintyyppejä ovat esimerkiksi Times New Roman ja Georgia.

Sans-serif eli päätteettömistä kirjasintyypeistä pääteviivat puuttuvat. Ne ovat erittäin yleisiä verkkosivuilla ja käyttöliittymissä. Sans-serif-fontit mielletään usein selkeiksi ja moderneiksi. Esimerkkejä ovat Arial, Roboto ja Open Sans.

Näiden lisäksi on muitakin fonttityyppejä.

Display-fontit ovat näyttäviä ja usein koristeellisia. Niitä käytetään esimerkiksi suurissa otsikoissa, mainoksissa ja logoissa. Pitkään leipätekstiin ne soveltuvat yleensä huonosti.

Script- ja handwriting-fontit muistuttavat käsinkirjoitusta tai kalligrafiaa. Niillä voidaan luoda persoonallinen tai elegantti vaikutelma, mutta niiden luettavuuteen kannattaa kiinnittää erityistä huomiota.

1.3 Fonttikoko

Fonttikoon täytyy olla riittävän suuri, jotta tekstiä voidaan lukea vaivattomasti erilaisilla laitteilla.

Leipätekstissä hyvä lähtökohta on yleensä noin 16–20 px. Sopiva koko riippuu kuitenkin käytettävästä kirjasintyypistä, sivustosta ja kohderyhmästä.

Otsikot ovat tavallisesti leipätekstiä suurempia. Kaikkien otsikoiden ei kuitenkaan tarvitse olla esimerkiksi vähintään 30 pikseliä. Otsikoiden koko riippuu niiden tasosta ja sivuston visuaalisesta hierarkiasta.

Verkkosivuilla fonttikokoja voidaan määrittää esimerkiksi yksiköillä px, rem ja em.

px tarkoittaa pikseliä. rem on suhteellinen yksikkö, joka perustuu sivun juurielementin fonttikokoon. em puolestaan suhteutuu elementin tai sen ympäristön fonttikokoon.

Suhteellisten yksiköiden käyttäminen helpottaa joustavan ja saavutettavan typografian rakentamista.

1.4 Riviväli

Riviväli tarkoittaa tekstirivien välistä pystysuuntaista tilaa. 

Liian pieni riviväli tekee tekstistä ahtaan näköistä ja vaikeuttaa lukemista. Liian suuri riviväli puolestaan voi hajottaa tekstikappaleen visuaalisesti.

Leipätekstissä hyvä lähtökohta on usein noin 1,4–1,6 kertaa fonttikoko.

Sopiva riviväli riippuu myös käytettävästä kirjasintyypistä. Fonttia vaihdettaessa kannattaa aina tarkistaa myös riviväli.

1.5 Kirjainväli

Kirjainväli tarkoittaa kirjainten välistä tilaa. CSS:ssä sitä voidaan säätää letter-spacing-ominaisuudella.

Useimmiten fontin suunnittelijan määrittelemä oletuskirjainväli toimii parhaiten. Liian suuri tai liian pieni kirjainväli voi heikentää tekstin luettavuutta.

1.6 Tekstirivin pituus

Fonttikoon lisäksi myös tekstipalstan leveys vaikuttaa merkittävästi luettavuuteen.

Jos tekstirivi on erittäin pitkä, lukijan on vaikeampi löytää seuraavan rivin alkua. Hyvin lyhyellä rivillä taas katse joutuu siirtymään jatkuvasti uudelle riville.

Leipätekstissä hyvänä lähtökohtana voidaan pitää noin 45–75 merkkiä yhdellä rivillä.

1.7 Väri ja kontrasti

Tekstin värin ja taustan välillä täytyy olla riittävä kontrasti. Jos esimerkiksi vaaleanharmaata tekstiä käytetään valkoisella taustalla, tekstin lukeminen voi olla vaikeaa.

WCAG-saavutettavuusohjeissa normaalikokoisen tekstin kontrastisuhteen tulisi olla vähintään 4,5:1. Suurikokoiselle tekstille vähimmäissuhde on 3:1.

Kontrastisuhteen tarkasteluun voi käyttää contrast checker -työkalua.

Kontrastia kannattaa tarkastella myös huolellisesti silloin, kun teksti sijoitetaan kuvan tai värikkään taustan päälle. 

Pelkkää väriä ei myöskään kannata käyttää ainoana tapana välittää tietoa. Esimerkiksi linkkien tulisi erottua muusta tekstistä riittävän selkeästi. 

2. Fonttien käyttäminen verkkosivuilla

2.1 Web-fontit

Kaikkia fontteja ei löydy käyttäjän tietokoneelta tai puhelimelta. Tämän vuoksi verkkosivuilla käytetään usein web-fontteja, jotka selain lataa verkkosivun mukana.

Web-fontteja voidaan käyttää esimerkiksi Google Fontsin tai Adobe Fontsin kaltaisista palveluista. Fonttitiedostot voidaan myös tallentaa verkkosivuston omalle palvelimelle.

Fonttia valittaessa kannattaa huomioida myös sen lisenssi. Kaikkia internetistä löytyviä fontteja ei saa käyttää vapaasti verkkosivuilla tai kaupallisissa projekteissa.

Fonttien lataaminen ulkopuolisesta palvelusta voi lisäksi vaikuttaa sivuston tietosuojaan. Tämän vuoksi fonttien lataaminen omalta palvelimelta voi joissakin tilanteissa olla hyvä vaihtoehto.

2.2 Fontin paino

Fontin painolla tarkoitetaan tekstin paksuutta. CSS:ssä sitä säädetään font-weight-ominaisuudella.

Tyypillisesti 400 vastaa normaalia tekstiä ja 700 lihavoitua tekstiä.

Kaikki kirjasintyypit eivät kuitenkaan sisällä kaikkia mahdollisia fonttipainoja. Lisäksi jokaisen fonttipainon lataaminen voi kasvattaa verkkosivuston ladattavien tiedostojen määrää.

Usein muutama (1-3) harkitusti valittu fonttipaino riittää.

2.4 Fontit ja sivuston suorituskyky

Web-fontit ovat tiedostoja, jotka käyttäjän selain joutuu lataamaan. Mitä enemmän erilaisia kirjasintyyppejä, fonttipainoja ja tyylejä käytetään, sitä enemmän ladattavaa sivustolla voi olla.

Fontteja kannattaa siis käyttää harkitusti.

Useimmilla verkkosivustoilla yksi tai kaksi hyvin valittua kirjasintyyppiä riittää. Vaihtelua voidaan luoda esimerkiksi fonttikoolla ja saman kirjasintyypin eri painoilla.

3. Vinkkejä fonttien valintaan

3.1 Valitse vähän ja viisaasti

Fonttia valittaessa kannattaa huomioida sivuston tavoittelema mielikuva sekä ennen kaikkea tekstin luettavuus.

Fontin täytyy sopia sivuston tarkoitukseen. Asianajotoimiston, päiväkodin ja peliyrityksen verkkosivujen typografia voi näyttää hyvin erilaiselta.

Useimmiten verkkosivustolla kannattaa käyttää vain yhtä tai kahta kirjasintyyppiä. Kolmea erilaista kirjasintyyppiä kannattaa käyttää vain, jos siihen on selkeä syy.

Yhdelläkin kirjasintyypillä voidaan rakentaa monipuolinen kokonaisuus käyttämällä erilaisia fonttikokoja ja -painoja.

3.2 Käytä hierarkiaa

Visuaalinen hierarkia kertoo käyttäjälle, mitkä asiat ovat tärkeimpiä. Tärkeät otsikot voidaan esimerkiksi esittää suurempina ja vahvempina kuin niitä seuraava leipäteksti.

Hierarkiaa voidaan luoda esimerkiksi fonttikoolla, fontin painolla, värillä ja tyhjällä tilalla.

HTML:n otsikkotasot H1–H6 kuvaavat puolestaan sisällön rakennetta ja otsikoiden keskinäistä hierarkiaa.

H1 on sivun pääotsikko. H2-otsikoilla voidaan jakaa sisältö pääkokonaisuuksiin ja H3-otsikoilla edelleen H2-otsikoiden alaisiin kokonaisuuksiin.

3.3 Optimoi luettavuutta

Hyvä fontti ei yksinään tee tekstistä helppolukuista.

Luettavuuteen vaikuttavat esimerkiksi fonttikoko, riviväli, kirjainväli, tekstirivin pituus, kontrasti sekä tekstin jäsentely.

Pitkiä tekstikokonaisuuksia kannattaa jakaa kappaleisiin. Väliotsikot, listat, kuvat ja lainaukset voivat auttaa jäsentämään sisältöä.

Kukaan ei halua lukea loputonta tekstimassaa, jossa on kilometrin mittaisia rivejä ja kappaleita.

3.4 Käytä tyhjää tilaa

Tyhjää tilaa kutsutaan myös negatiiviseksi tilaksi (negative space tai white space).

Tyhjä tila ei tarkoita hukattua tilaa. Sen avulla voidaan erottaa sisältökokonaisuuksia toisistaan ja tehdä sivusta rauhallisempi sekä helpommin hahmotettava.

Tekstin ympärillä kannattaa siis olla riittävästi tilaa.

3.5 Tarkasta kontrasti

Älä luota pelkästään omaan silmääsi kontrastia arvioidessasi.

Tekstin ja taustan välinen kontrastisuhde voidaan mitata erilaisilla saavutettavuustyökaluilla. Esimerkiksi WAVE ja selainten kehittäjätyökalut auttavat löytämään kontrastiongelmia.

Tarkista erityisesti vaaleat tekstit, värilliset taustat sekä kuvien päälle sijoitetut tekstit.

4. Yleisimmät virheet

4.1 Liian monta fonttia

Liian monen erilaisen fontin käyttäminen tekee sivuston ulkoasusta helposti sekavan ja epäyhtenäisen.

Useimmilla verkkosivustoilla yksi tai kaksi hyvin valittua kirjasintyyppiä riittää.

Vaihtelua voidaan luoda saman kirjasintyypin eri fonttiko’oilla, painoilla ja tyyleillä.

4.2 Epäselvä fontti

Koristeellinen fontti voi näyttää hienolta, mutta sen tärkein tehtävä ei ole näyttää hienolta vaan välittää teksti käyttäjälle.

Erityisesti script-, handwriting- ja display-fonttien kanssa kannattaa olla varovainen. Ne voivat toimia suurissa otsikoissa, mutta pitkissä teksteissä niiden lukeminen voi olla raskasta.

Myös erittäin ohut fontti voi olla vaikeasti luettava.

Panosta siis aina tekstien luettavuuteen.

4.3 Liian pieni fontti

Liian pieni fonttikoko tekee tekstistä vaikeasti luettavan erityisesti mobiililaitteilla.

Pientä tekstiä näkee joskus esimerkiksi lomakkeiden ohjeteksteissä, kuvateksteissä ja sivustojen pienellä kirjoitetuissa lisätiedoissa.

Se, että jokin tieto on vähemmän tärkeä, ei tarkoita sitä, että sen pitäisi olla vaikeasti luettavissa.

4.4 Liian pieni kontrasti

Pieni kontrasti tekstin ja taustan välillä heikentää luettavuutta.

Ongelma syntyy helposti esimerkiksi silloin, kun käytetään vaaleanharmaata tekstiä valkoisella taustalla tai teksti sijoitetaan suoraan valokuvan päälle.

Muista, että hyvältä näyttävä väriyhdistelmä ei automaattisesti tarkoita saavutettavaa väriyhdistelmää.

4.6 Kaikki teksti on keskitetty

Tekstin voi tasata esimerkiksi vasemmalle, oikealle tai keskelle.

Lyhyet otsikot ja muutaman sanan tekstikokonaisuudet voivat toimia hyvin keskitettynä. Pitkien tekstikappaleiden keskittäminen kuitenkin vaikeuttaa lukemista, koska jokainen tekstirivi alkaa eri kohdasta.

Pitkissä teksteissä vasemmalle tasaaminen on yleensä turvallisin vaihtoehto.

Keskitä siis harkitusti.

4.7 Liikaa fonttipainoja ja web-fontteja

Jos sivusto käyttää useita kirjasintyyppejä ja jokaisesta ladataan suuri määrä eri painoja ja tyylejä, käyttäjän selain joutuu lataamaan paljon fonttitiedostoja.

Tämä voi hidastaa sivuston ensimmäistä latausta.

Valitse vain ne kirjasintyypit, fonttipainot ja tyylit, joita sivustolla oikeasti tarvitaan.