Miten nettisivujen tekstikoot toimivat? 

Oletko koskaan miettinyt, miksi joitakin nettisivuja on helppo lukea ja toisilla sivuilla teksti tuntuu raskaalta jo muutaman sekunnin lukemisen jälkeen? Syynä ei useinkaan ole itse sisältö. Paljon suurempi merkitys on sillä, miten sisältö on esitetty.

Otsikoiden koko, leipätekstin fontti, rivivälit ja kappalejaot vaikuttavat kaikki siihen, kuinka nopeasti kävijä hahmottaa sivun ja löytää etsimänsä tiedon. Liian pieni teksti rasittaa lukemista, liian suuret otsikot vievät huomion itseensä, ja liian pienet rivivälit saavat hyvin kirjoitetunkin sisällön näyttämään raskaalta. 

Hyvä typografia toimii päinvastoin. Siihen ei yleensä kiinnitä mitään huomiota, koska kaikki tuntuu luonnolliselta. Otsikot erottuvat selkeästi, tekstiä on helppo lukea ja sivun rakenne hahmottuu yhdellä silmäyksellä. 

Tässä tekstissä käydään läpi, mitä H1-, H2- ja H3-otsikot tarkoittavat, minkä kokoista tekstiä verkkosivuilla yleensä käytetään, miksi riviväleillä on yllättävän suuri merkitys ja millaisia virheitä tekstikokojen kanssa kannattaa välttää. 

Mitä H1, H2 ja H3 tarkoittavat? 

Kun verkkosivulle lisätään otsikko, kyse ei ole pelkästään siitä, että siitä tehdään muuta tekstiä suurempi. Otsikoilla on oma rakenteensa, jonka avulla sekä kävijä että hakukone ymmärtävät, miten sivun sisältö etenee. Hyvin rakennettu otsikkohierarkia tekee pitkästäkin sivusta helpommin luettavan, kun taas sekava rakenne vaikeuttaa sekä sisällön hahmottamista että hakukoneiden työtä. 

H1 on sivun tärkein otsikko. Käytännössä se kertoo yhdellä silmäyksellä, mistä sivulla on kyse. Jokaisella sivulla kannattaa käyttää vain yhtä H1-otsikkoa. 

H2-otsikot jakavat sisällön omiin kokonaisuuksiinsa. Jos palvelusivulla kerrotaan ensin palvelun sisällöstä, sen jälkeen hinnoista ja lopuksi usein kysytyistä kysymyksistä, jokainen näistä kohdista alkaa omalla H2-otsikollaan. Tämä helpottaa lukemista huomattavasti. Harva lukee verkkosivua sanasta sanaan, vaan suurin osa silmäilee otsikoita ja pysähtyy vasta silloin, kun vastaan tulee itseä kiinnostava kohta. 

H3-otsikot ovat puolestaan H2-otsikoiden alaotsikoita. Niitä käytetään silloin, kun yhtä aihetta halutaan käsitellä hieman tarkemmin. Esimerkiksi pidemmissä blogeissa yksi H2-otsikko voi sisältää useita H3-otsikoita, jolloin sisältö pysyy selkeänä eikä yhdestä kappaleesta muodostu liian pitkää. 

Rakennetta voi ajatella samalla tavalla kuin kirjaa. H1 on kirjan nimi, H2 on luku ja H3 luvun alaluku. Mitä loogisempi rakenne on, sitä helpompi sisältöä on seurata. 

Kuinka suuria otsikoiden yleensä kannattaa olla? 

Tähän ei ole yhtä oikeaa vastausta, sillä sopiva koko riippuu käytettävästä fontista, verkkosivujen ilmeestä ja siitä, kuinka pitkiä otsikot ovat. 

Suurimmalla osalla nykyaikaisista verkkosivuista H1-otsikko on kuitenkin noin 40–60 pikselin kokoinen. Etusivulla voidaan käyttää tätäkin suurempia otsikoita, sillä niiden tärkein tehtävä on kertoa heti ensimmäisessä näkymässä, mitä yritys tekee ja kenelle palvelu on tarkoitettu. Jos pääotsikko jää liian pieneksi, koko etusivun tärkein viesti voi jäädä helposti huomaamatta. 

