Saavutettavaa typografiaa – Osa 2

Kirjoittaja: Timo Laak


1. Johdanto

Saavutettavaa typografiaa -artikkelisarjan ensimmäisessä osassa käytiin läpi printti- ja webbipuolen keskeisimmät erot, erilaiset fonttityypit ja tutkailtiin typografiaa saavutettavuusnäkökulmasta.

Toisessa osassa sukelletaan syvemmälle typografisen valtameren aaltoihin. Käyttääkö suurta fonttia vai pientä fonttia? Miten fontteja voi tehostaa tai miten niiden näkyvyyttä ja luettavuutta voi parantaa?

2. Iso fontti, pieni fontti

Fonttikoko selaimissa on mahdollista määritellä eri yksiköillä. Kokomääritelmät jakautuvat absoluuttisiin eli kiinteisiin ja relatiivisiin eli suhteellisiin. Kiinteä fonttikoko näyttäytyy nimensä mukaisesti aina tietynkokoisena. Suhteellinen fonttikoko taas määrittyy ympäristönsä mukaan.

Fonttikoko voidaan määritellä yksinkertaisimmin kiinteänä käyttämällä valmiita arvoja, joita ovat xx-small, x-small, small, medium, large, x-large ja xx-large. Vastaavat suhteelliset arvot ovat larger ja smaller. Suhteellisuus tarkoittaa sitä, että fontin koko määritellään suhteessa selaimen oletuskokoon tai periytymisen kautta saatuun kokoon. Useimpien selainten oletusfonttikoko on 16 pikseliä. Tällöin larger-arvon saava fontti on selaimesta riippuen 1,2 kertaa suurempi ollen näin 19,2 pikseliä. Vastaavankokoisen fontin tuottaa myös arvo font-size: 120%.[1]

Ongelmia

Fonttikoon määrittäminen ei kuitenkaan ole näin yksinkertaista. Periytyminen (inheritance) aiheuttaa ongelmia, sillä eri selaimet käsittelevät sisäkkäisiä elementtejä eri tavoin. Eri selaimissa myös oletusfontti saattaa olla eri kokoinen. Internet Explorerin 5-versiossa oletusfonttikoko on suurempi kuin 6-versiossa. Yhteensopivuustilassa (quirks mode) IE6:n näyttämä oletusfonttikoko on normaalia suurempi. IE6 asettuu yhteensopivuustilaan, mikäli ennen dokumenttityypin määrittelyä on esimerkiksi kommentteja tai jos dokumenttityyppi puuttuu kokonaan.

Mittayksiköt

Fonttikoko voidaan määritellä myös kiinteiden mittayksiköiden avulla. Kiinteitä mittayksiköitä ovat pt (piste), pc (pica), in (tuuma), cm (senttimetri) ja mm (millimetri). Kiinteistä yksiköistä on hyötyä vain, jos näyttölaitteen fyysiset ominaisuudet ovat tiedossa. Sen vuoksi niitä ei kannata käyttää ruudulta luettavan tekstin määrittelyissä.

Pikseli on osaltaan kiinteä, mutta myös suhteellinen kokoyksikkö. 12 pikselin fontti on aina 12 pikselin fontti, mutta pikselin koko määrittyy käytetyn näyttölaitteen ominaisuuksien mukaan. 1600×1200 pikselin resoluutiossa 17 tuuman näytöllä yksi pikseli on pienempi kuin 800×600 pikselin resoluutiossa vastaavan kokoisella näytöllä.

Internet Explorerin tekstinsuurennos ei vaikuta pikseleinä määritettyihin fontteihin, jolloin käyttäjä ei halutessaan voi helposti suurentaa tekstiä. Tästä syystä pikseliä ei suositella käytettäväksi fonttikokoa määriteltäessä.

Suhteellisia kokomääritelmiä ovat em, ex ja %. Em on saanut nimensä M-kirjaimesta – 1 em on keskimääräisen suuren M-kirjaimen korkeus eli versaaliaakkosten H-korkeus. Tavallisesti tämä koko on selaimessa 16 pikseliä. Vastaavasti ex on gemena-aakkosten x-korkeus. Versaalilla tarkoitetaan suuria kirjaimia ja gemenalla pieniä kirjaimia.[2]

Monet eri selaimet näyttävät samankokoisiksi määritellyt fontit hieman eri kokoisina. Typografin on oltava tietoinen näistä eroista ja tarvittaessa muokattava oma tyylisivunsa eri selaimille. On myös huolehdittava siitä, että fontit ovat tarpeeksi suuria, jotta ne säilyisivät helppolukuisina.

Luettavuus

