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