2.3. Värit ja typografia
Luovuutta ja tekniikkaa
Verkkosivujen typografia käsitteenä kattaa kaikki sivustolla olevan tekstisisällön muotoilun ja värit luovat sivuston tunnelman ja mielikuvia selaajalle. Sivuston fonttivalinnat voivat olla ja niillä pyritään eleganttiin/esteettisesti tyylikkääseen tekstin ulkoasuun ja värimaailmalla viestitetään sivuston aiheen tai yrityksen imagoa. Parhaimmillaan sivuston typografia ja värit luovat yhdessä selaajalle kokemuksen sivustosta jo ennenkuin sanaakaan sivuston sisällöstä on luettu. Typografia ja värit toimivat siis ikäänkuin tunnelman luojana asiasisällölle ja toimii tekstissä hieman kuin äänenpaino puheessa. Hyvän sivuston toteuttaminen vaatii siis sekä luovaa näkemystä että teknistä osaamista.
Sisältö on tärkein
Tulee muistaa, että vaikka sivuston näyttävyys on hieno asia, sisältö on kuitenkin aina ensisijainen. Tyylit (värit/typografia) vain tukevat sitä. Fonttivalinta on siis ennenkaikkea tyylivalinta eikä sen kuulu kilpailla asiasisällön laadun kanssa.
Sivuston sisältö ja sen luonne voidaan katsoa tuovan ajatuksia millainen sivuston fonttityylit ja värimaailma voisivat olla.
Verkko- vs. painojulkaiseminen
Verkkosivuilla typografian suunnittelu eroaa painojulkaisusta melkoisesti ja siinä on omat haasteensa. Tekstien luettavuus on suunniteltava toimivaksi erikokoisilla laitteilla ja selaimilla. Pelkästään näyttölaitteden koot vaihtelevat pienestä kännykän näytöstä suurikokoisiin screeneihin. Painojulkaisussa julkaisualusta on kooltaan staattinen. Dokumentti suunnitellaan tietylle painettavalle paperikoolle tai muuhun kohteeseen, eikä sen koko muutu.
Fontit
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.
Kuvissa: Pääteviivallinen (Serif) ja pääteviivaton (Sans-serif) fonttityypit.
Tekstityypit HTML:ssä
Verkkosivuilla, kuten teksteissä yleensä, sisällön rakenteessa tulee noudattaa yleisesti tunnettua tyyliä, jossa pääotsikko kertoo sisällön parilla sanalla ja itse tekstisisältö jaetaan osiin alaotsikoilla. Verkkojulkaisemisessa pääotsikon otsikkotaso on <h1> ja niitä on sivuilla vain 1 kappale.
Alaotsikkojen otsikkotasoja ovat <h2> – <h6>. Toisin kuin pääotsikkotasoa alaotsikoita voidaan käyttää tekstisisällössä vaihtelevasti. Otsikkotasojen käytössä kannattaa kuitenkin pitää mielessä tietynlainen hierarkia, josta lisää myöhemmin.
Leipäteksti on sivun tekstisisältöä eli tekstikappaleita otsikkojen välillä ja se merkataan html-koodissa verkkosivuilla tagilla <p>.
Sivuston sivuilla voidaan käyttää myös lehtipainatuksesta tuttua ingressiä, jossa tavallisesti käytetään vahvennettua leipätekstiä (<strong> tai <b>). Ingressi on lyhennelmä tekstistä ja sitä käytetään kertomaan lyhyesti artikkelin sisältö yhden kappaleen pituisella tekstillä. Tälläkin sivulla on käytetty ingressiä sivun yläosassa, jonka tarkoituksena on kiteyttää sivun sisältö sivun alkuun ja johdattaa lukija aiheeseen.
<h1>Mrs. Text Block</h1>
<b>I have lot to say and still I say nowt.. This is some weird text called <i>ingressi</i> in something called Finnish language..?</b>
<p>I am text block. Click edit button to change me... Wait, there is no button so forget it.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
Palanen tekstikoodausta html-tageilla varustettuna. Huomaat, kuinka tekstissä on käytetty kerran Otsikkotagi <h1> ja seuraavan alaotsikon otsikkotaso on kooltaa pääotsikkotasosta seuraava <h2>.
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.
Arial
Arial on ehkä suosituin verkossa käytetty fontti. Sitä käyttävät sadat tuhannet sivustot, kuten järkälemäiset Google, Facebook ja Amazon. Alun perin se on luotu käytettäväksi IBM:n lasertulostimissa, ja tämä web-turvallinen fontti on yksi parhaista vaihtoehdoista erittäin luettavaan käyttöliittymään.
Arial ei ehkä ole kaunein vaihtoehto mutta silti se on erittäin laajalti käytetty luettavuuden takia.
Lato
Lato on Google-fontti, joka on alun perin suunniteltu yritysasiakkaalle. Fontti yksi verkon suosituimmista kirjasintyypeistä. Latoa käytetään verkkosivustoilla, kuten Goodreads, WebMD ja Merriam-Webster.
Lato-fontti on melko samanlainen kuin Arial mutta se tuo tekstiin ehkä hieman lempeämmän tunnelman.
Open Sans ja Open Sans Condensed
Googlen mukaan Open Sans kehitettiin ”suoralla painoarvolla, avoimilla muodoilla ja neutraalilla, mutta silti ystävällisellä ulkonäöllä”. Open Sansia käytetään joillakin Googlen verkkosivuilla sekä sen painetuissa ja verkkomainoksissa. Se on Yhdistyneen kuningaskunnan työväen- , osuuskunta- ja liberaalidemokraattien virallinen fontti. Open Sans fontista on myös kavennettu (Condensed) versio, joka sopii erinomaisesti otsikoihin. Leikkaukseksi valitsen itse otsikoissa light-version mutta se on täysin makukysymys.
Fira Sans ja Fira Sans Condensed
Fira Sans on Uuden-Seelannin ja Islannin hallituksen suosikkikirjasin. Fira fontista luotiin vuonna 2015 myös kavennettu Condensed versio, jonka voit nähdä tämän tekstikappaleen otsikossa. Mozilla-yhtiön mukaan se halusi Fira-nimellä kommunikoida tulen, valon ja ilon käsitteitä, mutta kieliagnostisella tavalla viestiäkseen projektin globaalista luonteesta.
Montserrat
Montserrat on Googlen kirjasin, joka on saanut inspiraationsa Buenos Airesin Montserratin kaupunginosasta 1900-luvun alun kylteistä.
Fontti on tyyliltään eloisa ja kaunis ja suunniteltu erityisesti nopeaa lukemista varten, joten se toimii todella hyvin pienemmässä tekstissä verkossa. Montserrat-fontti on laajalti käytetty fonttityyli ja turvallinen valinta myös leipätekstiin.
Roboto
Kun maailmamme yhdistetään ja teknologisesti kehittyy, tulee yhä enemmän verkkosivustoja, jotka hyötyisivät Roboton kaltaisista kirjasintyypeistä. Vaikka tässä kirjasintyylissä on tekninen, konemainen tunnelma se luo mielenkiintoisen typografian esimerkiksi leipätekstin fonttina.
Roboto on alun perin Googlen suunnittelema Android-järjestelmän fontiksi ja se on käytössä sivustoilla, kuten YouTube.
Kavennettu Roboto Condensed kavennettu versio
Roboto fontista on olemassa myös kevyesti kavennettu versio Roboto Condensed. Kirjasimen kavennus on omaan silmään hiuksen hieno, kuten tämän kappaleen otsikosta voi havaita.
Merriweather Sans
Merriweather Sans on pääteviivaton versio Merriweather fontista ja fontin voi löytää Google Fonts -fonttivalikoimasta. VOit kokeilla otsikoissa pääteviivatonta leikkausta ja asettaa leipätekstiin pääteviivallisen leikkauksen sillä ne on suunniteltu sopimaan yhteen.
Lora
Lora on nykyaikainen serif- pääteviivallinen fontti. Tyyliltään se on hienostuneen koristeellinen ja luo leipätekstissä ja otsikoissa taiteellisemman tunnelman kuin muut pääteviivalliset fontit.
Sellaisenaan se toimii todella hyvin uutis- ja viihdesivustojen leipäteksteissä ja sitä käytetäänkin tunnetuilla uutissivustoilla kuten FOX News ja Urban Dictionary.
Merriweather
Merriweather on Google-fontti, joka on suunniteltu erityisesti parantamaan luettavuutta näytöillä. Näet todisteita tästä sellaisilla verkkosivustoilla, jotka käyttävät Merriweatheria kappaleiden tyyliin, kuten Goodreads, Coursera ja Harvard.edu.
Merriweatherilla on myös sans serif -vastine, joten jos olet rakentamassa blogia tai muuta tekstitiheää verkkosivustoa, näiden kahden kirjasimen yhdistäminen toimisi hyvin keskittyessäsi tekstiin eikä ympäröiviin häiriötekijöihin.
Spectral
Spectral on melko uusi fontti ja sen voi löytää Google Fonts-palvelusta, Spectral ansaitsee paikan kirjasimien kauniiden muotoilujen ansiosta. Erityisen mukavaa tässä fontissa on se, että se tuntuu vähemmän raskaalta kuin monet muut pääteviivalliset fontit. Kiinnitä huomiosi esimerkiksi ”j”:n lempeään kaareen tai ”f”-kirjaimen yläkaaren siroon kaartumiseen.
Kirjasinperheessä on 14 eri tyyliä, joten yksinkertainen serif on käytettävissä useilla eri tavoilla.
Mistä fontteja?
Fontteja voidaan löytää useasta eri palveluista ja usein ne ovat ilmaiseksi käytettävissä vapaasti sivustolla. Hyviä fonttilähteitä ovat mm. Google FOnts ja Font Squirrel. Palveluista löytyy tuhansia fontteja mistä valita ja fontit ladataan omalle koneelle .zip-tiedostona, joka sisältää itse font-tiedostot, jotka voidaan asettaa oman teeman kansioon ja ottaa käyttöön sivustolla.
Ladataan sivustollemme käyttöön seuraavanlaiset fontit typografiaa varten. Klikkaa linkkiä ja lataa fontit sivustoilta.
- Otsikot H1, H4-H6: Caudex (Google Fonts)
- Otsikkotaso H3, Navigointi, painikkeet: Open Sans (Google Fonts)
- Otsikkotaso H2: Open sans condensed (Font Squirrel)
- Leipäteksti, : Alegreya Sans (Google fonts)
Typografian lisääminen
Typografia lisätään CSS-tiedostoon siten, että määritetään sivun body -osalle staattinen fontin koko pikseleinä (px) ja muut fonttikoot kannattaa määrittää suhteellisena arvona body:n staattiseen kokoon verrattuna. Suhteellisen koon määre on ”rem”, jossa 1rem on sama, kuin body-osaan asetettu fontin koko.
”Remmin” hyötyjä?
Typografia lisätään CSS-tiedostoon siten, että määritetään sivun html-tagille (<html>) staattinen fontin koko pikseleinä (px) ja muut fonttikoot kannattaa määrittää suhteellisena arvona body:n staattiseen kokoon verrattuna. Suhteellisen koon määre on ”rem”, jossa 1rem on sama, kuin body-osaan asetettu fontin koko.
- Skaalautuvuus ja saavutettavuus
- Käyttäjä voi muuttaa selaimen fonttikokoa (esim. esteettömyysasetuksista), ja rem skaalautuu automaattisesti.
- Jos käyttäjä asettaa selaimen fontin isommaksi, sivustosi pysyy käytettävänä.
- Johdonmukaisuus typografiassa
- rem-arvo antaa yhtenäisen vertailukohdan riippumatta siitä, missä elementissä sitä käytetään.
- em taas perustuu vanhemman elementin fonttikokoon, mikä voi tehdä laskemisesta monimutkaisempaa.
- Helpompi käyttää
- Responsiivinen suunnittelu helpottuu, koska voit asettaa sivun juurielementille (body) media-kyselyllä (@media) juurielementille toisen arvon, jolloin kaikkien rem elementtien koko muuttuu tietyssä näyttöresoluutiossa.
Fontit käyttöön
Kun ollaan asetettu perustypografia, fontit täytyy ottaa myös käyttöön ja ladata sivuston tiedostoihin. Metodissa käytetään fontteja paikallisesti omalta palvelimelta käsin.
Miksi paikallisesti?
Kun fonttitiedostot ovat oman teeman kansiossa ja niitä käytetään sivustolla teemasta, metodia kutsutaan nimityksellä paikalliset fontit. Tällöin varastoidaan fontit sivustolle paikallisesti. Toinen vaihtoehto on, että sivusto lataa fontit esimerkiksi Googlen palvelimelta sivuston käyttöön tarvittaessa. Sivuston lataamisen kannalta fonttien paikallinen varastointi on suositeltavaa. Turha fonttien lataaminen verkon yli jää pois. Siksi harjoitellaankin harjoitussivustollamme fonttien lisäämistä paikallisesti.
1. Lataa fontit teemaan
Kun olet ladannut sivustolla käytettävät fontit, tulee päättää mitä leikkauksia fonteista tullaan käyttämään sivustolla. Joissain ladatuissa fonteissa on jopa yli 10 erilaista leikkausta fontista. Jos fontista on kuitenkin olemassa ”Variable”-tiedosto, se sisältää kaikki leikkaukset fontista yhdessä tiedostossa ja sitä kannattaa käyttää sivustolla. Näin voit valita vapaasti mitä leikkausta fontista käytät.
2. Ei ttf vaan woff2
Variable-tiedosto kannattaisi olla .woff2 tiedostomuodossa sillä se on optimoidumpi muoto käytettäessä webissä. Useassa ladatussa fontissa tiedostomuotona on .ttf se kannattaa muuntaa .woff2-tiedostomuotoon esimerkiksi Cloudconvert nimisessä palvelussa.
4. Woff ja Woff2 tiedostomuotojen haasteet
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 lataamienn lisäosan avulla. Tällä kurssilla keskitytyään siis .ttf-tiedostoihin. Voit lukea tarkemmin Woff ja Woff2-tiedostomuotojen sallimisesta ChatGPT-keskustelusta.
5.Käytä lisäosaa fonttien lisäämiseen
Lisäosa Custom Fonts on kätevä tapa asentaa sivustolla käytettävät fontit. Lataa lisäosa, ota käyttöön ja lähdetään asentamaan fontteja sivuston käyttöön.
Väreillä voidaan asettaa tunnelmia
Väreillä voidaan herättää huomioa
Värit
..kertovat asioita
..viestittävät
..antavat ymmärtää
Väreillä voidaan energisoida…
..saada aikaan rauhallinen, lämmin tunnelma
Värit ja väriteoria
Sir Isaac Newton kehitti ensimmäisen väriympyrän vuonna 1666 ja se perustui punaiseen, keltaiseen ja siniseen perusväriin. Väriympyrän ideana on, että se on jaettu lohkoihin, joissa on kolme pääväriä ja niiden välisissä lohkoissa reunustavista pääväreistä sekoitettuja värejä. Sir Newtonin kehittämässä väriympyrässä väreinä olivat punainen (R), keltainen (Y) ja sininen (B) ja se perustui maalien sekoittamiseen. Uudempia väriympyröitä ovat RGB ja CMYK, joista näyttölaitteissa käytetään RGB (red, green, blue) värejä.
Sivustoille on hyvä suunnitella väriskaala. Tavallisimmin väriskaalaan kuuluu viisi väriä, jotka sointuvat toisiinsa. Värejä suunnitellessa kannattaa kiinnittää huomio värien sopimiseen keskenään. Väreillä voidaan maalailla tunnelmia, jotka tukevat sivuston sisältöä.
Koska verkkosivuja luetaan valoon perustuvissa näyttölaitteissa (tietokoneet, puhelimet jne.), niiden värit perustuvat RGB-värimalliin. RGB-värimalli on luonteeltaan lisäävä (additive) ja painojulkaisujen CMYK-malli vähentävä (substractive). Lisäävyyden käsitettä voi ajatella kolmena värillisenä lamppuna, joiden värin määrää säätämällä saavaan aikaan erilaisia sävyjä. Oheisen kuvan mukaisesti punaisen ja vihreän valon yhdistämisestä syntyy keltainen väri, punaisen ja sinisen taas magenta.
Värien määrittely
Värien muodostumisesta ja suunnittelun avuksi on kehitetty väriympyrät. Niiden avulla voidaan oppia ymmärtämään värien välisiä suhteita ja värien anatomiaa paremmin. Väriympyrässä on kolme pääväriä, joiden välisiin osiin on sijoitettu pääväreistä sekoitettuja toissijaisia ja kolmansia värejä.
Ympyrässä jaetaan siis värit kolmeen luokkaan:
- Päävärit, jotka ovat kaikkien muiden värien perusta
- Toissijaiset värit, jotka syntyvät sitä reunustavista pääväreistä
- Kolmannet värit taas syntyvät sen vieressä olevista pää- ja toissijaisista väreistä sekoittamalla.
Väriympyrään pohjautuvia työkaluja löytyy verkosta useita, joihin kannattaa tutustua. Yksi työkaluista on Adobe Color, jossa määritellän yksi pääväri ja sen avulla voidaan hakea siihen mahdollisesti sopivia värisävyjä. Työkalu saattaa auttaa väriskaalan määrittelemisessä melkoisesti ja sitä kannatta hyödyntää.
Adobe Colorissa voi hakea väriskaalaa myös kuvasta, joka on yksi hyvä ja mielenkiintoinen tapa hakea sopivaa väriskaalaa sivustolle tai sivuston elementteihin.
Työkaluja värisuunnittelun avuksi
Värit asetetaan verkkosivujen koodauksessa joko RGB-triplettinä rgb( r , g , b ) tai hexadesimaalina.
RGB-tripletissä kukin komponentti voi vaihdella nollasta määriteltyyn maksimiarvoon 255. Jos RGB-tripletissä kaikki arvot on asetettu maksimiarvoon 255 ( ”kaikki lamput päällä”: rgb(255,255,255) ) lopputuloksena on valkoinen väri. Jos taas arvona on rgb(0, 0, 0) kaikki ”lamput ovat pimeänä” eli lopputulos on musta.
RGB-tripletissä voidaan esittää myös läpinäkyvyys neljäntenä arvona, jolloin määritys on muodoltaan rgba(255, 255, 255, 0.6). Määrittelyssä a edustaa läpinäkyvyyttä ja määrityksessä edellä, läpinäkyvyys valkoisella värillä on 60% (0.6). Huomaa, että arvossa käytetään pistettä pilkun sijaan.
Värien muotoihin ja merkintöihin sekä värien käyttäytymiseen voidaan tutustua hyvin kuvankäsittelyohjelman värivalintaikkunan avulla (kuva), jossa RGB-kohdassa asetetaan arvot eri väreille ja alaosassa voit nähdä värin hexadesimaalimuodossa.
Hexadesimaali on muodoltaan joko kolmimerkkinen tai kuusimerkkinen. Valkoinen väri on muodoltaan #FFF tai #FFFFFF. Mustaa voidaan merkitä joko merkinnällä #000 tai #000000. Merkinnässä on jokaisella kolmella värillä hexadesimaalimuoto yhdellä tai kahdella merkillä.
Esimerkki CSS-muotoilun erilaisista värimäärittelyistä
.text-element {
display: block;
width: 600px;
height: auto;
color: rgb(0,20,120);
background-color: rgba(33, 150, 243, 0.55);
border: 1px solid #9c27b0;
font-size: 24px;
border-radius: 10px;
padding: 10px;
}
Tässä tekstikappaleessa on käytetty oheisia CSS-määrityksiä, joten sen tekstin, taustan ja reunaviivan värit määräytyvät CSS-määrittelyiden mukaisesti.