4.1. Typografia

Fonttityypit

Fontit ja fonttiperheet ryhmitellään kirjasintyypin mukaan ja yleisimmät kaksi tyyppiä ovat pääteviivallinen ja pääteviivaton, joista painokielessä käytetään termejä antiikva ja groteski. Ehkä yleisemmin tunnetut termit ovat kuitenkin Serif (pääteviivallinen) ja Sans-Serif (pääteviivaton).

Kaikissa tavallisimmissa tietokoneohjelmissa ja sivustoilla, joissa fontteja ryhmitellään ryhmät on nimetty Serif/Sans Serif. Antiikva/Groteski ryhmittely on vain harvoin käytetty.

Muita kirjasintyyppejä ovat Display, Handwriting, Monotype, Monospace.

Fonttiperhe ja fontti

Typografian peruspartikkelina on valittu fonttiperhe ja fontti. Millainen luettavuus fonttiperheellä on ja millainen ”leikkaus” fontille asetetaan eri tekstielementeissä (p, h1-h6 jne.). Sivuston fonttien valinta ja valittujen fonttien luettavuus, fontin luoma vaikutelma jne. Kaikki ominaisuudet vaikuttavat siihen, millaisen vaikutelman selaaja saa sivustosta.

Siirry Google Fonts-palveluun ja tutustu fonttivalikoimaan ja palvelun toimintaan.

Tutki myös muita tarjolla olevia fonttipalveluita.

Fontin leikkaus?

Fontin leikkaus (CSS: font-weight, font-style) tarkoittaa saman kirjasinperheen (Open Sans, Caudex) sisällä olevia muunnelmia kirjasimesta. Leikkauksia käytetään luomaan visuaalista hierarkiaa ja ryhmittelemään tekstiä. Lukijan huomio saadaan kiinnitettyä asioihin ja voidaan vaikuttaa sisällön ulkoasun jäsentelyyn.

Esimerkkinä Google Fonts

Verkossa on tarjolla kasoittain fontteja käytettäväksi sivustoilla. Yksin Google Fonts-palvelussa fontteja on ladattavissa ilmaiseksi käyttöön miltei 2000 erilaista fonttia.

Google Fonttivarannon lisäksi tarjolla on seuraavia palveluita:

1. Font Squirrel
   • Kaikki fontit ovat myös kaupalliseen käyttöön sallittuja C00 lisenssillä
   • Tunnettu laadukkaista, juridisesti tarkistetuista ilmaisista fonteista
2. DaFont
   • Yksi vanhimmista ja suosituimmista fonttisivustoista
   • Huomio: kaikki fontit eivät ole kaupalliseen käyttöön, joten lisenssit kannattaa tarkistaa
3. FontSpace
   • Yli 100 000 ilmaista fonttia
   • Selkeä käyttöliittymä ja mahdollisuus suodattaa fontteja lisenssin mukaan
4. 1001 Free Fonts
   • Pitkäaikainen klassikko, jossa on valtava kokoelma
   • Fontit jaoteltu kategorioihin (esim. käsinkirjoitetut, retro, minimalistiset)
   • Monet fontit ovat ilmaisia vain henkilökohtaiseen käyttöön, joten lisenssit on syytä tarkistaa.
5. Open Foundry
   • Keskittyy avoin lähdekoodi -fontteihin
   • Moderni ja minimalistinen valikoima, erityisesti suunnittelijoille ja kehittäjille
   • Fontit julkaistu avoimilla lisensseillä, joten ne sopivat hyvin verkkosivuille.

Käytetyimpiä fontteja

Luodaan pieni katsaus eniten käytettyihin turvallisiin perusfontteihin ja hieman niiden alkuperään. Jos fonttien suunnattoman suuri määrä laittaa pään pyörälle, voi aina valita käyttöön turvalliset vaihtoehdot. Saattaa olla ainakin hyvä valita yksi tavallisimmista fonteista esimerkiksi leipätekstin fontiksi.

Typografian perusperiaatteet

Selaimen perusfontti 16px

