Saavutettavaa typografiaa – Osa 1

Tässä kaksiosaisessa artikkelisarjassa perehdytään typografian ihmeelliseen maailmaan. Se, mikä näyttää paperilla hyvältä, ei välttämättä toimikaan internet-sivulla aivan yhtä hyvin. Web-suunnittelu kaikkine kommervenkkeineen on hyvin haastavaa. Erilaisia huomioitavia asioita kun on kasapäin, eikä typografia ole suinkaan sieltä merkityksettömimmästä päästä.

Millaista fonttia tulisi käyttää? Miten määritellään fonttikoko ja millaisia tehostekeinoja on käytettävissä? Typografisessa valtameressä muhii melkoinen keitos, jonka yhtenä ainesosana on myös saavutettavuus. Ei ole lainkaan yhdentekevää millaisia fontteja ja tehostekeinoja käytetään.

Ensimmäisessä osassa keskitytään webbi- ja printtitypografian keskeisiin eroihin, pohditaan saavutettavuusnäkökulmaa sekä esitellään tavallisimmat fonttityypit ja niiden käyttötarkoitukset.

typo|grafia s. 1 kirjapainotaito 2 kirjan tms. painoasu 3 kirjasinlajin, -koon, merkki- ja rivivälistyksen yms. valinta ja sen lopputulos (Uusi suomalainen sivistyssanakirja)

1. Johdanto

Termi typografia on peräisin kreikan kielen sanoista typos (muodostaa) ja graphein (kirjoittaa). Typografia on satoja vuosia vanha tekniikka ja taiteenlaji, jossa kirjasintyylien, pistekokojen, rivikorkeuksien ja -pituuksien sekä välistyksien ja värien avulla luodaan fyysisessä tai digitaalisessa muodossa olevaa kirjallista materiaalia. Typografian tarkoitus on kuvata tekstuaalisessa muodossa olevaa informaatiota helppolukuisella ja visuaalisesti esteettisellä tavalla.[1]

Johann Gutenbergin kirjapainosta ja luostarimunkkien Raamatuista on kuljettu pitkä matka nykypäivän digitaaliseen typografiaan. Digitaalinen media paitsi antaa typografialle uusia ulottuvuuksia, myös rajoittaa tyylien ja kirjasinten käyttöä. Web-suunnittelijalta vaaditaankin aivan toisenlaista typografian tuntemusta kuin hänen printtikollegaltaan.

2. Digitaalinen typografia

Painotyön resoluutio eli pistekoko tuumaa kohden (dpi – dots per inch) on jopa 2400 dpi kun taas sähköisen näyttölaitteen resoluutio on tyypillisesti vain 96 dpi.[2]

Painettu fontti on ja pysyy sellaisena kuin se painovaiheessa oli. Painettu fontti näyttää aina samalta, eikä sitä voi muuttaa. Digitaalinen fontti sen sijaan on erilainen eri näyttölaitteilla ja -asetuksilla. Digitaalisen fontin näkyminen lukijalle internet-selaimessa riippuu siitä, onko kyseistä fonttia saatavilla lukijan käyttämässä käyttöjärjestelmässä tai ohjelmistossa.

Digitaaliseen mediaan erikoistuneen typografin on tunnettava erilaiset selainohjelmat, käyttöjärjestelmät ja niiden rajoitteet. Hänen on myös tiedettävä, mitkä fontit ovat turvallisia käyttää ja miltä ne näyttävät eri päätelaitteilla. Kaiken tämän jälkeenkään typografi ei voi tietää, mitä fontteja käyttäjällä järjestelmässään on. Käyttäjä on saattanut poistaa osan turvallisista oletusfonteista. Käyttäjä saattaa myös ohittaa typografin valinnat ja käyttää omaa tyylitiedostoaan tai määrittää oman mielensä mukaisen fonttikoon.

Käyttäjä ei ehkä hyödynnä käyttöjärjestelmän anti-aliasointi-, eli fonttien pehmennysominaisuuksia. Pehmennetty fontti on miellyttävän näköinen ja helppolukuinen. Pehmentämätön fontti puolestaan on karkea ja reunoiltaan rosoinen, kuten esimerkkikuvan perusteella voidaan havaita. Hyvin pienikokoiset fontit muuttuvat pehmennettyinä helposti suttuisiksi ja vaikealukuisiksi, jolloin monet järjestelmät näyttävät tietynkokoiset fontit automaattisesti pehmentämättöminä. Windows XP:ssä ei näyttöfonttien pehmennys ole oletuksena käytössä ja moni käyttäjä saattaakin olla tästä ominaisuudesta autuaan tietämätön.

