Typografia on tärkeä osa verkkosivujen suunnittelua, sillä se vaikuttaa merkittävästi ulkoasuun ja käytettävyyteen. Huolellisesti suunniteltu ja harkittu verkkosivujen typografia parantaa luettavuutta ja saavutettavuutta. Kuitenkin, koska käytettävissä on lukuisia fontteja, sen oikean valitseminen verkkosivustollesi voi olla haastavaa. Tässä tekstissä käydään läpi vinkkejä ja parhaita käytäntöjä fonttien valintaan.
Fontti-termiä käytetään varsin vapaasti puhuttaessa erilaisissa kirjaisimista. Tarkkaan ottaen fontti viittaa tiettyyn kirjasintyypin muunnelmaan, kuten “Times New Roman Regular” tai “Arial Bold”. Se sisältää lisäominaisuuksia, kuten fonttien koon, painon ja tyylin.
Kirjasintyyppi (typeface) viittaa tiettyyn “fonttiin” yleisesti. Kun puhumme fonteista Times New Roman tai Arial tarkoitamme yleensä kirjasintyyppiä. Eri kirjasintyypeillä on vaihtelevasti erilaisia versioita eli fontteja.
Typografia taas on kattotermi kirjaisimien suunnittelulle ja käyttämiselle. Siihen kuuluu sopivien kirjasintyyppien ja fonttien valinta, tekstin järjestäminen luettavalla ja esteettisesti miellyttävällä tavalla sekä erilaisten typografisten elementtien, kuten koon, painon ja värin, käyttö yhtenäisen ja tehokkaan suunnittelun luomiseksi.
Fontit jaetaan kahteen pääluokkaan: Serif ja Sans serif eli päätteellisiin ja päätteettömiin. Serif eli päätteellisten fonttien jokaisen vedon lopussa on pieniä pääteviivoja, kun taas sans-serif eli pääteettömissä fonteissa ei ole. Serif-fontit ovat perinteisempiä ja muodollisempia, kun taas sans-serif-fontit ovat yleensä moderneja ja epävirallisia. Oikean kirjasintyypin valinta riippuu tavoiteltavasta mielikuvasta.
Serif- ja sans-serif-fonttien lisäksi on display-, script- ja monospace-fontit. Display-fontit ovat koristeellisia ja herättävät huomiota, joten ne ovat ihanteellisia otsikoissa ja logoissa. Script-fontit ovat virtaavia ja kursiivisia, mikä tarjoaa tyylikkäämmän ja hienostuneemman ilmeen. Tähän kategoriaan lasketaan usein “käsinkirjoitetut” fontit. Monospace-fonttien kirjainten välillä on aina yhtä suuri väli, mikä tekee niistä hyödyllisiä koodauksessa ja ohjelmoinnissa.
Fonttikoko on toinen olennainen elementti typografiassa. Fonttikoon tulee olla tarpeeksi suuri, jotta teksti on luettavissa kaikilla laitteilla. Leipätekstin suositeltu fonttikoko on 16–20 kuvapistettä, kun taas otsikoiden fonttikoon tulee olla vähintään 30 kuvapistettä. Verkkosivuilla käytetään usein myös suhteellisia yksiköitä, jolloin käyttäjän asetukset vaikuttavat kirjaisimien kokoon.
Riviväli viittaa jokaisen tekstirivin väliin jäävää tilaa. Optimaalinen riviväli on noin 1,2–2 kertaa kirjasinkoko. Käytettävä fontti vaikuttaa riviväliin, joten se kannattaa tarkistaa fonttia vaihdettaessa.
Kirjainvälillä viitataan jokaisen kirjaimen väliseen väliin jäävään tilaan. Oikein välitetty tekstissä kirjainten välit tuntuvat tasaisilta, vaikka todellisuudessa tiettyjen kirjainten välit ovat eri pituisia.
Tekstin värin ja taustan värin välillä tulee olla tarpeeksi suuri kontrasti. Tällöin tekstin luettavuus säilyy. Joillakin verkkosivuilla on valittavissa korkean kontrastin tila, joka nostaa mm. tekstin ja taustan välistä kontrastia.
Kun valitset sopivaa fonttia, pidä mielessä yrityksen tavoitemielikuva ja luettavuus. Saavutettavan fontin valinnasta voit lukea lisää WebAIMin sivuilta. Johdonmukaisuuden vuoksi kannattaa käyttää kahta tai korkeintaan kolmea eri fonttia. Yhdelläkin fontilla voi tehdä ihmeitä.
Hierarkia tarkoittaa elementtien välistä tärkeysjärjestykseen. Hieman yksinkertaistaen tärkeimmän tekstin tulisi olla isoimmalla fonttikoolla. Selkeä hierarkia auttaa käyttäjiä navigoimaan nettisivulla ja erottamaan olennaisen tiedon. Tekstien välillä hierarkiaa voi luoda käyttäen fonttikokoja, painoja ja värejä. Otsikoissa pääotsikko on hierarkialtaan suurin eli H1 ja sen jälkeen seuraavaotsikkoko on H2 jne.
Hierarkia tarkoittaa elementtien välistä tärkeysjärjestykseen. Hieman yksinkertaistaen tärkeimmän tekstin tulisi olla isoimmalla fonttikoolla. Selkeä hierarkia auttaa käyttäjiä navigoimaan nettisivulla ja erottamaan olennaisen tiedon. Tekstien välillä hierarkiaa voi luoda käyttäen fonttikokoja, painoja ja värejä. Otsikoissa pääotsikko on hierarkialtaan suurin eli H1 ja sen jälkeen seuraavaotsikkoko on H2 jne.
Tyhjää tilaa sanotaan myös negatiiviseksi tilaksi (negative space, white space). Tyhjällä tilalla annat tekstin ja lukijan hengittää. Se on myös tyylikäs tapa erottaa eri kokonaisuudet toisistaan.
Tässä tapauksessa kontrastilla tarkoitetaan tekstin ja taustan välillä olevaa eroa. Tarkista että kontrasti on tarpeeksi korkea ja teksti on näin luettavaa. Tarkistus onnistuu Webflow’ssa suoraan väripanelista ja muilla sivuilla esimerkiksi Wave-lisäosalla Chromeen.
Tässä tapauksessa kontrastilla tarkoitetaan tekstin ja taustan välillä olevaa eroa. Tarkista että kontrasti on tarpeeksi korkea ja teksti on näin luettavaa. Tarkistus onnistuu Webflow’ssa suoraan väripanelista ja muilla sivuilla esimerkiksi Wave-lisäosalla Chromeen.
Oletko koskaan yrittänyt lukea graffitia? Usein niiden kantaaottava viesti jää lukematta. Välillä myös netissä näkee hyvin koristeellisia tai räväkkiä fontteja, joiden lukeminen on yksinkertaisesti vaikeaa. Kyseessä voi olla myös liian ohut fontti, joka ei erotu taustasta. Panosta siis aina tekstien luettavuuteen valitsemalla selkeä fontti.
Pienen kirjasinkoon käyttäminen tekee tekstistä vaikeasti luettavan, etenkin mobiililaitteilla. Pieniä fonttikokoja näkee etenkin yhteydenottokaavakkeiden pienissä pränteissä.
Mitäs veikkaat? Pieni kontrasti tekstin ja taustan välillä heikentää luettavuutta. Tällaisia tilanteita näkee, kun nettisivulla käytetään vahvaa taustaväriä. Toinen yleinen tilanne syntyy, kun käytetään taustakuvaa.
Tekstin voi tasata jompaan kumpaan laitaan tai keskittää. Joillakin sivuilla kaikki tekstit on keskitetty. Pienet tekstit voi keskittää, mutta pitkän keskitetyn tekstin lukeminen on haastavaa. Keskitä siis harkitusti.