Jukka Tujulan sivusto / Tietokonerävellys: Fonttikoot WWW-sivuilla

Fonttikoot WWW-sivuilla

Mitkä tekijät niihin vaikuttavat?

Sivuston tekijä ei voi tietää minkä kokoista fonttia lukija haluaa lukea, eikä myöskään sitä minkä kokoisena hänen valitsemansa fonttikoko lukijan näytöllä näkyy. Niinpä leipätekstin fonttikokoa ei pidä mennä muuttamaan, vaan on järkevää antaa ihmisten lukea sivujen teksti sen kokoisena kuin he itse haluavat.

Sisältö:

HTML ja fonttikoko

HTML ei ole tarkoitettu WWW-sivujen ulkoasun, vaan rakenteen kuvaamiseen.

HTML:ssä fonttikoko voidaan määritellä FONT-tagilla seitsenportaisella asteikolla, johon voidaan viitata luvuilla 1 - 7, tai plus- ja miinusmerkkien avulla, jolloin esimerkiksi koko -1 on sama kuin koko n, jossa n on perusfonttikoko miinus yksi. BASEFONT-tagilla voidaan määritellä fontin peruskoko edellä mainitulta asteikolta.

Viimeisimmässä HTML 4.01 määritelmässä FONT- ja BASEFONT-tagien käyttö on "deprecated", eli niitä kehotetaan välttämään. Niiden asemasta voidaan käyttää BIG- ja SMALL-tageja, vaikkakin CSS:n käyttö on suositeltavin ratkaisu. Warren Steelin artikkeli What's Wrong With FONT kertoo FONT-tagin haitallisuudesta.

HTML:ssä voidaan korostaa tärkeitä kohtia esimerkiksi STRONG-tagilla, joten tekstin suurentamiseen ei ole useinkaan tarvetta, sillä otsikothan tehdään otsikkoelementillä, eikä fonttikoko määrityksillä. Vähemmän tärkeälle tekstille ei ole omaa loogista merkintää, vaan tämä tehdään usein pienentämällä fonttikokoa. Yhden pykälän pienentäminen ei yleensä tee tekstistä lukukelvotonta. Usein näkee kuitenkin käytettävän fonttikokoa -2, joka tuntuu olevan peelojen web designerien mielikoko leipätekstille. Tällaisesta voimakkaasti pienennettyä tekstiä on usein mahdotonta lukea, jos ei katso sivua pöytämallisen tietokoneen näytöltä, vaan esimerkiksi WebTV:stä.

CSS ja fonttikoko

CSS tarjoaa useita tapoja vaikuttaa fonttikokoon, mutta ne kaikki ovat onneksi ohitettavissa.

Tyylisäännöstöt eli CSS tarjoavat useita tapoja ehdottaa fonttikokoja. On kuitenkin huomattava, että täsmällisiä vastineita HTML fonttikokoihin ei CSS:stä löydy. Liitettäessä tyylejä esimerkiksi kappaleisiin on tärkeää käyttää lopputagia </P>, sillä eräissä selaimissa fontit saattavat ilman lopputagia peräkkäisissä kappaleissa pienentyä tai suurentua paljon enemmän kuin oli tarkoitus.

Seuraavassa on absoluuttisten, suhteellisten ja prosentuaalisten fonttikoko määritysten joukkoon lisätty normaalia tekstiä. Voidaan havaita, että normaali teksti ei ole aina sen kokoista CSS:llä muotoiltuun verrattuna, kuin voisi olettaa. Eri selainten ja myös selainversioiden CSS-tuki on erilainen tässä suhteessa.

Absoluuttinen koko

  • xx-small
  • x-small
  • small
  • normaalia tekstiä!
  • medium
  • large
  • x-large
  • xx-large

Suhteellinen koko

  • font-size: smaller
  • normaalia tekstiä!
  • font-size: larger

Koko prosentteina

  • font-size: 80%
  • normaalia tekstiä!
  • font-size: 100%
  • font-size: 120%

Koko eri yksikköinä

Edellisten tapojen lisäksi voidaan fonttikoko määritellä myös seuraavilla yksiköillä:

Suhteellinen koko

  • em (elementin fontin korkeus)
  • ex (x-kirjaimen korkeus)
  • px (pikseli)

Absoluuttinen koko

  • in (tuuma 1in=2.54cm)
  • cm (senttimetri)
  • mm (millimetri)
  • pt (piste 1pt=1/72in)
  • pc (pica 1pc=12pt)

