Typografia on tärkeä osa verkkosivujen suunnittelua. Se vaikuttaa sivuston ulkoasuun, luettavuuteen, käytettävyyteen ja saavutettavuuteen. Hyvin suunniteltu typografia tekee hyvää suunnitteluä lukea ja auttaa sinua hahmottamaan, mikä sivu on tärkeä.
Typografia ei tarkoituksenmukaisesti sopivan fontin valitsemista. mukana 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 vaatiin ryhmiin. Yleisimmät ovat serif ja sans-serif.
Serif eli päätteellisissä kirjasintyypeissä kirjainten viivojen päissä on pääteviivoja. Serif-fontit annetaan tekstille korrapäran, arvokkaan tai muodollisen vaikutelman. Tunnettuja serif-kirjasintyyppejä ovat tyyliä 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 käytä selkeiksi ja moderniksi. Esimerkkejä ovat Arial, Roboto ja Open Sans.
Näiden lisäksi on muitakin fonttityyppejä.
Display-fontit ovat näyttäviä ja käytä koristeellisia. Niitä paljon 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 tai elegantti vaikutelma, mutta niiden luettuun kannattaa kiinnittää erityistä persoonaa.
Monospace-fontissa merkki vie saman levyisen tilan. Niitä tarvitaan paljon ohjelmointikoodin esittämisessä. Tunnettuja monospace-fontteja ovat muun muassa Consolas ja Courier New.
Fonttikoon tarvitse olla riittävän suuri, jotta tekstiä voidaan lukea vaivatta myydä laitteilla.
Leipätekstissä hyvä lähtökohta yleensä noin 16–20 px. Sopiva koko vaihtoehtoista kirjasintyypistä, sivustosta ja kohderyhmästä.
Otsikot ovat kulusti leipätekstiä suurempia. Kaikkien ei tarvitse olla vähintään 30 pikseliä. Otsikoiden koko niiden tasosta ja sivuston visuaalisesta hierarkiasta.
Verkkosivuilla fonttikokoja voidaan käyttää yksiköillä px, rem ja em.
px tarkoittaa pikseliä. rem on suhteellinen yksikkö, joka sopii 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 use noin 1,4–1,6 kertaa fonttikoko.
Sopiva riviväli myös käyttöstä kirjasintyy Fonttia vaihdettaessa kannattaa aina myös riviväli.
Fonttikoon lisäksi tekstipalstan leveys vaikuttaa myös luettavuuteen.
Jos tekstirivi on erittäin pitkä, lukijan vaikeampi löytää seuraavan rivin alkua. Hyvin lyhyellä katse joutuulla rivillä taasuudelleen riville.
Leipätekstissä hyvänä lähtökohtana pitää noin 45–75 merkkiä yhdellä rivillä.
Tekstin värin ja taustan välillä tarvitaan kontrasti. Jos sopivan vaaleanharmaata tekstiä näkyy taustalla, tekstin lukeminen voi olla vaikeaa.
WCAG-saavutettavuusohjeissa normaalikokoisen tekstin kontrastisuhteen tulisi olla vähintään 4,5:1. Suurikokoiselle tekstille minisuhde on 3:1.
Kontrastisuhteen tarkasteluun voi käyttää kontrastitarkistustyökalua.
Kontrastia kannattaa myös kannattaa valita silloin, kun teksti sijoitetaan kuvan tai värikkään taustan päälle.
Pelkkää väriä ei voi kärsiä ainoana tapana välittää tietoa. Esimerkiksi linkkien tulisi erottua muusta tekstistä riittävän selkeästi.