Fontit ovat tyylien yksityiskohta, joihin liittyvät tarpeet voivat yllättää monet kirjoittajista. Suurin osa meistä ei ole graafisia suunnittelijoita, eli oletusvalinnat yleensä riittävät tarpeisiimme.
Aina näin ei kuitenkaan ole.
Käyn täällä läpi erinäisiä huomioita dokumenttien käyttämien fonttien säätämiseen liittyen. On tärkeää ymmärtää sekä syyt että keinot eri fonttien tilannekohtaiselle käyttämiselle. Keinojen osalta annan suoria ohjeita, kuinka tyylitiedostot tulisi säätää ainakin DoX CMS:n kanssa yhteensopivalla tavalla. Kerron täällä esimerkiksi, kuinka eri kielien aakkostoille saa parhaiten määritettyä käyttöön eri fontit.
Tilanteet
Nämä tilanteet ovat esimerkkejä olosuhteista, joissa erikseen lisätyt fontit ovat välttämättömiä tai ainakin todella hyödyllisiä. Kun niistä tietää ennalta, osaa niihin varautua ennakkoon.
Eri aakkostot
Joskus käännökset tehdään kielille, joita oletusfontit joko eivät riitä esittämään kokonaisuudessaan tai esittävät kehnosti. Esimerkiksi Noto Sans -fonttiperhe kehitettiin, jotta verkkosisällöistä saataisiin poistettua tarve käyttää puuttuvien merkkien symboleita (▯ tai �). Sen nimi tulee sanoista ’no tofu’, koska puuttuvan merkin laatikko näyttää tofukimpaleelta. Mutta näiden tilanteiden lisäksi oletusarvoiset fontit voivat vain näyttää kehnoilta eri merkistöillä verrattuna ensisijaisesti kyseisille merkistöille kehitettyihin fontteihin.
Näissä tapauksissa tyylitiedostoihin voi määrittää kielikohtaiset fontit, jotta eri aakkostojen käytössä ovat asianmukaiset vaihtoehdot.
Erikoismerkistöt
Aakkostojen lisäksi voi olla tarpeen määrittää joihinkin tilanteisiin muita erikoismerkkijoukkoja. Ilmeisimmät esimerkit tällaisista tilanteista liittyvät monospace- ja dingbat-fontteihin.
Monospace- eli vakiolevyiset kirjasintyypit käyttävät merkkejä, joista jokaiselle on varattu sama määrä tilaa. Esimerkiksi siis pisteen käyttöön on varattu sama tila kuin M-kirjaimen. Tunnetuin ja useimmin käytetty monospace-fontti lienee oletusfontteihin kuuluva Courier. Niitä käytetään varsinkin koodin kirjaamiseen. Tosin, myös esimerkiksi sisällysluettelon osuuksien numerot ja sivunumerot voivat hyötyä tällaisten numeroiden käyttämisestä niiden ulkoasun siistimiseksi.
Dingbat-fontit kuten Wingdings puolestaan sisältävät kirjaimien sijaan kasan erilaisia koristekuvioita. Osa niistä on puhtaasti koristeellisia ja osalla kuten nuolilla on käytännöllisempiä käyttötapoja. Toki nuolimerkit kuten ↑ ovat yhteensopivia myös monien muiden fonttien kanssa, jolloin niiden lisääminen ei yleensä vaadi dingbat-fontin määrittämistä sitä varten.
Brändi
Yritysten brändityylioppaissa määritetään usein sallitut fontit. Joskus tekninen sisältö voi tietenkin olla syytä erottaa tältä osin markkinointisisällöistä. Tällöin kannattaa pyytää tai ehdottaa itse muun brändi-imagon kanssa yhteensopivaa fonttivalikoimaa tekniselle sisällölle.
Bränditunnistettavuutta ei kannata vähätellä, vaikka kyse on teknisistä sisällöistä. Suuri osa käyttäjistä käyttää luultavasti enemmän aikaa teknisten sisältöjen kuin itse hallinnoimienne markkinointisisältöjen parissa. Heidän kokemuksensa tältä osin on osa brändikokemusta.
Sisältöjen käytettävyys vaikuttaa tietenkin tähän kokemukseen enemmän kuin niiden ulkoasu. Hyvän maun mukainen tyylittely voi kuitenkin vahvistaa näitä mielikuvia erottamalla niitä koskevat muistot vahvemmin muista ylipäätään oppaisiin liittyvistä lukukokemuksista. Riippuen henkilön tavasta muistaa ja mihin tämä kiinnittää huomiota, se voi jopa helpottaa sisältöjen tai niiden sijainnin mieleen palauttamista.
Erot
Eri fonteilla saman aakkoston sisällä on myös etunsa ja haittansa. Nämä erot määrittävät, miksi kukin fontti soveltuu tai ei sovellu tiettyyn käyttötarkoitukseen. Tärkein tekijä tältä osin on luettavuus käyttötavan huomioiden. Lisäksi fontti voi kuitenkin vaikuttaa lukijoiden asenteeseen tekstiä kohtaan ja täten heidän lukutapoihinsa ja tulkintoihinsa. Esimerkiksi Times New Roman ja monet muut serif-fontit koetaan keskimäärin vakavammiksi. Riippuen lukijasta, tämä voi esimerkiksi vähentää silmäilemällä lukemista ja ohjeiden vapaampaa soveltamista.
Esimerkiksi näyttöjen ja painotuotteiden välisten erojen lisäksi on hyvä huomioida lukijoiden erityistarpeet. Osa fonteista väittää olevansa dysleksiaystävällisiksi suunniteltuja. Toiset korostavat niiden luettavuutta myös näkörajoitteisille. Nämä erot on myös syytä huomioida osana kokonaisarviota. Comic Sans on tuskin kaikkiaan paras vaihtoehto, mutta esimerkiksi Atkinson Hyperlegible -perhe voi olla harkitsemisen arvoinen.
Pääteviivat
Eniten keskusteltu ero fonttien välillä koskee pääteviivojen (serif) merkitystä. Kyseessä ovat merkkien kärkiin lisätyt osuudet, jotka muodostavat niiden viivoihin lisäkulmia. Times New Roman on tunnetuin tällainen pääteviivallinen serif-fontti. Vastaavasti Arial on luultavasti tunnetuin ilman niitä oleva eli sans serif -fontti.
Yleinen mutta ei ehdoton periaate on, että erityisen pienen tekstin on parempi käyttää serif-fonttia. Niiden lisäyksityiskohdat tekevät eri kirjaimista selvemmin toisistaan erottuvia.
Vastaavasti usein sans serif -fontteja suositellaan varsinkin verkkosisällöille. Syy tälle on, kuinka varsinkin pieniresoluutioiset ja pienet näytöt voivat hyötyä yksinkertaisemmista merkeistä. Moderneilla näytöillä tällainen tarve on jokseenkin pienempi, vaikka myös niissä OLED-alipikselijärjestys on voinut vaikuttaa tekstin luettavuuteen ennen 2026 julkaistujen mallien tuomia uudistuksia.
Merkkien erotettavuus
Ihanteellisesti fontit on suunnitteltu siten, että helposti keskenään sekoitettavat merkit erottuvat toisistaan riittävän selvästi. Jos lukijoiden ei tarvitse pysähtyä tulkitsemaan epäselviä tapauksia osana tekstin silmäilyä, nopeuttaa se oikeiden osuuksien löytämistä ja vähentää sekaannuksien riskiä. Tämä on erityisen olennaista, kun kyse on sanojen sijaan merkkisarjoista, joissa sekaannuksia ei saa syntyä.
Esimerkiksi merkit I, l ja 1 täytyy voida erottaa toisistaan mahdollisimman selvästi. Kirjaimien kuten d ja b sekä p ja q tulisi erota muutoinkin kuin vain peilikuvina toisistaan. Jos yksi merkki eroaa toisesta olemalla vain pienempi osa samaa muotoa, tulisi puuttuvien osien jättää riittävän selkeä aukko. Esimerkki tästä ovat c ja o.
Merkkien mitat
Varsinaisen tekstin koon lisäksi käytettyihin merkkeihin liittyy muita huomioimisen arvoisia mittoja.
Saman kirjasinkoon sisällä eri fonteilla voi silti olla korkeudeltaan eroavia kirjaimia. Käytännössä kyse on suhteesta suurimpien ja pienimpien kirjaimien välillä. Tältä osin yhdenmukaisemmat fontit ovat parempia pienempään tekstiin, koska mikään kirjain ei ole tällöin liian pieni. Suuremman kokokontrastin fonteissa osa merkeistä voi jäädä tällöin lukukelvottomiksi tai vaatia koko osuuden kirjasinkoon kasvattamista.
Samoin eri fontit käyttävät eri paksuisia viivoja. Myös tältä osin on kyse suhteesta paksuimpien ja ohuimpien viivojen välillä, koska paksuus on muuten säädettävissä tarpeen mukaan. Jos tämä kontrasti on korkea, voivat ohuemmat viivat olla vaikeita elleivät mahdottomia havaita pienemmillä kirjasinkoilla. Varsinkin leipätekstissä tulisi siis välttää tällaisia fontteja.
Joskus voi tulla yllätyksenä, kuinka kehno joidenkin fonttien oletusvälistys on. Se voi olla epätasaista tai liian tiukkaa. Epätasaisuuteen on vaikeampaa vaikuttaa, mutta liian tiukka (tai löyhä) välistys on korjattavissa erillisellä letter-spacing-säännöllä tyylitiedostossa.
Säädettävyys
Fontit voivat myös erota toisistaan niiden säädettävyyden rajojen osalta. Perinteisille fonteille tulisi ihanteellisesti määrittää erilliset versiot sekä eri viivapaksuuksille että kursivoinnille. Myös yhdistelmät näiltä osin tarvitsevat tällöin omat fonttitiedostonsa. Nämä erilliset tiedostot eri muunnelmille eivät aina ole välttämättömiä, mutta ne ovat luotettavampia kuin kasaajien pohjafontteihin tekemät muutokset. Esimerkiksi erikseen määritetty fontti lihavointiin voi sovittaa pääteviivoihin eri viivapaksuuden muutosta kuin varsinaisiin merkkeihin. Mitä paremmin pohjafontille löytyy näitä muunnelmia, sitä paremmin se on sovellettavissa tilanteisiin, joissa niitä tarvitaan.
Lisäksi on olemassa suureellisia fontteja (variable font), joille ei tarvitse määrittää erillisiä muunnelmia. Tällöin pohjafontit on suunniteltu eri muunnelmat huomioiden käyttämällä vapaasti skaalattavia suureita esimerkiksi viivapaksuudelle. Kaikki kasaajat eivät kuitenkaan tue niitä automaattisesti, ja niissä voi olla muita ongelmia kuten kehno välistys.
Keinot
Nämä ohjeet kertovat, kuinka fontteja hallinnoidaan tyylitiedostojen avulla. Tämä osuus kattaa keinot lisätä ne tyyleihin, vaihtaa fontit kielikohtaisesti ja hallinnoida niiden yksityiskohtia.
Lisääminen
Kun fontit lisätään tyyleihin DoX CMS:ssä, täytyy ne ensin lähettää järjestelmään. Käyttäkää tähän Tyylit > Tiedostot -valikon Lataa Tiedosto Palvelimelle -komentoa. Suosittelemme ensisijaisesti TTF- tai OTF-tiedostoja.
Suosittelen käyttämään fonttien lisäämiseen erillistä tyylitiedostoa. Tällä tavoin niiden paikka on selkeä ilman tarvetta viedä tilaa tälle ensisijaisista tyylitiedostoista. Kyseiset tiedostot voi sitten lisätä osaksi samaa tyyliä.
Tyylitiedostossa vaadittu muotoilu on seuraavanlainen:
@font-face {
font-family: title;
src: url(address);
}Näistä arvoista title vastaa fontista käytettyä nimeä muualla tyylitiedostoissa. Jos nimessä on välilyöntejä, täytyy se kirjoittaa lainausmerkkien sisään.
Address puolestaan vastaa kyseisen fonttitiedoston sijaintia. DoX CMS:ssä tämä arvo on /Content/StyleFiles/filename, jossa filename täytyy korvata tiedoston varsinaisella nimellä (sisältäen myös sen päätteen).
Muunnelmat
Kun kyseessä on muunnelma pohjafontista, käyttää se samaa arvoa font-family-säännön osalta. Sen lisäämisen yhteydessä annetaan sitten lisämääreet, joita se vastaa. Tällaisia sääntöjä ovat esimerkiksi font-weight ja font-style. Täten esimerkiksi sekä lihavoitu että kursivoitu muunnelma näyttäisi tältä:
@font-face {
font-family: title;
src: url(address);
font-style: italic;
font-weight: 700;
}Title-arvo on sama kuin pohjafontilla ja address-arvo vastaa kyseisen fonttimuunnelman sijaintia ja tiedostonimeä.
Font-weight-arvo 700 vastaa normaalia lihavoinnin määrää. 400 on fontin oletusviivapaksuus. Sitä alemmat arvot soveltuvat ohuemmille versioille fontista. Koko vaihteluväli on sadan kertoimissa 100 ja 900 välillä.
Kielikohtaisuus
Varsinkin eri aakkostoja käyttävät kielet voivat tarvita eri fonttien asettamista niiden käyttöön.
Kaikkein yleisimmällä tasolla tämä vaatii vain, että fontit määrittäville osuuksille annetaan kielikohtaiset vaihtoehtoiset arvot [lang]-attribuutin osana valitsijaa avulla. Kyseinen attribuutti on julkaisun pohjaelementillä eli sen arvon voi lisätä valitsijan alkuun erotettuna muusta valitsijasta välilyönnillä.
Kyseinen ratkaisu täytyisi tosin toistaa jokaiselle osuudelle, jolle on määritetty fontit. Ja jokaiseen valitsijaan, jota ne käyttävät. Tämä lisätyön määrä kaksinkertaistuu, jos samalla halutaan huomioida myös esikatselut. Niissä kielimääre ei tule lang-attribuutista vaan ID-arvona. Jotta samat kielikohtaiset säännöt yleistyisivät myös niihin, täytyy siis erikseen lisätä valitsijat, joissa sama kieliarvo on annettu ID-arvon määreenä eli esimerkiksi #fi.
Täten parempi ratkaisu on käyttää tähän CSS-muuttujia. Tällöin varsinaiset eri osuuksien font-family-arvot määritetään näinä muuttujina. Vain näiden muuttujien oletusarvo ja kielikohtaiset poikkeusarvot tarvitsee sitten määrittää erikseen. Suosittelen erillistä tyylitiedostoa myös muuttujien arvojen hallintaan.
Muuttujiin perustuva ratkaisu näyttää kutakuinkin tältä:
body {font-family: var(--font_default);}
.titleWrapper,
.dita-title,
[doxelementclass="cover_title"] {font-family: var(--font_title);}
body {
--font_default: Arial;
--font_title: Roboto;
}
[lang="jp"] body, #jp body {
--font_default: NotoSansCJK;
--font_title: HeiseiMincho;
}Lisämuunnelmat
Nämä ovat lisäsääntöjä, joilla käytettyjä fontteja voi säätää ja sovittaa.
Muut viivapaksuudet
Yllä mainitsin, että viivapaksuuksia on enemmän kuin vain oletusarvo ja lihavoitu arvo. Samalla tavoin voi säätää käyttöön useampia versioita samasta fonttiperheestä. Ohueamman version lisäksi myös esimerkiksi erityisraskaan version kuten Arial Black saa säädettyä tällä tavoin eri fontin sijaan saman perusfontin muunnelmaksi.
Välistys
Viittasin yllä myös välistystä hallinnoivan letter-spacing-säännön käyttömahdollisuuksiin. Sitä ei saa säädettyä suoraan osaksi fontin oletusarvoja. Se täytyy määrittää erikseen yhdessä kyseisen fontin kanssa kuhunkin sen käyttöpaikoista. Tällä tavoin voi kuitenkin korjata varsinkin välistykseltään liian tiukan mutta muutoin tarpeitanne vastaavan fontin. Tämä arvo lisää sille määritetyn pituuden verran ylimääräistä tyhjää tilaa merkkien väliin. Vastaavasti negatiiviset arvot vähentävät määritetyn määrän merkkien välistä niiden lähentämiseksi.
Yksityiskohtien muunnelmat
Fonttien muunnelmien hallinnointiin löytyy joukko font-variant-sääntöjä:
- font-variant,
- font-variant-alternatives,
- font-variant-east-asian,
- font-variant-ligatures ja
- font-variant-numeric.
Tältä osin kyse on todella pienistä seikoista kuten yksittäisten merkkien muunnelmista. Ne voivat kuitenkin parantaa käytettyjen fonttien käytettävyyttä joko osana niiden oletusasetuksia tai tilannekohtaisia sovituksia. Esimerkiksi numerojen muunnelmissa nollan voi erottaa selvemmin O-kirjaimista tai numeroiden tasaukset saa samankokoisiksi esimerkiksi vain sisällysluetteloon.
Yhteenveto
Fontteja voi olla tarpeen säätää tyylitiedostoissa syistä kuten käännöksien käyttämien lisäaakkostojen huomioiminen, erityistilanteiseet kuten koodin pätkät sekä yhdenmukaisuus brändi-imagon kanssa. Oletusfontit eivät välttämättä toimi ihanteellisesti halki eri aakkostojen ja niistä voi jopa puuttua osa eri aakkostojen erikoismerkeistä.
Erot eri fonttien välillä vaikuttavat niiden soveltuvuuteen eri käyttötilanteissa. Pääteviivat voivat parantaa pienen tekstin luettavuutta, mutta pieni tai matalaresoluutioinen näyttö voi tehdä näistä kirjaimista suttuisemman näköisiä. Lisäksi fonttien välillä voi olla eroja samankaltaisten merkkien toisistaan erotettavuudessa sekä esimerkiksi suhteellisissa mitoissa kuten erotuksessa korkeimpien ja matalimpien merkkien korkeudessa. Riippuen sovitustarpeesta eri tilanteiden välillä, myös saman fontin saatavilla olevien muunnelmien määrä voi vaikuttaa sen käytettävyyteen.
Fontit täytyy lisätä järjestelmään ja sitten tyylien käyttöön osana ainakin yhtä tyylin sisältämistä tyylitiedostoista. Saman fontin eri versiot voi lisätä erikseen ja antaa niille eri nimien sijaan yhteensopivia lisämääreitä kuten lihavoinnin määrän, joiden perusteella pohjafontista vaihdetaan niihin. Tämä on parempi vaihtoehto kuin jokaisen saman pohjafontin version määrittäminen omaksi fontikseen.
Eri aakkostoja käyttävien kielien käyttöön määritetään eri fontit lisäämällä kielikoodeja vastaavat lisämääreet kyseisiä fontteja käyttävien osuuksien valitsijoihin. Paras vaihtoehto tältä osin on kuitenkin oletusfonttien määrittäminen käyttämällä CSS-muuttujia. Tällöin kielikohtaisesti täytyy vain vaihtaa näiden muuttujien arvot eikä käydä määrittämässä fontteja uudelleen jokaisessa julkaisun osuudessa, jolle ne oli alkujaan määritetty erikseen.
Tyylitiedostojen avulla fontteja voi tarvittaessa säätää tätäkin enemmän. Pelkän lihavoinnin sijaan niille voi määrittää joukon molempiin suuntiin skaalaavia viivapaksuuksia. Jos niiden oletusvälistys on liian tiukka tai liian löyhä, voi sitä säätää erikseen. Ja lisäksi löytyy joukko sääntöjä, joilla voi muuttaa erinäisiä pieniä yksityiskohtia vastaamaan käyttötarvettanne. Esimerkiksi nollien sisään saa halutessaan lisättyä pisteen tällä tavoin niiden erottamiseksi O-kirjaimista koodeissa, jotka voivat sisältää molempia.