H2-otsikot ovat tavallisesti noin 28–40 pikselin kokoisia. Niiden pitää erottua selkeästi leipätekstistä, mutta niiden ei kuulu kilpailla pääotsikon kanssa huomiosta.

H3-otsikot ovat puolestaan hieman tätä pienempiä, usein noin 22–30 pikseliä. Niiden tehtävänä on täydentää rakennetta silloin, kun sisältö jakautuu useampaan pienempään kokonaisuuteen. 

Tarkat pikselimäärät eivät kuitenkaan ratkaise sitä, näyttääkö verkkosivu hyvältä vai ei. Paljon tärkeämpää on se, että eri otsikkotasojen välillä on selkeä ero. Jos H1, H2 ja H3 näyttävät lähes samalta, sivun rakenne alkaa helposti hämärtyä. Jos erot taas ovat liian suuria, kokonaisuus näyttää levottomalta ja huomio kiinnittyy enemmän typografiaan kuin itse sisältöön. 

Hyvä otsikkohierarkia näyttää luonnolliselta eikä siihen tarvitse kiinnittää erikseen huomiota. 

Kuinka suurta leipätekstin pitäisi olla? 

Leipäteksti on verkkosivun tärkein tekstiosa, sillä juuri sitä kävijä lukee eniten. Tässä kannattaa siis olla tarkkana. 

Vielä muutama vuosi sitten 14 pikselin fonttikoko oli hyvin tavallinen näky verkkosivuilla. Nykyään se on monesti liian pieni, kun suuri osa verkkosivujen liikenteestä tulee puhelimista, tekstin pitäisi olla riittävän suurta ilman, että sitä tarvitsee zoomata tai lukea tavallista tarkemmin. 

Useimmilla verkkosivuilla hyvä leipätekstin koko on noin 16–18 pikseliä. 

Yhtä tärkeää kuin itse fonttikoko on kuitenkin riviväli. Jos rivit ovat liian lähellä toisiaan, pitkäkin teksti alkaa näyttää yhdeltä suurelta tekstimassalta. Kun riviväliä on riittävästi, sisältö hengittää ja lukeminen tuntuu huomattavasti kevyemmältä. 

Sama ajatus koskee myös kappalejakoa. Pitkiä tekstiseiniä on raskas lukea, vaikka fonttikoko olisi täysin oikea. Lyhyemmät kappaleet, selkeät väliotsikot ja riittävä tyhjä tila tekevät sisällöstä huomattavasti miellyttävämpää ilman, että kävijä edes tiedostaa, mistä tunne syntyy. 

Mitä rem ja em tarkoittavat? 

Jos nettisivuja rakennetaan WordPressillä tai muulla sivurakentajalla, vastaan tulee ennemmin tai myöhemmin myös yksiköitä nimeltä rem ja em. Nämäkin kuvaavat kokoa, mutta valtaosa on varmaan tottunut katsomaan pikseleitä, eli äskeistä px – yksikköä. 

Rem perustuu koko verkkosivuston oletustekstikokoon. Useimmilla sivustoilla yksi rem vastaa käytännössä noin 16 pikseliä. Jos otsikon kooksi asetetaan esimerkiksi 2rem, siitä tulee noin 32 pikselin kokoinen. Remin suurin etu on se, että koko sivuston tekstikokoja voidaan hallita yhdestä paikasta. Jos myöhemmin päätetään kasvattaa hieman leipätekstin kokoa, myös otsikoiden mittasuhteet pysyvät automaattisesti oikeina. 

Em toimii hieman eri tavalla. Se perustuu aina ympäröivän elementin kokoon. Jos esimerkiksi tekstilaatikon fonttikoko on 20 pikseliä ja sen sisällä olevan otsikon kooksi määritellään 2em, otsikosta tulee 40 pikselin kokoinen. Tämä tekee em-yksiköstä hyvin joustavan, mutta samalla myös hieman vaikeamman hallita suuremmilla verkkosivuilla, koska tekstikoot voivat muuttua useamman eri tason kautta. 

Suurimmalle osalle verkkosivujen omistajista näillä yksiköillä ei ole arjessa kovinkaan suurta merkitystä. Niitä on kuitenkin hyvä ymmärtää sen verran, että tietää miksi samoja tekstikokoja voidaan hallita koko sivustolla yhdestä paikasta. 