Monet keski-ikäiset eivät pysty lukemaan painettua tekstiä tai 10-12 pikselin ruutufonttia ilman silmälaseja. Käyttäjä voi toki suurentaa fonttia, jos hän tietää kuinka se tehdään, mutta fontin suurentaminen saattaa rikkoa sivuston näkyvän rakenteen. Vastaavasti liian suuri fonttikoko voi myös olla ongelmallinen. Fontti saattaa tavallaan â??hyökätä silmilleâ? ja käyttäjä joutuu perääntymään näytöltä kauemmaksi tai pienentämään fonttia selaimesta voidakseen lukea tekstiä paremmin. Myös fontin pienennys rikkoo helposti sivuston rakenteen.

On viisasta varautua ulkoasun suunnittelussa siihen, että käyttäjä saattaa muuttaa fonttikokoa, jolloin ulkoasun ja visuaalisen ilmeen on pystyttävä joustamaan ja mukautumaan. Visuaalisen ilmeen suunnitteleminen skaalautuvaksi ja elastiseksi helpottaa sen mukautumista erilaisille päätelaitteille ja asetuksille.

3. Tehostekeinot

Tekstin ulkoasuun voidaan vaikuttaa paitsi erikokoisilla ja erilaisilla fonteilla, myös erilaisilla tyyleillä. CSS antaa melko hyvät mahdollisuudet vaikuttaa tekstin ulkoasuun.

Rivit ja välistykset

Rivikorkeus helpottaa lukemista erityisesti silloin, kun tekstirivit ovat pitkiä. Line-height määrittää tekstirivien etäisyyden toisistaan. Letter-spacing määrittää yksittäisen merkin jälkeen tulevan tyhjän tilan ennen seuraavaa merkkiä. Word-spacing puolestaan määrittää vastaavasti yksittäisen sanan jälkeen tulevan tyhjän tilan leveyden. Kerning-tukea ei nykyisissä selaimissa vielä ole, mutta CSS3-tuen myötä sellainen on tulossa. Kerningin avulla voidaan vaikuttaa tiettyjen merkkien välien leveyteen. Esimerkiksi W- ja T -kirjaimia täytyy usein käytettävästä fontista riippuen siirtää lähemmäksi seuraavaa merkkiä, jotta kirjainten väli ei muodostuisi liian avaraksi.

Whitespacella eli tyhjällä tilalla tai välistyksellä voidaan mm. erottaa tietyt sanat helposti muun tekstin seasta tai esittää nimikirjaimet selkeämmin. CSS:n letter-spacingin ja word-spacingin ohella on tarjolla myös white-space -määre, jonka avulla on mahdollista määrittää, kuinka elementin sisäisiä välilyöntejä käsitellään. Unicode-merkistössä on omat symbolinsa eri kokoisille välistyksille, jolloin mahdollisuudet tekstin muokkaamiseen laajentuvat. On kuitenkin mahdollista, että selain, joka tällaista merkistöä ei tue, näyttää tyhjää tilaa kuvastavien merkkien tilalla merkkipaikkaa osoittavan neliösymbolin.[3]

Sisennykset

Text-indent sisentää kappaleen ensimmäisen tekstirivin. Tätä tapaa käytetään tavallisesti painetussa tekstissä korostamaan kappalevaihtoja ja helpottamaan seuraavan kappaleen löytämistä. Myös tyhjä rivi kappaleiden välissä auttaa havaitsemaan kappaleenvaihdon, mutta sisennyksellä saadaan tekstiin pientä rosoisuutta, joka auttaa kiinnittämään katseen juuri kappaleen alkuun. Mikäli tilaa tekstille on niukalti, voi pelkkä sisennyskin olla täysin riittävä kappale-erotin.

Tekstin tasaus

Text-align eli tekstin tasaus mahdollistaa tekstin tasaamiseen oikealle, vasemmalle tai molempiin laitoihin sekä keskittämisen. Vasemmalta oikealle luettavan tekstin suositeltavin tasaus on vasen laita. Keskitystä käytetään usein mm. otsikoissa tai listoissa, mutta keskitystä tulisi välttää, sillä keskitetyn tekstin lukeminen on hankalaa. Siististi tasattu teksti on paitsi helppolukuisempi, myös esteettisempi ja visuaalisesti miellyttävämpi.

Molempien laitojen tasaus on hyvin ongelmallinen erityisesti kapeilla palstoilla tai mikäli teksti sisältää hyvin pitkiä sanoja. Ilman tavutusta sanojen välistykset muodostuvat hyvin pitkiksi, jolloin silmä karkaa helposti luettaessa seuraamaan tekstistä löytyviä aukkoja. Tavutettuna ja oikein toimiessaan molempien laitojen tasaus muodostaa liian kiinteän tekstikappaleen, jonka lukeminen saattaa olla monille hyvin hankalaa. Katse eksyy helposti väärälle riville ja viimeksi luetun kohdan uudelleenlöytäminen on vaikeaa.

