Värien ja fonttien valinta verkkosivustolle

01Miksi värit ja fontit ovat niin tärkeitä?

Kävijä havaitsee värit ja kirjainten muodon ennen kuin ehtii lukea sivun tekstiä. Ensivaikutelma muodostaa nopean käsityksen siitä, onko yritys vakavasti otettava, lämmin, uudistuva vai luotettava.

Värit ja typografia eivät ole vain esteettisiä valintoja: niillä on suora vaikutus luettavuuteen, saavutettavuuteen ja konversioon. Himmeänharmaa teksti voi näyttää tyylikkäältä, mutta jos sitä ei voi lukea, kävijä poistuu sivulta. Epäselvän värinen painike taas hukkaa tärkeimmän toiminnon.

Siksi väri- ja fonttivalinnat ovat perusratkaisuja, jotka tehdään ennen kuin muu sivusto suunnitellaan. Ne kuuluvat UI/UX-suunnittelun ensimmäisiin vaiheisiin.

02Paletin rakentaminen brändin väreistä

Jos sinulla on logo ja painettuja materiaaleja, väripaletin lähtökohta löytyy niistä. Etenkin yrityksen kotisivut ovat brändin digitaalinen kasvot: jos käyntikortissa väri on tummansininen, näytöllä se ei saa näkyä oranssina. Jos visuaalinen ilme ei ole vielä selvä, on järkevämpää laskea perusta ensin brändinhallinnan avulla.

Brändin värit eivät yleensä riitä verkkopaletiksi. Pääsävyn lisäksi tarvitaan sävyt taustalle, tekstille, reunoille sekä varoitus- ja onnistumistiloille. Hyvä verkkosuunnittelun väripaletti koostuu seuraavista kerroksista:

• Pääväri: brändin väri; otsikoissa, valikossa ja korostetuilla alueilla.
• Korostusväri: painikkeisiin ja linkkeihin eli toimintakehotuksiin; pääväriin sopiva mutta siitä erottuva sävy.
• Neutraalit sävyt: neljä tai viisi sävyä valkoisesta tummanharmaaseen taustoille ja tekstille.
• Tilavärit: punainen virheelle, vihreä onnistumiselle ja keltainen varoitukselle; lomakkeissa ja ilmoituksissa.

60-30-10-sääntö

Sisustussuunnittelusta tuleva käytännön sääntö toimii myös verkossa: noin 60 prosenttia pinnoista on neutraalia taustaa, 30 prosenttia pääväriä ja toissijaisia alueita ja 10 prosenttia korostusväriä. Suhde ei ole pakko, vaan tasapainon apuväline, joka estää värin tukehduttamasta sivua.

Suojele korostusväriä

Jos korostusväriä käytetään kaikkialla, se menettää arvonsa. Kun Pyydä tarjous- tai Soita heti -tyyppisille päätoiminnoille varattua väriä ei käytetä koristeena, kävijän katse ohjautuu oikeaan paikkaan.

03Kontrasti ja saavutettavuus

Värivalinnassa useimmin sivuutettu asia on kontrasti. WCAG-ohjeiden mukaan tavallisen tekstin ja taustan välillä pitää olla vähintään 4,5:1 kontrastisuhde ja suurella tekstillä vähintään 3:1. Valkoinen teksti vaaleanharmaalla tai vaalea teksti pastellitaustalla jää tämän rajan alle.

Tarkista kontrasti mittaamalla, älä arvaamalla. Selainten kehittäjätyökalut ja ilmaiset kontrastintarkistimet näyttävät kahden värin suhteen heti. Älä myöskään anna tietoa pelkällä värillä: ilmoita lomakekentän virheestä punaisen reunan lisäksi selittävällä tekstillä.

04Kuinka paljon väripsykologiaan voi luottaa?

Usein sanotaan, että sininen herättää luottamusta, vihreä luontoa ja punainen energiaa. Mielleyhtymät ovat kulttuurisesti yleisiä, mutta eivät yleispäteviä sääntöjä: sama väri voi eri toimialoilla ja eri sävyinä herättää aivan erilaisia tuntemuksia.

Luotettavampi lähestymistapa on tarkastella oman toimialasi tapoja ja luoda tietoinen ero. Jos kaikki kilpailijat käyttävät tummansinistä, saman sävyn valitseminen voi hukuttaa sinut joukkoon; täysin outo väri voi taas herättää epäluottamusta. Useimmiten tasapainoisin tulos syntyy, kun pääväri yhdistetään brändiin ja korostusväri toimintaan.

