Typografian luominen käytännössä
Luodaan harjoitussivustollemme perusasetukset typografialle. Käytössä sivustolla on Kadence-teema ja editorina Elementor-sivueditori, jonka sivuston laajuisista typografia-asetuksista asetetaan asetukset niin, että ne kunnioittavat selaajan selaimen perusfonttiasetuksia. Voit katsoa myös oheisen havainnevideon asetuksien luomisesta.
Kadence-teema body-elementti
Kadence-teeman typografia-asetuksissa määritellään sivuston perusfontti. Näiden asetusten perusteella teema lisää fonttia koskevat CSS-määritykset sivuston body-elementtiin. Oletuksena Kadencen Base Font -asetus käyttää fonttikokoa 17px, joka on staattinen arvo. Staattinen fonttikoko yliajaa selaajan selaimessa määrittämän perusfonttikoon, eikä tämä ole saavutettavuuden kannalta hyvä ratkaisu.
Saavutettavalla sivustolla perusfontin tulee mukautua selaajan omiin asetuksiin. Siksi Kadencen oletusasetus on syytä muuttaa suhteelliseksi arvoksi, joka perustuu selaimen oletusfonttiin.
Tee siis seuraavat toimet:
- Siirry teeman asetuksiin kohtaan Mukauta → Fonts & Colors → Typography ja muuta Base Font -asetuksen fonttikoko arvosta
17pxarvoon1rem. Kun tallennat asetukset klikkaamalla Publish, Kadence-teema lakkaa lukitsemasta perusfonttia pikseleihin ja antaa sen periytyä selaimen asetuksista.
Tämän jälkeen jokaisen sivun body-elementille muodostuva CSS-määritys asettaa fonttikoon suhteessa html-elementtiin, joka puolestaan noudattaa selaajan omaa tekstikokovalintaa.
Kadence → body:
"Hei body, ota kokosi suoraan html-elementiltä. Se johtaa ja minä seuraan."
Elementor ja perustypografia
Elementor-editorissa asetetaan sivuston perustypografia Sivuston asetuksissa (Site Settings), josta löytyy typografiaan liittyvät kohdat Global Fonts ja Typography. Näiden kahden asetuskokonaisuuden avulla määritellään, millä tavalla sivuston tekstit skaalautuvat ja miten ne reagoivat käyttäjän selaimen fonttikokoon. Kun asetukset tehdään oikein, sivuston typografia pysyy johdonmukaisena ja saavutettavana kaikilla laitteilla.
Tässä ohjeessa käydään läpi, miten Elementorissa kannattaa asettaa perustypografia niin, että se kunnioittaa selaimen oletusfonttikokoa ja toimii loogisesti yhdessä teeman (esimerkiksi Kadencen) kanssa. Samalla opitaan, miten nämä asetukset näkyvät sivun lähdekoodissa ja miten niitä voi tarkistaa selaimen kehittäjätyökaluilla.
Elementor:
"Minä en halua päättää perusfontista. Seuraan teemaa, joka tuntuu kuuntelevan selaajan valintoja."
Global Fonts
Global Fonts -asetukset määrittävät Elementorissa neljä tekstityyppiä: Primary, Secondary, Text ja Accent. Näistä Text on tavallisen leipätekstin perusasetuskokonaisuus. Muut vaihtoehdot jätetään meidän tapauksessamme huomiotta sillä emme käytä niitä sivun muotoilussa.
Varmista, että seuraavat asetukset on asetettu Global Fonts-kohteisiin:
- Primary, Secondary ja Accent:
- Family, Weight, Transform, Style, Decoration: Default
- Kaikki asetukset on asetettu, joko Default tai tekstikentissä ei ole mitään arvoja.
- Text:
- Family: Alegreya Sans
- Size: 100%
- Oletusfontiksi sivustolle asetetaan Alegreya Sans fontti ja koko on 100% selaimen oletusarvosta.
Kun Elementorissa asetetaan Global → Text -arvoksi 100%, se tarkoittaa, että Elementor ei määrittele omaa fonttikokoaan, vaan perii sen teemalta. Kadence-teema puolestaan perii fonttikoon selaimelta. Näin syntyy selkeä ketju:
- Selaimen oletusfonttikoko (yleensä 16 px)
- → Teema (Kadence) perii tämän arvon
- → Elementor Global Fonts perii arvon teemalta
Tämä ketju varmistaa, että sivuston typografia skaalautuu käyttäjän selaimen asetusten mukaan. Jos käyttäjä on esimerkiksi suurentanut selaimen fonttikokoa saavutettavuussyistä, myös Elementor-sivusto kasvaa automaattisesti.
Typography → Body
Elementorin Typography-asetuksissa määritellään sivuston body-elementin typografia. Tämä asetus on tärkeä, koska se vaikuttaa koko sivuston perusfonttikokoon ja toimii pohjana kaikille Elementor -widgeteille.
Suositeltu arvo body-tekstille on 1rem. Tämä tarkoittaa, että body perii fonttikoon suoraan html-elementiltä, joka puolestaan perii sen oletuksena selaimelta.
Lopputulos asetukselle on seuraava:
1rem= selaimen (Google Chrome, Firefox jne.) oletusfonttikoko (yleensä16px)
Esimerkkiskenaario: Jos bodylle asetetaan esimerkiksi 1.2rem, koko sivuston teksti kasvaa 20 %. Tämä näkyy suoraan selaimen kehittäjätyökalujen Computed-osiossa, jossa fonttikooksi tulee 19.2px (1.2 × 16px). Tämä on yleisin syy siihen, että sivuston teksti näyttää suuremmalta kuin odotit.
Editorin oletusasetuksia
Kun ollaan asetettu fontin perusasetukset kunnioittamaan selaajan selaimen perusfonttiasetusta, jäljelle jää leipätekstin väri, jota ei voi asettaa sivun editointinäkymän sivustonlaajuisista asetuksista. Elementor editorin perusasetuksissa (ohjauspaneeli/Elementor/Asetukset) on oletuksena otettuna käyttöön oletusvärit. Tämä asetus estää värien asettamisen editorin Typografia-asetuksissa. Toiminto Poista oletusvärit käytöstä asetuksista Yleinen ”rastitetaan”, jolloin voidaan asettaa leipätekstin perusväriksi haluttu väri.
Poista oletusfontit käytöstä -asetus poistaa Elementor editorin sivuston laajuiset oletusasetukst käytöstä ja typografia täytyy asettaa teeman Typografia-asetuksista. Jos halutaan asettaa typografia vaikka käyttämällä CSS-muotoiluja sivuston laajuisissa CSS-asetuksissa tai erillisessä tiedostossa, oletusasetukset on otettava pois päältä, jotta Elementorin oletusasetukset eivät sotke omia muotoiluja.
Loppupäätelmiä
Sivuston laajuisen typografian asettaminen suhteellisilla arvoilla – kuten rem ja % – on saavutettavuuden kannalta olennaisen tärkeää. Suhteelliset arvot varmistavat, että sivuston teksti skaalautuu käyttäjän selaimen asetusten mukaan ja pysyy luettavana kaikilla laitteilla.
Suhteelliset arvot helpottavat myös sivuston ylläpitoa. Kun esimerkiksi muutat Elementorin Typography → Body -fonttikokoa arvoon 1.5rem, kaikkien sivuston tekstielementtien koko kasvaa automaattisesti. Leipätekstin koko nousee tällöin 16 pikselistä 24 pikseliin (1.5 × 16 px = 24 px). Yksi muutos riittää vaikuttamaan koko typografiseen kokonaisuuteen.
Typografian asettaminen ei kuitenkaan ole yksinkertainen tehtävä. Sivustoja luetaan lukuisilla erikokoisilla laitteilla, joilla on erilaiset näytöt ja käyttäjäkohtaiset asetukset. Siksi sujuvan ja saavutettavan typografian perustana on aina luotettava selaimen omaan peruskokoon ja käyttäjän henkilökohtaisiin asetuksiin. Tämä lähestymistapa tekee typografiasta sekä teknisesti johdonmukaista että käyttäjäystävällistä.
Lopulta typografian suunnittelu on yhdistelmä tarkkaa teknistä ymmärrystä ja luovaa silmää. Kun nämä kaksi kohtaavat, syntyy sivusto, joka on sekä visuaalisesti miellyttävä että aidosti saavutettava kaikille käyttäjille.
Suhteellisuuden hyödyt tiiviisti
- Saavutettavuus: Sivuston teksti skaalautuu automaattisesti käyttäjän selaimen asetusten mukaan, mikä parantaa luettavuutta ja saavutettavuutta.
- Ylläpito: Voit muuttaa koko sivuston fonttikokoa yhdellä arvolla (esim. muuttamalla html- tai body-elementin rem-prosenttia).
- Johdonmukaisuus: Kaikki typografiset elementit skaalautuvat samassa suhteessa, jolloin sivuston visuaalinen rytmi pysyy tasapainoisena.
- Responsiivisuus: Suhteelliset arvot mukautuvat automaattisesti eri näyttökokoihin ilman erillisiä mobiili- tai tablettiasetuksia.
- Teeman ja editorin yhteensopivuus: Kun sekä teema että Elementor käyttävät suhteellisia arvoja, ne eivät riitele keskenään, vaan periytyvät loogisesti.
- Tulevaisuuden kestävyys: Jos selainten oletusfonttikokoja tai saavutettavuusvaatimuksia muutetaan, sivusto mukautuu automaattisesti ilman koodimuutoksia.
Fontit paikallisesti
Miksi paikalliset fontit?
Kun sivuston typografia on suunniteltu ja valitut fontit on päätetty, seuraava askel on miettiä, miten fontit kannattaa ladata käyttäjän selaimeen. Moni sivusto hyödyntää ulkoisia palveluita, kuten Google Fonts-fonttikirjastoa, jonka fontteja onkin tarjolla jo suoraan Elementorissa sivuja editoidessa. Suoraan käytettynä fontit haetaan Googlen palvelimilta aina sivun latautuessa. Tämä on helppo ratkaisu, mutta ei aina paras mahdollinen. Sivuston suorituskykyä ja tietosuojaa voidaan parantaa merkittävästi lataamalla fonttitiedostot omalle palvelimelle ja tarjoamalla ne sieltä käsin.
Ladataan sivustollemme käyttöön seuraavanlaiset fontit. Klikkaa linkkiä ja lataa fontit Google Fonts -palvelusta.
- Otsikot H1, H4-H6: Caudex (Google Fonts)
- Otsikkotaso H3, Navigointi, painikkeet: Open Sans (Google Fonts)
- Leipäteksti, : Alegreya Sans (Google fonts)
Mistä fonttitiedostot hankitaan
Useimmat verkkosivustoilla käytettävät fontit ovat saatavilla useissa eri tiedostomuodoissa. Google Fonts tarjoaa mahdollisuuden ladata fontit ZIP-pakettina, jolloin mukaan tulee yleensä WOFF– ja WOFF2-muotoiset tiedostot.
- WOFF2 on nykyaikainen ja tehokas formaatti, jota kannattaa käyttää ensisijaisesti.
- WOFF toimii vararatkaisuna vanhemmille selaimille.
Ladattaessa fontteja muualta, kuin Google Fonts-palvelusta on hyvä varmistaa lisenssiehdot. Google-fontit ovat avoimia ja vapaasti käytettävissä myös kaupalliseen tarkoitukseen, mutta muiden palveluiden kohdalla lisenssi voi rajoittaa fontin käyttöä. Fontteja tarjoavista palveluista kerrottiinkin jo aiemmin näillä sivustoilla artikkelissa 2.1 Typografia
Joskin Woff-tiedostomuotojen käyttäminen on suositeltua, WordPress ei tällä hetkellä (2025) salli tiedostomuotojen lataamista turvallisuussyistä. Tiedostojen lataaminen on sallittava, joka muokkaamalla functions.php-tiedostossa tai sallimalla lataaminen lisäosan avulla. Tällä kurssilla keskitytään siis .ttf-tiedostoihin.
Voit lukea tarkemmin Woff ja Woff2-tiedostomuotojen sallimisesta ChatGPT-keskustelusta.
Elementor perusversion rajoitukset
Elementorin perusversio ei tarjoa sisäänrakennettua mahdollisuutta ladata omia fontteja, mutta tämä onnistuu helposti erillisen lisäosan avulla. Käytännössä prosessi etenee niin, että fontti ladataan ensin Google Fonts -palvelusta omalle tietokoneelle, muunnetaan tarvittaessa verkkokäyttöön sopivaan muotoon ja tuodaan sitten WordPressin mediakirjastoon. Tämän jälkeen lisäosa huolehtii siitä, että fontti tulee Elementorin käyttöön ja näkyy editorin fonttilistassa.
Asennetaan sivustolle käyttöön lisäosa:
- Custom Fonts: Lisäosa on tarkoitettu sivustojen tekijälle, joka haluaa ladata fontit paikallisesti ja ottaa käyttöön sivustolla. Lisäosa hoitaa kaiken teknisen puolen fontin asentamisesta sivuston käyttöön mediakirjastosta.
Katso myös havainnevideo fonttien lataamisesta Google Fonts-palvelusta ja paikallisten fonttien ottamisesta käyttöön WordPressissä.
Lataa harjoitussivustolla käytettävät fontit Mediakirjastoon
.ttf-tiedostomuodossa. Kaikki käytettävät tiedostomuodot löytyvät Google Fonts -palvelusta
Custom Fonts-lisäosan käyttäminen
Lisäosa Custom Fonts on kätevä tapa asentaa sivustolla käytettävät fontit. Opetellaan seuraavaksi, kuinka fontit otetaan käyttöön sivustolla lisäosan avulla. Lataa lisäosa, ota käyttöön ja lähdetään asentamaan fontteja sivuston käyttöön. Avaa Custom Fonts-asetukset auki WordPress ohjauspaneelista. Ne löytyvät Ulkoasu (Appearance) -valinnan alta.
Add New Font – Fontin lisääminen
Klikkaa Add New Font -painiketta keskellä näyttöä, jolloin avautuu fontin lisäämissivu.
Tee seuraavat toimenpiteet:
- Nimeä fontti: Ladataan ensin harjoitussivun leipätekstissä käytettävä fontti. Nimeä fontti esimerkiksi ”Perusfontti”.
- Valitse fonttitiedosto: Klikkaa Choose File -painiketta, joka avaa Mediakirjaston
- Lataa fonttitiedosto: (
.ttf-tiedosto) mediakirjastoon - Klikkaa oikeassa alakulmassa olevaa painiketta Use Font
- Fontin variaatiot: Leipätekstissä käytetään myös eri variaatioita (esim. lihavoitu 600 tai italic), joten klikkaa Add Font Variations -linkkiä
- Lataa fonttitiedostot fontista: Edellisten kohtien tavoin lataa fonttitiedostot Mediakirjastoon ja ota käyttöön lisäosan asetuksissa
- Aseta fonttien tyylit: Aseta kustakin fontista sen tyylit Font Style ja Font Weight asetukseen
- Lataa myös otsikkojen ja muiden elementtien fonttitiedostot edellisten kohtien mukaisesti
- Klikkaa Fonttien (Font Name) valmistuttua aina Save Font-painiketta, joka tallentaa asetuksen.
Testaa Elementorissa
Siirry seuraavaksi Elementorin Site settings -toimintoon. kokeile valita Body-asetuksiin fontti ja huomaat, että listassa on tarjolla juuri asettamiasi fonttivaihtoehtoja. Valitse niistä leipätekstille tarkoitettu fontti käyttöön leipätekstille.
Sisältöelementit typografia
Olemme asettaneet sivustolle perustypografian ja seuraavaksi jatketaan erilaisten sisältöelementtien (leipäteksti, otsikot, menuvalikko, painikkeet jne.) typografian asettamisella. Hairy-do sivuston sivustosuunnitelmassa on määritelty sivustolla käytettävät fontit, joten avaa dokumentti.
Otsikot ja leipäteksti
Luo sivustolle uusi tyhjä sivu ja lisää sisältöön tekstielementeillä kaikki otsikkotasot ja jokaisen otsikon alapuolelle voit kopioida oheisen pätkän Lorem Ipsum-tekstiä
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur, lectus porta vulputate faucibus, ipsum leo congue nisi, eu ultricies massa arcu eu lacus. Duis porta neque vel nisi blandit, at iaculis ex tristique. Integer laoreet et orci sit amet scelerisque. Duis dictum nisi non lectus luctus mattis. Sed luctus libero vel lacus venenatis, sodales pharetra turpis egestas. Fusce eu diam id metus placerat semper.
Pellentesque purus ligula, pretium non nunc vitae, tincidunt pulvinar nulla. Ut laoreet cursus scelerisque. Quisque cursus, diam id aliquam auctor, sem nisl blandit dolor, sed iaculis eros tortor sed purus. Ut id mattis augue. Mauris finibus mollis mi eu convallis.
Otsikoiden ja leipätekstin typografia asetetaan Elementor-editorin sivuston laajuisista (Site Settings/Typography) asetuksista.
Aseta kaikille otsikkotasoille ja leipätekstille typografia asetuksista ja pyri selkeään hierarkiaan otsikoiden ja leipätekstin välillä.
Painikkeet
Painikkeiden typografia ja muotoilut asetetaan myös Elementorin Site Setting -asetuksista. On tärkeä muistaa, että sivustoon intuitiivisen käytettävyyden nimissä kaikki sivuston painikkeet tulisi olla samanlaisia. Siksi muotoilut asetetaan sivustonlaajuisesti.
Lisää sivulle painike. Avaa Site Setting, jollei se ole jo auki ja valitse alkuvalikosta Buttons. Muokkaa painikkeiden typografia ja muotoilu suunnitelman mukaiseksi.
Ylätunniste
Elementor-editorin ilmainen versio ei salli ylätunisteen muotoilua. Muotoiluja ei kuitenkaan tarvitse CSS:llä luoda, sillä onneksemme Kadence-teeman asetuksista löytyy tarvittavat asetukset ylä- ja alatunnisteelle. Jos olet vielä Elementorin Site Setting-asetuksissa, tallenna muutokset ja siirry sivun esikatseluun. Klikkaa Mukauta-painiketta ja siirry teeman mukauttamiseen. Valitse valikosta Header ja avautuvasta näkymästä Primary Navigation. Välilehdeltä DESIGN löydät navigointivalikon typografian asetukset Navigation Font
Aseta Navigaation typografia sivustosuunnitelman mukaisesti.