Vähemmän tärkeälle tekstille sopivaa kokoa CSS:llä ehdotettaessa on syytä käyttää leipätekstiin suhteutettuja tapoja kuten prosentti tai em ilmaisemaan fonttikokoa. Sopiva koko on suuruusluokkaa 0.9em tai 80%. Jos teksti ei ole varsinaisesti tarkoitettu luettavaksi, kuten tekijänoikeudelliset huomautukset, niin kokoja aina 70%:iin saakka voidaan käyttää. Jos tuollainen voimakkaasti pienennetty fontti on helposti luettavissa on selain säädetty virheellisesti.

Selaimet ja fonttikoko

Selainten asetuksista löytyy useimmille sopiva fonttikoko.

Yleisimmissä selaimissa voi valita omalle näkökyvylle sopivan fonttikoon helposti. Myös käyttäjän tyylisäännöstön käyttö fonttikoon määrittelemiseen voi olla mahdollista, kuten myös sivuilla määritettyjen fonttikokojen ohittaminen, koko sivun zoomaaminen tai CSS-tuen kytkeminen pois päältä. Sivujen tekijöiden olisi otettava nämä mahdollisuudet huomioon ja testattava sivujen toimivuutta eri fonttikokoja käyttäen.

HTML-fonttikokojen testialue

Alla olevalla testialueella on määritelty HTML:ää käyttäen fonttikokoja. Internet Explorer ja Opera näyttävät testialueen vierekkäiset fonttikoot saman kokoisina. Gecko pohjaiset selaimet (Mozilla ja Netscape alkaen versiosta 6) eivät tue perusfonttikoon määrittämistä BASEFONT-tagilla. Muuttamalla selainten fonttikoko asetuksia voidaan havaita, että kaikki fonttikoot suurenevat ja pienenevät selainten asetusten mukaisesti.

Internet Explorerin "Ohita websivuilla määritetyt fonttikoot" ohittaa FONT-tagilla määritetyt fonttikoot, mutta ei vaikuta BIG-, SMALL- ja BASEFONT-tageilla määritettyihin kokoihin.

  • Fonttikoko -2
  • Fonttikoko -1
  • Fonttikoko normaali
  • Fonttikoko +1
  • Small
  • Big
  • Fonttikoko 1
  • Fonttikoko 2
  • Fonttikoko 3 eli normaali
  • Fonttikoko 4
  • Basefont 1 Fonttikoko +1
  • Basefont 5 Fonttikoko -1

CSS-fonttikokojen testialue

Alla olevalla testialueella on määritelty CSS:ää käyttäen useilla eri tavoilla fonttikoko pieneksi. Muuttamalla IE:ssä asteikolla pienin - suurin tai Operassa pikseleinä määriteltyä fonttikokoa voidaan havaita osan tavoista olevan sellaisia, että fonttikoko asetukset eivät niihin vaikuta. Tällaisia tapoja määritellä fonttikoko ei pitäisi WWW-sivuilla käyttää. Kiinteät fonttikoot voivat kuitenkin olla hyödyllisiä käyttäjän omassa tyylisäännöstössä.

Internet Explorerin "Ohita websivuilla määritetyt fonttikoot" ohittaa kaikki alla olevat tavat vaikuttaa fonttikokoon. Tämän valinnan ollessa ruksattuna valinnat IE:n pienin - suurin asteikolla vaikuttavat kaikkiin alla oleviin fonttikokoihin. Operan "Minimi fonttikoko" määrityksellä sekä sivun zoomauksella voidaan vaikuttaa kaikkiin fonttikokoihin. Netscape 7:n prosentuaalisella asteikolla tehtävä fonttikoon säätäminen vaikuttaa kaikkiin alla oleviin fonttikokoihin. Mozilla Firefoxin "Increase/Decrease Text Size" vaikuttaa kaikkiin fonttikokoihin. Internet Explorer poikkeaa muista mainituista selaimista siten, että se tarjoaa ensisijaiseksi tavaksi vaikuttaa fonttikokoon vähemmän tehokasta tapaa ja sen tehokkaampi tapa on selvästi kömpelömpi (kaikki sivun CSS-fonttikoot näkyvät saman kokoisina) kuin muissa selaimissa. Tämä on aiheuttanut yleisen väärinkäsityksen, että on olemassa sellaisia tapoja määrittää fonttikoko joihin IE:n asetuksista ei voi vaikuttaa.