Tavutus

Tavutuksen apuna voidaan käyttää ns. pehmeitä tavumerkkejä (soft hyphen), jotka niitä tukevissa selaimissa kirjoittavat tavuviivan ja jakavat sanan kahdelle riville, mikäli sana sijoittuu rivin loppuun, eikä mahdu kokonaisuudessaan yhdelle riville. Monet selaimet eivät tue tämänkaltaista tavutusta, jolloin tavutus ei joko toimi lainkaan tai pahimmassa tapauksessa kaikki tavumerkit näytetään. Lisäksi tavutuksen laatiminen pitkään tekstiin on hyvin työlästä ja hankaloittaa tekstin myöhemmin tapahtuvaa muokkausta. Tulevaisuudessa on mahdollista, että tuki tavutukselle löytyy selaimista itsestään, mutta kattavaa tukea maailman monille eri kielille saataneen odottaa vielä pitkään.[4], [5]

Kontrasti ja värit

Tekstin kontrasti ja väri vaikuttavat luettavuuteen paljolti. Liian vähäinen kontrasti heikentää luettavuutta ja liian voimakas häikäisee silmiä ja aiheuttaa ns. jälkikuvailmiön, jollainen syntyy, kun katsomme pitkään kirkasta valonlähdettä ja siirrämme sitten katseemme toiseen paikkaan. Sopiva kontrasti helpottaa lukemista eikä rasita silmiä.

Oikeilla värivalinnoilla voidaan vaikuttaa visuaaliseen ilmeeseen positiivisesti. Keskenään harmoniset värit tukevat ulkoasua ja miellyttävät silmää. Hyvin räikeät värit puolestaan suorastaan kirkuvat ja vaikeuttavat lukemista. Värivalinnoissa on huomioitava eri värisokeuden ilmenemismuodot ja vältettävä voimakkaita vastavärejä (esim. punainen-vihreä, punainen-sininen) tai liian räikeitä ja pahimmillaan jopa epileptisiä kohtauksia aiheuttavia väriyhdistelmiä (punainen-keltainen). Esimerkiksi tuotemerkeissä ja logoissa tällaiset väriyhdistelmät voivat toimia hyvinkin, mutta tekstimuotoisen informaation esittämisessä niitä kannattaa välttää.

Muut tehosteet

Text-transformin avulla voidaan muuttaa tekstin esitysmuodoksi versaali, eli suuraakkoset tai gemena, eli pienaakkoset tai määrittää jokaisen sanan alkukirjain versaaliksi. Jälkimmäistä käytetään erityisesti englanninkielisissä otsikoissa. Kun rakenne erotetaan ulkoasusta, voidaan versaali teksti muuttaa myöhemmin helposti gemenaksi ja päinvastoin CSS-tyylien avulla. Suuraakkosia käytetään tyypillisesti otsikoissa ja niillä voidaan korostaa esimerkiksi lyhenteitä.

Text-decoration mahdollistaa tekstin alleviivauksen, yliviivauksen tai päälleviivauksen sekä myös vilkkumisen. Alleviivattu teksti tulkitaan tavallisesti linkiksi, joten alleviivauksen käyttöä korostuskeinona kannattaa välttää. Font-weight määrittää kirjasimen paksuuden. Lihavointi on tavallisimpia tehostekeinoja. Font-stylen avulla fontista saadaan kursiivia (italic) tai vinoa (oblique). Font-variant muuttaa tekstin kapiteeliksi, eli versaalitekstiksi, jossa alkukirjainta lukuunottamatta versaaliaakkoset ovat gemena-aakkosten kokoisia. Text-shadow lisää tekstille varjostuksen, jolla voidaan helposti parantaa tekstin erottuvuutta etenkin otsikoissa. Tämä ominaisuus toimii tällä hetkellä vain Mac OS X:n Safarissa.

On myös muistettava, että liiallinen tehosteiden käyttö heikentää niiden vaikutusta. Jos leipätekstissä joka toinen sana on lihavoitu, lihavointi ei enää vastaa tarkoitustaan, eikä lihavoitu sisältö enää erotu muun tekstin joukosta kuten alunperin oli tarkoitus.

4. Yhteenveto

Valitse fontti käyttötarkoituksen mukaan. Comic Sans MS on tarkoitettu etupäässä hauskoihin ja epävirallisiin dokumentteihin, kuten lasten syntymäpäiväkutsuihin. Impact puolestaan on toimiva otsikoissa, muttei leipätekstissä.

