Punos Mobile logo with a random assortment of letters in the background referring to the topic of typography.

Opas verkkosivuston web-saavutettavuuteen osa #2: Typographia

Typografia on tapa visualisoida kirjoitettua kieltä. Nyt on uusi aikakausi tämän ikivanhan taiteenmuodon elämänkaaressa. Meidän täytyy päättää milloin haluamme säilyttää vanhat design-käytännöt ja milloin poiketa niistä. Tämä artikkeli, yhdessä koko tämän blogisarjan kanssa, tuo esille parhaat käytännöt typografian käytössä verkkosivustoja kehitettäessä.

Toki on otettava huomioon, että typografiassa ei ole mitään kiveen hakattuja sääntöjä, joita tulisi noudattaa. Nykykäsityksen mukaan työkalut, joita meille on luotu käytettäväksi, ovat joukko toimintaperiaatteita, suunnittelumalleja ja metodeja joita voidaan soveltaa…suurimmassa osassa tapauksia. Nämä ovat hyviä ohjenuoria designereille, varsinkin aloitteleville semmoisille, tarjoamaan apua hallitsemaan luovaa ja joskus hämmentävää työmaata, jota typografiaksi kutsumme.

Typografian perusteet saavutettavuudessa

Alkuun tarvitsemme hieman perustietoa, jotta saamme tarvittavat työkalut käyttöömme. Katsotaanpa ensin hieman perusteita.

Kirjasintyypin kontrasti

Kontrasti kirjasintyypeissä viittaa kirjaimen viivojen paksuuteen ja/tai kirjainvälien tiheyteen. Kirjasintyyppiä, jonka viivojen paksuudet vaihtelevat paljon tietyssä kirjaimessa,voidaan kutsua korkean kontrastin kirjasintyypiksi. Kirjasintyyppiä, jonka kirjainten viivat ovat tasavahvoja, kutsutaan groteskiksi (eng. monolinear).  Ei kannata kuitenkaan päätellä, että groteskeilla kirjasintyypeillä olisi vähemmän kontrastia. Groteski design, jossa on liian vähän kontrastia viivoissa tai kirjainmuotojen (eng. letterform) eroilla, niin kuin Helvetica fontilla on, voi olla huono valinta pitkiin  kappaleisiin. Tällöin kirjainmuoto näyttää liian samanlaiselta huonontaen tekstin helppolukuisuutta. Nimenomaan tässä kohtaa typografian sääntö säännöttömyydestä astuu kuvioihin. Sinun tulee löytää sopusuhtaisuus itse.

Vertailu kirjaintyyppien Utopia, Optima ja Helvetica välillä.
Vertailu kirjaintyyppien Utopia, Optima ja Helvetica välillä.

Kontrasti käsitteenä sisältää myös kirjainten tiheyden, eli tyhjän tilan (eng. whitespace) kirjainten välillä ja niiden sisällä. Mitä enemmän tyhjää, sitä vähemmän kontrastia kirjasintyypillä on. Erot kasvavat huomattavasti etenkin pitkissä teksteissä jossa kontrasti on suuri, ja tämä johtaa mitä todennäköisimmin lukemisen hidastumiseen. Tällöin lukija tietoisesti ja tiedottomasti huomaa kirjainten vaihtelun, mikä vie huomion pois itse lukemisesta.

X-korkeus

Kirjasintyypin x-korkeus tarkoittaa sen pienten kirjaimien korkeutta mitattuna ilman sen ylä- ja alapidennyksiä.

X-korkeuden vertailu Helvetica ja Akzidenz kirjasintyyppien välillä.

Pienen x-korkeuden kirjasintyyppi näyttää hienostuneelta ja luo kiinnostavan jännitteen kirjainmuotojen välille, kun kontrasti on huomiota herättävä isojen ja pienten kirjainten välillä. Ison x-korkeuden omaava kirjasintyyppi taas tarjoaa enemmän tilaa kirjainmuodolle ja samalla helpottaa tekstin luettavuutta antamalla lukijalle enemmän tietoa. Tämä johtuu siitä, että kirjaimet yleensä sisältävät enemmän yksilöllisiä ja näin helpommin huomattavia muotoja kirjaimen yläosassa. Siksi korkean x-korkeuden omaava kirjasintyyppi on helpommin tunnistettavissa. Kuitenkin, mitä isompi tekstin x-korkeus on, sitä vähemmän tilaa jää kirjasintyypin tunnistettaville piirteille. Esimerkiksi, kirjaimet a ja d, tai n ja h, voivat olla hankalia erottaa toisistaan kun x-korkeus kasvaa. Taas kerran, sinun tulee löytää hyvä suhde joka sopii kuhunkin kirjasintyypiin.

Hyvät käytännöt typografiassa

Otsikot

Otsikot keräävät huomiota. Otsikko on yksi tärkeimmistä asioista, joka vaikuttaa siihen jatkaako lukija lukemista. Se auttaa lukijaa navigoimaan ja toimii eräänlaisena tervehdyksenä. Otsikon ei pidä pelkästään erottua muusta tekstistä vaan toimia myös ankkurina koko sivulle. Otsikoissa käytetään yleensä isompaa tekstiä, mutta sen ei tarvitse rajoittua siihen. Sijoitus, väri, välitys tai painotus ovat käypiä työkaluja otsikon tekemisestä erottuvan muusta tekstistä.

Johtuen näistä ominaisuuksista otsikon tulisi, yleensä, täyttää seuraavat vaatimukset:

  • Korkean kontrastin kirjasintyyppi

