3.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.
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.
Heksadesimaali 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ä.
Heksadesimaalit
0 1 2 3 4 5 6 7 8 9 A B C D E F
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.
Typografian asettaminen sivustolle
Jos sivustot luodaan koodaamalla, niille voidaan asettaa typografia CSS-tiedostoon. Esimerkiksi Elementor-editorissa on oma metodinsa sivuston laajuisen perustypografian määrittämiselle. Myös teemoissa löytyy teeman mukauttamisessa oma osionsa typografialle eli eri tekstityyppien asetuksille. Sivuston käytettävyyden vuoksi on tärkeää ymmärtää typografian asettamisen perusperiaatteet.
Oletusfonttikoko
Kun selaamme sivustoja internetissä, selaimessa (esim. Google Chrome) on asetettu perusfonttikoko, jonka mukaan sivustojen teksti näkyy, jollei sivuston CSS-muotoilussa ole toisin määrätty. Selaimen oletusfonttikoko on 16px, jollei käyttäjä ole sitä määrittänyt toisin. Sivustolla voidaan määrittää koko lähdekoodin sisäänkietovalle html-osalle fonttikoon määritys, jolloin se ”yliajaa” selaimen oletusfonttikoon ja sivustolla käytetäänkin sivuston asettamaa fonttikokoa selaimen asetusten sijaan. Tämä perusfonttikoko kannattaa asettaa suhteellisena fonttikokona (%) selaimen fonttikokoon 16px nähden. Esimerkiksi font-size:62.5%; tuottaa sivuston perusfonttikooksi 10px (16×0,625).
Mittayksiköt?
Mittayksiköt saattavat olla todella sekava aihe verkkosivustoilla. Valittavana on mittayksiköitä kuten: px, em, rem, vw, vh, %. Näihin törmää esimerkiksi Elementor-editorissa muokatessa fonttikokoa. Mielenkiintoinen asia on, että selaimet ymmärtävät jopa mm (millimetri), cm (senttimetri) sekä in (tuuma) mittayksiköitä mutta niitä käytetään miltei yksinomaan tulostuksen typografian määrittämisessä.
Suhteellinen mittayksikkö
Suhteellisissa mittayksiköissä annettu arvo tuottaa määritelmänsä mukaisesti suhteellisen koon johonkin elementtiä ympäröivän elementin arvoon nähden. Tällä hetkellä eniten käytetty suhteellinen arvo on rem, jota suositellaan käytettäväksi sivuston eri fonttielementtien koon määrityksessä. Muita suhteellisia mittayksiköitä ovat:
- %: Suhteessa ympäröivän elementin kokomääritykseen.
- em: Suhteessa elementin oman tai ympäröivän elementin fonttikokoon. Jos asetat
font-size: 1.5em;ja ympäröivän elementin fonttikoko on 16px, silloin tämä elementti on 1.5 * 16px = 24px. Tämä voi tehdä mittayksiköiden laskemisesta monimutkaista, jos elementtejä on paljon sisäkkäin. - rem: (root em): Suhteessa juurielementin () fonttikokoon. Tämä on suositeltu yksikkö usein fonttikokoihin ja muihin kokoihin, koska se tarjoaa ennustettavan ja yhtenäisen skaalauksen koko sivustolla riippumatta elementtien sisäkkäisyydestä. Jos
html { font-size: 16px; }, silloin 1rem on aina 16px. Edellinen oli kuitenkin vain esimerkki sillä on suositeltavaa asettaa html-elementin koko %-mittayksikössä Sivuston käytettävyyden takia. - ex: Harvemmin käytetty mittayksikkö, joka muodostaa fonttikoon pienaakkos x-kirjaimen mukaan suhteellisesti.
- ch: Harvemmin käytetty mittayksikkö, joka muodostaa fonttikoon nolla (0) numeromerkin leveyden mukaan. Voi olla hyödyllinen esimerkiksi tekstipalstojen hallinnassa.
Absoluuttiset yksiköt
Absoluuttisia yksiköitä ovat px eli pikseliä, joka on yleisin digitaaliseen näyttöön sidottu yksikkö. On myös esimerkiksi tekstinkäsittelyohjelmista tuttu pt, jota käytetään yleisimmin painotuotteissa. Käytännössä verkkosivuilla absoluuttisena mittayksikkönä käytetään pikseliä (px) paitsi edella mainitsemassani tulostustypografian määrittämisessä, jossa käytössä voivat olla mm tai pt, marginaalit cm
Kuinka siis tehdään?
Kaiken nippelitiedon jälkeenvoidaan kiteyttää ajatus perustypografian määrittämisestä seuraavasti:
- Määritetään perusfonttikoko html-elementille %-mittayksiköllä, joka on suhteellinen selaimen asetettuun fonttikokoon.
- Määritetään otsikoiden h1-h6, leipätekstin p, jne. fonttikoot suhteelisella mittayksiköllä rem (root em) joka toimii suhteessa html-elementtin asetettuun fonttikoon määritykseen.
Lyhykäisyydessään asia on näikin yksinkertainen mutta sen taustalla toimii kasapäin erilaisia vaihtoehtoja, asioita ja niiden yhteyksiä.
”Remmin” hyötyjä?
- 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 sillä se muodostaa koon yksiselitteisesti html-juurielementistä. em taas perustuu kohdeelementtiä ympäröivän elementin fonttikokoon, mikä voi tehdä laskemisesta monimutkaisempaa.
- Helpompi käyttää: Responsiivinen suunnittelu helpottuu, koska voit asettaa sivun juurielementille (html) media-kyselyllä (@media) toisen arvon, jolloin kaikkien rem elementtien koko muuttuu tietyssä näyttöresoluutiossa.