Varmista, että fonttisi on tarpeeksi suuri, muttei liian suuri, jotta luettavuus säilyisi hyvänä. Varmista, että olet määritellyt fonteille vaihtoehdot ja geneerisen tyyliperheen siltä varalta, että lukijan järjestelmästä ei kaikkia fontteja löydy. Suosi suhteellisia fonttikokoja. Vältä kiinteitä kokoja, ellet tiedä lukijasi päätelaitteiden ominaisuuksia.

Varmista, että tekstin kontrasti on sopiva, eikä tarpeettomia tehostekeinoja ole käytetty. Suunnittele tehosteet ja korostukset huolella ja käytä niitä vain luettavuuden parantamiseksi ja visuaalisen ilmeen selkiyttämiseksi. Vältä tekstin korvaamista kuvalla, mutta jos muita vaihtoehtoja ei ole, älä unohda alt-tekstiä tai vaihtoehtoisen sisällön tarjoamista.

Kokeile, miltä tekstisi näyttää eri selaimissa ja käyttöjärjestelmissä pehmennyksen kera ja ilman. Kokeile myös suurentaa ja pienentää tekstiä.

Webbitypografian ja tekstimuotoisen informaation ei tarvitse olla tylsää ja tavallista. Näillä yksinkertaisilla tehostekeinolla ja saavutettavuus- ja luettavuusnäkökulman huomioinnilla voidaan saada ihmeitä aikaan. Muista, että tehosteet ovat kuin mausteita. Sopivasti käytettynä ne tuovat sivustosi sisällön hyvin esille, korostavat visuaalista ilmettä, parantavat luettavuutta ja miellyttävät näköhermoja. Liiallisesti ja huolimattomasti käytettynä ne polttavat silmiä, karkottavat potentiaaliset asiakkaat ja antavat paitsi itse sivustosta, myös sen takana olevasta tahosta ei-toivotun kuvan.

Lähteet ja viitteet

1: Cascading Style Sheets – Level 2 CSS2 Specification – Fonts
2: Anatomy of a Character
3: General Punctuation – Test for Unicode support in Web browsers
4: Tavutusvihje-esimerkki
5: Soft hyphen (SHY) – a hard problem?

Jim Byrne on koonnut tiiviin tietopaketin Accessible Web Typography – an introduction for web designers. HTML-versio on ilmainen.

4 comments:

  1. CSS em-yksikkö taitaa käytännössä toimia täysin samoin kuin %-yksikkö, eikä näin ollen 1em vastaa 16 pikseliä, vaan suoraan käyttäjän selaimessa asettamaa fonttikokoa. Ja aivan kuten prosentteina määriteltyjen kokojen kanssa, em-määritelty fonttikoko muuttuu CSS-perinnän mukaan: jos oletuskoko on 16px, font-size: 80% blokin sisällä 1em vastaa noin 13px fonttia.

  2. Jos fontin kooksi on asetettu 12 pikseliä, on yksi em silloin 12X12 pikseliä. Em ei suinkaan ole yhtä korkea kuin esimerkiksi kirjain H tai M ei mikään muukaan aakkonen, vaan se on kaikissa fonteissa korkeakampi.

    Tämä johtuu siitä, että H tai M tai mikään muukaan aakkonen ei ylety typografisessa viivastossa yläviivalta alaviivalle, ja vielä lisäksi näiden viivojen molemmille puolille jätetään vähän tyhjää tilaa.

    Em on siis käytetyn fontin neliön koko.

    Havainnollistuksia asiasta: http://24ways.org/advent/an-explanation-of-ems

  3. 1 em on kyllä 16 pikseliä yleisimmissä selaimissa, mikäli fonttikokoa ei ole muutettu. Harrille kiitos tarkennuksesta. Tässä em ja ex eroavat toisistaan.

  4. Kuten sanoit jo itse kirjoituksessa, 16 pikseliä on yleisin oletusasetus, jolloin 1em vastaa 16 pikseliä elementin sisällä.

    Viilaan kuitenkin vielä semanttista pilkkua (tai emmää) sanomalla, että mielestäni on virheellistä sanoa 1em olevan 16 pikseliä, koska käytännössä 1em on 100% koko suhteessa ympäröivän html-elementin fonttikokoon.

    Jos selaimen oletus on 16 px, bodyn CSS:ssä koko on määritelty 12 pikseliksi, sen sisällä on h1-elementti jonka fonttikooksi on määritelty 180% ja sen sisällä span jonka fonttikooksi on määritelty 1em, tällöin 1em vastaa noin 22 pikseliä.

    CSS:n periytyminen siis vaikuttaa siihen, mitä pikselikokoa 1em missäkin dokumentin osassa vastaa, jolloin 1em=16px on melko roima yleistys. 🙂

Kommentointi on suljettu.