Fontit nettisivuilla

Typografia on tärkeä osa web-suunnittelua, sillä se vaikuttaa merkittävästi ulkoasuun ja käytettävyyteen. Harkittu typografia parantaa luettavuutta ja vahvistaa brändi-identiteettiä. Kuitenkin, koska käytettävissä on lukuisia fontteja, sen oikean valitseminen verkkosivustollesi voi olla haastavaa. Tässä artikkelissa käydään läpi vinkkejä ja parhaita käytäntöjä fonttien valintaan.

Ensin termit kuntoon

Fontti-termiä käytetään varsin vapaasti puhuttaessa erilaisissa kirjaisimissa. Tarkkaan ottaen fontti viittaa tiettyyn kirjasintyypin muunnelmaan, kuten "Times New Roman Regular" tai "Arial Bold". Se sisältää lisäominaisuuksia, kuten hahmojen koon, painon ja tyylin.

Kirjasintyyppi (typeface) viittaa tiettyyn “fonttiin” yleisesti. Kun puhumme fonteista Times New Roman tai Arial tarkoitamme yleensä kirjasintyyppiä. Eri kirjasintyypeillä on vaihelevasti erilaisia versioita eli fontteja. Tässä kirjoituksessa käytän fontti- ja kirjaisintyyppi-termiä sekaisin.

Fonttiperhe (font family) on ryhmä toisiinsa liittyviä kirjasintyyppejä, joilla on samanlaiset ominaisuudet. Se on jokseenkin joustava termi. Voidaan katsoa, että serif-kirjaisintyypit muodostavat yhden suuren kirjaisinperheen. Toisaalta tarkemmalla määritelmällä esimerkiksi kaikki Helvetican versiot muodostavat myös kirjaisinperheen.

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.

1. Typografian perusteita

Ennen parhaiden käytäntöjen tutkimista on tärkeää ymmärtää typografian perusteet. Typografia sisältää erilaisia aiheita, kuten kirjasintyypin, fontin koon, rivivälit, kirjainvälit ja värit. Fontin valinta riippuu verkkosivuston tarkoituksesta, kohdeyleisöstä ja brändi-identiteetistä.

1.1 Fonttityypit

Fontit jaetaan kahteen pääluokkaan: Serif ja Sans serif. Serif-fonttien jokaisen vedon lopussa on pieniä viivoja, kun taas sans-serif-fonteissa ei. 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 kirjainte välillä on aina yhtä suuri väli, mikä tekee niistä hyödyllisiä koodauksessa ja ohjelmoinnissa.

1.2 Fonttikoko

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.

1.3 Rivivälit

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.

1.4 Kirjainvälit

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. 

1.5 Väri

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. 

2. Vinkkejä fonttien käyttöön

Nyt kun olemme käsitelleet perusasiat, käydään läpi muutama hyväksi todettu käytäntö.

2.1 Valitse vähän ja valitse viisaasti

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

2.2 Käytä hierarkiaa

Hierarkia tarkoittaa elementtien välistä tärkeysjärjestykseen. Hieman yksin kertaistaen tärkeimmän tekstin tulisi olla isoimmalla fonttikoolla. Selkeä hierarkia auttaa käyttäjiä navigoimaan nettisivulla ja erottamaan olennaisen tiedon. Tekstien välilä hierarkiaa voi luoda käyttäen fonttikokoja, painoja ja värejä.

2.3 Optimoi luettavuutta ja pikaista selailua varten

Luettavuus on mainittu jo moneen kertaan. Oikea riviväli, kirjasinkoko ja kirjainväli helpottavat lukemista. Tämän lisäksi väliotsikot, listat, lainaukset ja kuvat jäsentävät tekstiä. Kukaan ei halua lukea loputonta tekstimassaa, jossa on kilometrin mittaisia lauseita.

2.4 Käytä tyhjää tilaa tehokkaasti

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. 

2.5 Tarkista kontrasti

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.

3. Yleisimmät virheet fonttien kanssa

Jep, näitä näkyy varsin usein internetin ihmeellisessä maailmassa. Onneksi ne on helppo välttää. 

3.1 Liian monta fonttia

Liian monen fontin käyttö voi johtaa sotkuiseen ja hämmentävään nettisivuun. Johdonmukaisuuden vuoksi on parasta rajoittaa verkkosivustolla käytettävien fonttien määrä kahteen tai kolmeen. Liian monien fonttien käyttö voi myös hidastaa sivuston latautumista.

Kirjasimia valittaessa on tärkeää ottaa huomioon niiden yhteensopivuus. Jos haluaa pelata varman päälle, kannattaa valita kirjasimet samasta kirjaisinperheestä. Liian monien fonttien käyttäminen voi luoda häiritsevän vaikutelman ja hämmentää käyttäjää.

3.2 Epäselvät fontit

Oletko koskaan yrittänyt lukea graffittia? Usein niiden kantaaottava viesti jää lukematta. Välillä myös nettissä 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.

3.3 Liian pieni fontti

Pienen kirjasinkoon käyttäminen tekee tekstistä vaikeasti luettavan, etenkin mobiililaitteilla. Pieniä fonttikokoja näkee etenkin yhteydenottokaavakkeiden pienissä pränteissä. 

3.4 Liian pieni kontrasti

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. 

3.5 Kaikki on keskitetty

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.

4. Fonttien yhdistäminen

Kirjasintyyppien yhdistäminen on myös olennainen taito. Kirjasintyyppien yhdistäminen voi kuitenkin olla haastavaa. Se edellyttää eri tyylien, painojen ja kokojen tasapainottamista säilyttäen samalla yhtenäinen ulkoasun.

Yksi tapa yhdistää kirjasintyylejä on käyttää vastakkaisia ​​tyylejä. Esimerkiksi serif-fontin ja sans-serif-fontin yhdistäminen luo visuaalisen kontrastin, joka voi parantaa suunnittelun hierarkiaa. Serif-fontti sopii otsikoille, kun taas sans-serif-fontti sopii mainiosti leipätekstiin. Vastakkaiset kirjasintyypit voivat luoda selkeän visuaalisen hierarkian, mikä auttaa lukijaa navigoimaan sisällössä helpommin.

Toinen tapa yhdistää kirjasintyyppejä on käyttää samankaltaisia kirjaisimia. Tällöin etsit kirjasintyypejä, joilla on samanlaiset ominaisuudet, kuten sama x-korkeus, paino tai mittasuhteet. Tämä luo yhtenäisen ja harmonisen muotoilun, joka miellyttää silmää.

Liian monien kirjasinten yhdistäminen voi aiheuttaa sekaannusta ja heikentää luettavuutta. Nyrkkisääntönä valitse yksi kirjaisin otsikoille ja toinen leipätekstille. Jos välttämättä haluta, niin voit valita kolmannen tehostefontin erikoistapauksiin. 

On myös enemmän kuin ok, käyttää vain yhtä kirjaisintyyppiä. Tällöin kannattaa vain varmistaa, että otsikko ja leipäteksti eroavat selvästi toisistaan ja leipäteksti on luettava myös pienessä koossa.

Kun innostut kahlaamaan fontteja, muista konteksti, jossa suunnittelet. Onko kyseessä asianajotoimisto vai päiväkoti?

Yhteenveto

Fonttien tehtävä nettisivuilla on ensisijaisesti olla helpottaa lukemista ja toissijaisesti välittää mielikuvaa tai tunnelmaa. Valitse siis fontit viisaasti, varmista tarvittava kontrasti ja vältä yleisiä virheitä. Niin ja muista myös kirjoittaa jotain viisasta. Täydellinenkään typografia ei pelasta huonoa sisältöä.