Onko typografiaan panostaminen internetissä siis turhaa? Ei suinkaan, sillä typografialla voidaan vaikuttaa ratkaisevasti visuaaliseen ilmeeseen. Monet käyttäjät eivät muuta selainohjelmansa asetuksia. He eivät ehkä tiedä, että fonttikokoa voi suurentaa tai että he voivat määrittää mieleisensä oletusfontin kaikille sivuille tai ehkä he eivät vain halua tai näe tarvetta tehdä niin. Typografiaan panostamalla voidaan vähentää tarvetta muuttaa ja muokata olemassaolevia tyylejä ja parantaa sivuston yleisilmettä sekä korostaa markkinoitavaa tuotetta tai brandia.

3. Saavutettavuusnäkökulma

Digitaalisella typografialla on yksi merkittävä etu puolellaan. Heikkonäköinen ei aina näe painettua tekstiä ilman apuvälineitä (silmälasit, suurennuslaitteet). Sokea henkilö ei pysty lukemaan painettua tekstiä lainkaan muutoin kuin muuttamalla sen digitaaliseen muotoon kuvanlukijan ja tekstintunnistusohjelman avulla.

Digitaalinen teksti on jo valmiiksi digitaalisessa muodossa, jolloin näkövammaisen on mahdollista lukea se ruudunlukijan tai pistekirjoitusnäytön avulla. Digitaalinen teksti on myös helpommin muokattavissa, kopioitavissa ja siirrettävissä toiseen ympäristöön tai päätelaitteeseen. Digitaalista tekstiä voidaan suurentaa vapaasti, kirjasin voidaan vaihtaa lukijalle mieleiseksi sekä värejä ja kontrastia muuttaa. Digitaalinen typografia näin ollen poistaa merkittäviä painetun typografian rajoitteita ja lisää informaation saavutettavuutta.

Myös digitaalisessa typografiassa on omat ongelmansa, joista tärkeimpiä ovat resoluutio, saatavilla olevat fontit sekä käyttäjän näyttölaitteen fonttiasetukset. Tekstisisällön esittäminen kuvana poistaa näitä ongelmia, mutta samalla se myös poistaa digitaalisuuden edut. Digitaalinen kuva ei ole tekstiä, vaikka kuvassa tekstiä olisikin. Kuvan suurentaminen ja muokkaaminen ei ole yhtä yksinkertaista kuin tekstin.

Näkövammainen ei välttämättä näe kuvaa, eikä siten voi lukea kuvamuodossa olevaa tekstiä. Suunnittelunäkökulmasta katsottuna kuvamuotoon asetellun tekstin muokkaaminen tai korjaaminen jälkikäteen on työlästä. Kuvatiedoston fyysinen koko on myös moninkertainen tekstitiedostoon verrattuna.

Saavutettavuuden varmistamiseksi kuvien käyttöä tekstin sijaan tulee ehdottomasti välttää. Aina tämä ei välttämättä ole mahdollista. Monet liike- ja tuotemerkit, sekä yritysten logot ovat tietyntyylistä tekstiä, jota on toistaiseksi mahdoton esittää internet-sivulla tekstimuodossa. Hyvä esimerkki tästä on Coca-Cola Companyn tunnettu koristeellinen tekstilogo. Mikäli teksti korvataan kuvalla, on varmistuttava, että kuvan informaatio on myös näkövammaisen tai heikkonäköisen saavutettavissa. Alt-tekstin tai vaihtoehtoisen tekstimuotoisen informaation tarjoaminen on siis erittäin suositeltavaa. Toinen mahdollinen ratkaisu on hyödyntää esimerkiksi sIFR-tekniikkaa, jossa tekstiä voidaan esittää JavaScriptin ja Flashin avulla ja silti säilyttää saavutettavuus.

4. Millainen fontti?