Valintavaiheessa muutaman ehdokaspaletin soveltaminen samaan etusivun luonnokseen ja vertailu rinnakkain tuottaa tuloksen paljon nopeammin kuin abstrakti keskustelu. Päätä henkilökohtaisen maun sijaan kolmen kysymyksen avulla: muistuttaako väri brändistä, onko teksti helppo lukea ja huomaako pääpainikkeen sivulta ensi silmäyksellä? Jos vastaus kaikkiin kolmeen on kyllä, paletti hoitaa tehtävänsä.

05Miten verkkofontti valitaan?

Verkkofontin valinta on väriä vähemmän puhuttu mutta luettavuuteen enemmän vaikuttava päätös. Ensimmäinen sääntö on rajoittuminen: yksi fontti otsikoille ja yksi leipätekstille eli enintään kaksi fonttiperhettä. Usein riittää yksi perhe eri paksuuksilla.

Erikoismerkkien tuki

Ääkköset å, ä, ö ja muut kielen erikoismerkit on tuettava kokonaan, jotta teksti näyttää oikealta. Jos fontti ei tue niitä, kirjaimet näytetään toisella fontilla ja sanojen keskelle syntyy muotoeroja. Kokeile fonttia ennen valintaa sanoilla kuten Ylä-Savo, Älylaite ja Öljyvuoto; juuri erikoismerkit voivat olla ongelmallisia.

Serif vai sans-serif?

Päätteelliset (serif) fontit antavat klassisen ja tyylikkään vaikutelman ja toimivat hyvin otsikoissa. Päätteettömät (sans-serif) fontit taas luetaan näytöllä puhtaammin etenkin pienissä kokoissa, ja ne ovat yleinen valinta leipätekstiin. Serif-otsikon ja sans-serif-leipätekstin yhdistelmä on yleinen ja tasapainoinen.

06Helppolukuisen typografian mitat

Hyväkin fontti käy rasittavaksi, jos sitä käytetään väärin mitoin. Seuraavat arvot ovat luotettava lähtökohta typografian asetuksille:

07Fontit eivät saa hidastaa sivustoa

Jokainen fonttitiedosto lisää sivun latausaikaa. Viiden eri paksuuden ja kahden fonttiperheen lataaminen viivästyttää ensimmäistä näkymää etenkin mobiiliyhteyksillä. Fonttitiedostojen käyttö WOFF2-muodossa, vain tarvittavien paksuuksien lataaminen ja merkistön rajaaminen latinalaisiin kirjaimiin ja tarvittaviin erikoismerkkeihin pienentää tiedoston kokoa selvästi.

Jotta teksti ei pysy näkymättömänä fontin latautumiseen asti, käytetään font-display-asetusta. Nämä asetukset kuuluvat ensimmäisiin asioihin, joita tarkastellaan nopeus- ja suorituskykyoptimoinnissa. Myös värien määrittely CSS-muuttujina helpottaa paletin hallintaa yhdestä paikasta sekä muunnelmien, kuten tumman teeman, toteuttamista.

:root {
  --renk-ana: #1d3557;
  --renk-vurgu: #e76f51;
  --renk-metin: #1f2933;
  --renk-zemin: #ffffff;
}

@font-face {
  font-family: 'Gövde';
  src: url('/fontlar/govde.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Gövde', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-metin);
  background: var(--renk-zemin);
}

08Valinnan testaaminen

Testaa värit ja fontti oikealla sisällöllä ja oikeilla laitteilla, ei suunnittelutiedostossa. Saman sivun katsominen puhelimella auringonpaisteessa, vanhalla kannettavan näytöllä ja leveällä näytöllä paljastaa ongelmat, jotka eivät näy paperilla.

Johdonmukaisuus on yhtä tärkeää kuin testaus. Kun paletti ja fontti on kerran määritetty, niitä on sovellettava samoilla säännöillä kaikilla sivuston pakollisilla sivuilla. Valmiit pohjat rajoittavat tätä joustavuutta usein; eron kävimme läpi artikkelissamme valmis teema vai räätälöity suunnittelu. Lisää aiheesta löydät brändi-identiteetti-tunnisteen alta.