IE6, Op7, NN7 ja Firefox: Fonttikoon kaikenlainen määrittäminen vaikuttaa näihin

  • font-size: x-small
  • font-size: smaller
  • font-size: 80%
  • font-size: 0.9em
  • font-size: 1.7ex

IE6: Asteikko pienin - suurin vaikuttaa näihin, kun fonttikokojen ohittaminen on valittuna. Op7, NN7 ja Firefox: Ensisijainen/ainoa säätötapa vaikuttaa myös näihin

  • font-size: 11px
  • font-size: 0.1in
  • font-size: 0.25cm
  • font-size: 2.5mm
  • font-size: 8pt
  • font-size: 0.6pc

Käyttöjärjestelmä ja fonttikoko

Fonttikokoa voidaan yleensä säätää myös käyttöjärjestelmän asetuksista.

Käyttöjärjestelmän fonttikoon säätömahdollisuudet voivat olla hyvinkin suuret. Esimerkiksi WindowsXP:ssä fonttikokoa voidaan vaihdella välillä 20% - 500%. Muutettaessa Windowsin fonttikokoa Internet Explorerin näyttämät fonttikoot muuttuvat vastaavasti. Operassa fonttikoko muuttuu vain siinä tapauksessa, että selaimen asetuksista ei ole määritelty fonttikokoa. On huomattava, että fonttikoko muuttuu käyttöjärjestelmän asetusten mukaisesti myös silloin, kun se on määritelty absoluuttisina yksikköinä.

Windowsin fonttikoon muuttaminen ei vaikuta sivujen fonttikokoon edellä mainituissa selaimissa silloin, kun koko on määritelty CSS:llä pikseleinä. Tästä johtuen pikseleinä tehty fonttikoon "kiinni hitsaaminen" onkin erityisen tehokas keino tehdä fontti lukukelvottomaksi niille lukijoille, jotka eivät ole perehtyneet selaimensa tarjoamiin mahdollisuuksiin ohittaa CSS:llä määritetyt fonttikoot.

Näyttö ja fonttikoko

Näytön resoluutio ja fyysinen koko vaikuttavat usein siihen minkä kokoisina fontit näkyvät.

Resoluutiolla tarkoitetaan näytön kokoa pikseleinä, esimerkiksi 800 x 600 tai 1024 x 768. Jos järjestelmän asetuksista suurennetaan näytön resoluutiota, niin pikselikoko pienenee, ja pikseleinä määritetyt fontit näkyvät vastaavasti pienempinä.

Myös näytön fyysisellä koolla (esimerkiksi 15" tai 21") on vaikutuksensa siihen, minkä kokoisina fontit näkyvät. Jos käytetään samaa resoluutiota, niin suurempaa näyttöä käytettäessä pikselikoko on suurempi. Pikseleiden kasvaessa myös pikseleinä määritetyt fontit näkyvät vastaavasti suurempina.

Vaikka fonttien kokoa ei olisi määritetty pikseleinä vaan yksiköllä jonka koko on muuttumaton, kuten esimerkiksi senttimetri tai tuuma, ei kuitenkaan ole mitään takeita siitä minkä kokoisina fontit eri näytöillä näkyvät ja vaikuttaako resoluution muuttaminen fonttikokoon. Oman koneen osalta tätä voi testata mittaamalla alla olevaa l-kirjainta eri resoluutioilla.

Tällaiselta näyttää l-kirjain font-size: 3cm: l

On siis mahdotonta tietää minkä kokoisina fontit lukijan näytöllä näkyvät, vaikka usein kuulee väitettävän että on olemassa "normaalit asetukset, joita 90% sivuilla kävijöistä käyttää, ja joilla fontit näkyvät saman kokoisina". Tämä voi pitää paikkansa jonkun yrityksen sisäisessä verkossa, mutta WWW-sivuja tarkastellaan erilaisilla laitteilla, ohjelmilla ja asetuksilla, joista on turha yrittää etsiä mitään normaalia yhdistelmää.


Kirjoitettu 30.4.2000
Päivitetty 14.2.2004
Kiitokset Jukka Korpelalle artikkelin kommentoinnista ryhmässä sfnet.viestinta.www.
Jukka Tujula, jukka.tujula@mbnet.fi