Ei ole lainkaan yhdentekevää millaista kirjasintyyppiä eli fonttia käytetään tekstuaalisen sisällön ilmaisemiseksi. Eri fontit on suunniteltu erilaisia tarkoituksia varten. Fontit voivat olla koristeellisia, juhlallisia, jämäköitä ja virallisia, mutta myös hauskoja ja epävirallisia, taiteellisia, moderneja tai futuristisia. Fontit ja grafiikka muodostavat yhdessä dokumentin visuaalisen ilmeen, oli kyse sitten painetusta tai sähköisestä informaatiovälineestä.

Fonttityypit jaetaan geneerisiin päätyyleihin ominaisuuksiensa mukaan. Päätteellinen (serif) fontti on hyvin yleinen sanomalehdissä ja painetussa tekstissä (Esimerkki Georgiasta). Päätteellisten fonttien pienet koukerot ja väkäset auttavat katsetta soljumaan kirjaimesta seuraavaan ja helpottavat lukemista. Päätteellisiä fontteja käytetään myös paljon internet-sivuilla, vaikka niillä onkin taipumus muuttua sumeaksi ja suttuiseksi liian pienikokoisena näytöllä esitettyinä.

Päätteetön (sans-serif) fontti on suoraviivainen ja tasainen, eikä siinä ole serif-fonttien tapaan käytetty paksunnoksia tai koukeroita (esimerkkikuva Verdanasta). Päätteetön fontti on usein välistykseltään avara ja näytöllä tarkka ja helppolukuinen. Nykyisten näyttöjen alhainen resoluutio tekee suoraviivaisesta ja yksinkertaisesta fontista selkeämmän ja helppolukuisemman.

Muita fonttityyppejä ovat mm. tasalevyinen monospace, jota käytetään erityisesti ohjelmakoodin esittämiseen tekstieditoreissa sekä hyvin koristeellinen ja taiteellinen fantasia ja vino kirjasin eli kursiivi. Internet-sivuilla käytetään tavallisimmin päätteellisiä ja päätteettömiä fontteja.

Muutamat ns. ydinfontit (core fonts) määritellään turvallisiksi perusfonteiksi, joita on turvallista käyttää internet-sivuilla. Nämä fontit löytyvät useimmista järjestelmistä ja on hyvin todennäköistä, että käyttäjällä on ne järjestelmässään, jolloin internet-sivu näkyy käyttäjälle typografin suunnitelmien mukaisena.

Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS ja Verdana ovat Microsoftin ydinfontteja ja ne löytyvät pääsääntöisesti lähes kaikista nykyaikaisista Windows-sekä Macintosh-järjestelmistä.[3]

Eri ohjelmistojen, kuten Internet Explorerin ja Microsoft Officen mukana toimitetaan lisäksi runsaasti muita fontteja, jotka tavallisesti löytyvät monista järjestelmistä. Koska CSS-tyylimäärittelyillä on mahdollista määrittää vaihtoehtoisia fontteja, on ydinfonttien ulkopuolisiakin fontteja melko turvallista käyttää. On vain muistettava tarjota tarpeeksi vaihtoehtoja, sekä määrittää viimeiseksi vaihtoehdoksi geneerinen fonttiperhe (serif, sans-serif jne.), jolloin järjestelmä näyttää oikean tyyppisen oletusfontin, mikäli typografin määrittelemiä fontteja ei järjestelmästä löydy.

Lopuksi

Saavutettavuusnäkökulman huomioiminen on hyvin keskeinen tekijä internet-sivuja suunniteltaessa. Sivun sisällön välittyminen lukijalle on hyvin olennaista koko sivun olemassaolon perusteena. Jos potentiaalinen lukija ei pääse sisältöön käsiksi, menettää koko sivu tarkoituksensa. Nykyteknologian levitessä yhä useampiin koteihin yhä erilaisemmat ihmiset tulevat käyttämään internetin palveluita. Monet keski-ikäiset eivät esimerkiksi pysty lukemaan ilman silmälaseja samaa tekstiä kuin heidän lapsensa.

Sarjan toisessa osassa keskitytään fonttien näkyvyyteen ja tehostekeinoihin, joilla luettavuutta voi parantaa.

Lähteet ja viitteet

1: http://en.wikipedia.org/wiki/Typography
2: http://www.sitepoint.com/article/anatomy-web-fonts
3: http://www.upsdell.com/BrowserNews/res_fonts.htm#a01

