Opas 14 · Saavutettavuus
Mikä on sopiva fonttikoko verkkosivulla?
Yhtä pakollista pikselikokoa ei ole. Sopiva koko riippuu fontin mittasuhteista, laitteesta, lukuetäisyydestä ja sisällöstä, mutta tavallinen leipäteksti tarvitsee käytännössä vahvan lähtökoon.
Päivitetty 2.9.2026 · 7 min lukuaika
Lyhyt vastaus
Aloita tavallisessa verkkoleipätekstissä usein noin 16–18 CSS-pikselistä, mutta arvioi fontin todellinen havaittu koko. Käytä suhteellisia yksiköitä, riittävää riviväliä ja varmista toimivuus 200 prosentin suurennuksella.
01
16 pikseliä on lähtökohta, ei sääntö
Kaksi fonttia näyttää samalla CSS-koolla erikokoiselta x-korkeuden, leveyden ja viivan paksuuden vuoksi. Siksi koko testataan valitulla fontilla oikeassa käyttöliittymässä.
Pitkä leipäteksti hyötyy usein 16–20 pikselin alueesta, mutta painikkeet, kuvatekstit ja datataulukot tarvitsevat oman arvionsa. Pienennä vain toissijaista tietoa, älä olennaista sisältöä.
- Testaa todellinen fontti 320–390 pikselin mobiilileveydellä.
- Suurenna sivu 200 prosenttiin.
- Varmista, ettei teksti leikkaannu tai vaadi vaakavieritystä.
- Tarkista kontrasti myös ohuilla ja pienillä leikkauksilla.
02
Koko toimii yhdessä rivin kanssa
Fonttikoko, riviväli ja rivin pituus muodostavat kokonaisuuden. Suurempi fontti tarvitsee yleensä enemmän riviväliä ja kapea mobiilipalsta lyhyemmän lukurytmin.
Älä pakota käyttäjän välistysasetuksia pois. Sisällön pitää säilyä näkyvänä, kun kirjain-, sana-, rivi- ja kappalevälejä kasvatetaan WCAG:n testiarvoihin.
03
Käytä rem-yksikköä ja hallittua skaalaa
rem-yksikkö suhteuttaa koon juurielementtiin ja tukee selaimen sekä käyttäjän asetuksia. Otsikoissa CSS:n clamp voi tehdä hallitun responsiivisen skaalan, kun minimi ja maksimi pidetään luettavina.
Älä estä selaimen zoomausta. Testaa myös käyttöjärjestelmän suurella tekstillä ja varmista, että navigaatio sekä lomakkeet mukautuvat.
Lähteet