Internetselaimet näyttävät sivuston tekstin oletusarvoisesti 16 pikselin kokoisena. Tämä arvo toimii selaimen omana perusfonttikokona, jota suurin osa käyttäjistä ei muuta selaimen asetuksista. Jos sivuston body-elementille ei ole määritelty fonttikokoa, selain käyttää automaattisesti tätä oletusta. Näin selaimen perusfonttikoko muodostaa koko sivuston typografian lähtökohdan, ellei yksittäisille elementeille ole CSS:ssä määritelty muita arvoja.

Saavutettavuuden näkökulmasta on tärkeää huomioida käyttäjät, jotka suurentavat selaimen perusfonttikokoa saavutettavuusasetusten kautta. Tällöin sivuston tekstin on skaalattava toimivasti heidän asetustensa mukaisesti — ilman, että layout hajoaa tai typografia menettää mittasuhteitaan.

Sivuston perusfontilla saavutettavuutta

Sivuston oma perusfonttikoko toimii typografian rungon perustana. Se määritellään suhteellisella arvolla selaimen staattiseen oletuskokoon (16 px), jotta typografia reagoi käyttäjän omiin asetuksiin. Kun sivuston typografia suunnitellaan tämän oletuksen päälle, teksti skaalautuu joustavasti eri laitteilla ja säilyttää luettavuutensa. Näin varmistetaan, että käyttäjä voi suurentaa tai pienentää tekstin kokoa selaimen asetuksista ilman, että sivuston rakenne rikkoutuu.

Oikein mitoitettu perusfontti luo perustan koko typografialle: otsikot, leipäteksti ja muut tekstikoot voidaan määrittää suhteessa tähän arvoon esimerkiksi rem-yksikköjen avulla. Lopputuloksena sivusto pysyy yhtenäisenä, tasapainoisena ja saavutettavana erilaisissa käyttötilanteissa

HTML-lähdekoodissa perusfonttikoko tulisi asettua html-elementille prosenttiarvolla, esimerkiksi:

html {font-size: 100%;}

Esimerkkejä sivuston perusfonttikoon asettamiselle perustuen selaimen 16px fonttikokoon:

Px vai rem?

Kun olemme ensin määritelleet selaimen perusfontin ja sivuston perusfontin, seuraava kysymys kuuluu: millä yksiköllä itse tekstielementit kannattaa mitottaa? Typografian asettamisessa kunnioitetaan kaikissa sivuston teksteissä selaajan valintaa sivuston tekstin kooksi. Siksi, kun arvaattekin jo, myös eri tekstielementtien asetukset asetetaan arvolla, joka on lopulta suhteellinen selaajan valintaan tekstikoosta.

Typografian suunnittelussa yksikkövalinta vaikuttaa suoraan siihen, miten teksti skaalautuu eri laitteilla ja miten hyvin se reagoi käyttäjän omiin asetuksiin. Siksi yksikön merkitys ulottuu sekä visuaaliseen ilmeeseen että saavutettavuuteen.

Pikseli (px) asettaa tekstille tarkan mutta jäykän koon. Se ei huomioi käyttäjän tekemää selaimen fonttikoon suurentamista eikä skaalaudu luonnollisesti eri näyttöjen välillä. Siksi px ei ole suositeltava valinta typografian perustaksi. Vaikka sillä on yhä käyttönsä tietyissä käyttöliittymäelementeissä, tekstikokoihin sitä ei kannata käyttää.

Suhteelliset yksiköt, kuten em ja rem, toimivat paremmin tekstille:

• rem perustuu sivuston perusfonttikokoon, joten kun perusfonttia muutetaan, koko typografinen hierarkia mukautuu automaattisesti.
• em puolestaan suhteutuu kulloinkin käytössä olevaan elementtiin ja on hyödyllinen paikallisissa säätötilanteissa.

Näiden yksiköiden suurin etu on saavutettavuus. Kun käyttäjä suurentaa selaimen fonttikokoa, sekä em että rem skaalautuvat mukana. Teksti säilyy luettavana ja sivusto reagoi käyttäjän tarpeisiin ilman, että rakenne rikkoutuu.

Käytännössä voit unohtaa pikseliarvon fonttien kooissa kokonaan!