ClearType Tuner on työkalu, jolla Windows XP:n näyttöfonttien pehmennysominaisuuksia voi muokata (toimii Internet Explorerilla).

7 comments:

  1. Typografian käsikirja on erittäin hyvä opus ja todellakin nimensä veroinen; loistava käsikirja.

    Siinä on esitetty paljon käytännön vinkkejä moniin tilanteisiin havainnollisten esimerkkien kera. Sitä ei kuitenkaan ole kirjoitettu ensisijaisesti verkkosivuja silmällä pitäen, vaan printtimedia on enempi huomion kohteena, joten ohjeita ja vinkkejä täytyy vähän pureskella.

    http://www.julkaisija.com/typokirja.html

  2. Verdana esimerkkinä päätteettömästä fontista on siitä jännä että siinä versaali i (eli I) on päätteellinen.

  3. Asiallinen artikkeli. Kun typografia kerran määriteltiin, pitäisikö vielä puida fontti- ja kirjasin-sanojen ero…

    Kursiivia kehotetaan usein välttämään netissä, ilmeisesti, sillä se saattaa näyttää rumalta, jos kone ei osaa pehmentää kirjasimia oikein. Onko tähän jotain voimakkaampaa argumenttia? Tässä artikkelissahan asiaan ei otettu kantaa.

    Minusta kun lihavointi on sitten usein jo liian silmille hyppäävää, eikä liika värien tai kirjasinten kanssa sotkeminenkaan tunnu järkevältä, kun vain haluaisi korostaa jotain.

  4. Jukka Korpelan Termikysymyksiä: fontti, fonttiperhe, fonttiluokka ja glyyfi http://www.cs.tut.fi/~jkorpela/sanat/fontti.html

    Typografian käsikirjassakin on puhuttu asiasta, mutten nyt muista ulkoa millä tasolla ja kuinka laajasti.

    Usein, lähes aina, kun puhutaan kursiivista, tarkoitetaan ns. digitaalista kursiivia. Oikeasti kursivoitu fonttihan ei ole ”vino esitys tavallisesta”, vaan leikkauksessa on muitakin eroja. Harvasta fontista löytyy erikseen oikeaa kursiivia. Joku typografian tuntija voi toki pitää sitä syynä olla käyttämättä veppisivuilla kursiivia, mutta aika heikko perustelu se mun mielestä on.

    Lihavoinnin ja kursivoinnin lisäksi on kyllä muitakin korostuskeinoja, osa huonoja osa vielä huonompia 🙂 Ei vaan, tapauskohtaisesti toki kannattaa miettiä mikä toimii ja mikä ei.

    Tekstiä voi alleviivata, mutta sitä ei suositella sillä linkkien tunnuspiirteisiin kuuluu alleviivaus ja siksi kaikki alleviivattu saatetaan mieltää linkeiksi.

    Yliviivauskin on mahdollinen, mutta se on korostuskeinona vähän kehno, sillä se pikemminkin ymmärretään ettei juuri sitä tekstiä kannata lukea.

    Voi myös kirjoittaa kapiteeleilla, eli ”pienaakkosten kokoisilla suuraakkosilla”. Kapiteelin suhteen on sama ongelma kuin kursivoinnin; oikeasti kapiteeli ei ole vain ex-korkuista versaalia, vaan siinäkin leikkaus on hieman erilainen, mm. viivan paksuus on eri. Kuka siitä sitten välittää, on toinen asia. Minä en ainakaan.

    Voi toki myös kylmästi kirjoittaa SUURAAKKOSIN. Sitä vain ainakin nörtimmät pitävät huonona tapana, tavalliset kuolevaiset tuskin suhtautuvat siihen yhtä nyrpeästi.

    Taustaväriä voi vaihtaa, mutta huonosti värejä toistavat näytöt (ainakin vanhemmat matkapuhelimet) aiheuttavat ongelmia, eivätkä pahasti värisokeat liiemmin arvosta. 🙂

    Eipä nyt äkkiseltään tullut muuta mieleen, mutta kai niitä muitakin tapoja on. Ainiin, kirjainten väliä voi vaihtaa.

  5. Uuden hienon veikkauksen Bingo-nettipelin uusi fontti on todella huono valinta hiemankin huononäköiselle pelaajalle.
    – Veikkaus ei panosta käytettävyyteen eikä ota kommentteja vaarin.

Kommentointi on suljettu.