Rem on nykyään pikseleitä yleisempi yksikkö, koska se tekee koko sivuston tekstikokojen hallinnasta helpompaa. Pikseleillä jokainen fonttikoko määritellään erikseen eri kokoisille näytöille, kun taas rem perustuu sivuston yhteiseen oletuskokoon. Tämän ansiosta tekstien mittasuhteet pysyvät automaattisesti yhtenäisinä myös silloin, kun fonttikokoja myöhemmin muutetaan. 

Kokeile. Ota etusivun hero-osio ja muuta otsikon ja leipätekstin koko px->rem ja katso miten koko muuttuu. 

Yleisimmät virheet tekstikokojen kanssa 

1. Liian pieni teksti 

Liian pieni leipäteksti on edelleen yleisin virhe, johon yritysten verkkosivuilla näkyy. Tavoitteena on usein tehdä sivustosta siistin näköinen, mutta käytännössä pienestä tekstistä tulee nopeasti raskasta luettavaa. 

2. Liian pieni tai suuri riviväli 

Toinen yleinen virhe on rivivälit. Tätä ei aina huomaa ennen kuin sivulla on useita pitkiä kappaleita peräkkäin. Teksti näyttää ahtaalta, rivit sulautuvat toisiinsa ja lukeminen vaatii huomattavasti enemmän keskittymistä kuin pitäisi. Pelkkä rivivälin kasvattaminen voi tehdä samasta sisällöstä yllättävän paljon miellyttävämpää lukea. Toisaalta, liian suuri riviväli vie ensinnäkin tarpeettomasti tilaa, ja tekee tekstistä myös vaikealukuisempaa, monesti niin, ettei kävijä edes ymmärrä miksi. 

3. Väärä otsikkohierarkia ja mittasuhteet 

Samalla sivulla saatetaan käyttää useita H1-otsikoita tai hypätä H2-otsikosta suoraan H4-tasolle. Kävijä ei tätä välttämättä huomaa, mutta hakukoneiden näkökulmasta rakenne muuttuu epäloogiseksi. Sama koskee saavutettavuutta, sillä myös ruudunlukuohjelmat käyttävät otsikkorakennetta sivun sisällön hahmottamiseen. 

Myös otsikoiden mittasuhteissa tehdään paljon virheitä. Jos jokainen otsikko on lähes yhtä suuri kuin etusivun pääotsikko, koko sivu alkaa näyttää siltä, että jokainen kohta yrittää huutaa huomiota itselleen. Toisaalta liian pienet otsikot hukkuvat helposti muun tekstin joukkoon, eikä sivun rakennetta enää hahmota yhdellä vilkaisulla.  

Suositellut tekstikoot verkkosivuilla 

Alla olevat koot toimivat hyvänä lähtökohtana useimmille yritysten verkkosivuille. Lopulta myös sivuston ilme, brändi ja muut päätökset vaikuttavat sopiviin kokoihin. 

• H1 (pääotsikko): 40–60 px (2.5–3.75 rem) 

• H2 (väliotsikko): 28–40 px (1.75–2.5 rem) 

• H3 (alaotsikko): 22–30 px (1.375–1.875 rem) 

• Leipäteksti: 16–18 px (1–1.125 rem) 

• Leipätekstin riviväli: noin 1.5–1.8 

• Otsikoiden riviväli: noin 1.1–1.3 

Hyvä typografia tekee sisällöstä helpommin luettavaa 

Hyvä typografia ei yleensä kerää huomiota itselleen. Se tekee juuri sen, mitä sen kuuluukin tehdä – auttaa sisältöä. Kun pääotsikot erottuvat selkeästi, väliotsikot jäsentävät tekstiä ja leipätekstiä on miellyttävä lukea, kävijä löytää etsimänsä tiedon nopeammin eikä lukeminen tunnu raskaalta. 

Hyvä fonttikoko, sopiva riviväli ja looginen otsikkorakenne eivät tee verkkosivuista näyttävämpiä. Ne tekevät niistä helpompia käyttää. Sivusto näyttää heti ammattimaisemmalta ja hakukoneet, sekä tekoäly ymmärtävät paremmin mistä sivuilla on kyse.