Nguyen Nguyen, 28/10/2020
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.
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ä.
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.
- 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ä.
- 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ä.
- 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.
- 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.
- 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.
- 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ä!