Kirjasintyyppi jolla on korkea kontrasti kiinnittää huomiota nopeasti ja erottaa itsensä helposti muista kappaleista. Hyvä esimerkki tästä on Bauer Bodoni kirjasintyyppi.

A summary of the Bauer Bodoni typeface. On the image, there is a phrase "The Quick Brown Fox Jumps Over The Lazy Dog".
Bauer Bodoni kirjasintyyppi
  • Matalan x-korkeuden kirjasintyyppi

Samoista syistä kuin edellinenkin vaatimus, matala x-korkeus luo suurta kontrastia, joka erottaa otsikon muusta tekstistä. Mrs. Eaves kirjasintyyppi on on hyvä esimerkki tästä.

On the image, it reads "Mrs Eaves" with the Mrs. Eaves typeface.
Mrs. Eaves kirjasintyyppi
  • Hieman tiivistetty kirjasintyyppi pituudeltaan tarkkoihin otsikoihin

Tavanomaisella uutissivustolla jossa on useita artikkeleita, otsikot ovat vaihtelevan pituisia, nimet saattavat sisältää välimerkkejä tai erikoismerkkejä, sitaatit on kursivoitu jne. Kirjasintyyppi jolla on keskivertoa vähemmän tyhjää tilaa kirjainten välissä voi toimia näissä tilanteissa hyvin, koska tällöin voit tiivistää enemmän tekstiä pieneen tilaan ja näin välttää hyppyjä seuraavalle riville. Esimerkkinä FF Meta Serif kirjasintyyppi on melko kapea, jolloin riville mahtuu useampi kirjain kuin vaikka Georgiaa käytettäessä.

FF Meta Serif kirjasintyyppi
  • Käytä Sans serif kirjasintyyppiä rajallisen tilaan sovitettavissa otsikoissa

Tämä käytäntö tulee yksinkertaisesti siitä että suurin osa Sans serifeistä mahtuu pienempään tilaan, koska sen kirjaimet vievät vähemmän tilaa. Siksi saat sijoitettua enemmän kirjaimia pienempään tilaan ja samalla pystyt käyttämään suurempaa kirjasimen kokoa. Esimerkiksi, sen sijaan että käyttäisit FF Meta Serifiä, kuten ylhäällä, voisit käyttää tiiviimpää Sans Serif versiota, kuten alla kuvattu FF Meta kirjasintyyppi.

FF Meta kirjasintyyppi
FF Meta kirjasintyyppi
  • Tuplaa tai triplaa kappaleen tekstin koko löytääksesi otsikolle koon

Otsikolle hyvän koon löytäminen kuulostaa yksinkertaiselta, seuraa vain intuitiotasi, eikö? Sinun tulisi kuitenkin kokeilla tuplata tai triplata kappaleen tekstin koko. Jos sinulla on tekstiä koossa 16px, on turvallinen valinta käyttää otsikossa 32px tai jopa 48px kokoa. Testaa mikä koko sopii sinun kirjasintyyppiisi parhaiten.

Kappaleet

Kappaleet ovat hyvin tavallinen osa sivustoa jossa on tekstimuotoista sisältöä. Kappaleessa lukijan silmä viipyy kauiten, koko lukemisen ajan. Tämän vuoksi kappale tarvitsee kirjasintyypin joka pitää lukijan lukemassa. Yksinkertaistettuna, pyri välttämään asioita jotka eivät auta lukemista. Seuraavassa osioissa saatat huomata, että hyvän otsikon ja luettavuudeltaan hyvän kappaleen ominaisuudet ovat suurelta osin vastakkaiset.

  • Kirjasintyypit joilla on pieni kontrasti

Vastakohtana otsikoille, jos kappaleen kirjasintyyppi on liian erottuva, lukija saattaa erottaa kirjainten väliset erot liiankin hyvin ja katse alkaa harhautumaan tekstistä. Lukijan keskittymisen ylläpitämiseksi kirjasintyyppi jolla on pieni kontrasti on hyvä valinta kappaleeseen.

Chaparral kirjasintyyppi
Chaparral kirjasintyyppi
  • Korkean x-korkeuden kirjaisintyyppi

Korkea x-korkeus luo kirjasintyypistä samantyylisen, näin tehden siitä helppolukuisempaa ja auttaa lukijaa nopeasti käymään tekstin läpi. Käytetään JAF Facit kirjasintyyppiä esimerkkinä. Kirjasintyyppinä se voi olla hyvin pieni, mutta säilyttää silti helppolukuisuutensa sen yksinkertaistavan vaikutuksen antavan suuren x-korkeutensa vuoksi. Ääripäänä, liian ison x-korkeuden käyttäminen johtaa taas siihen että kirjaimia ei enää erota toisistaan.

JAF Facit
JAF Facit kirjasintyyppi
JAF Facit kirjasintyyppi
  • Kirjasinkokona 16px tai 18px

Otettaessa huomioon tyypillisen lukijan etäisyyden tekstiin ja kirjasinkoon digitaalisen sisällön lukemisessa, on suositeltavaa, että kappaleen kirjasinkoona käytetään 16px tai 18px, tai 1 – 1.2em. Verkkosivuston kanssa työskennellessä, sinun tulisi käyttää em arvoja, jotta kirjasinkoot olisivat systemaattisia ja responsiivisia.

That’s All About Typography, Folks

Siinä kaikki typografiasta, tältä erää

P.S Etkö ole vielä lukenut sarjan edellistä osaa? Voit lukea sen täältä!