Siirry sisältöön

14.5.0

Fontit verkkoilmeessä

Selkeästi erottuvat kirjaimet, tekstielementtien väljä sommittelu ja verkkofonttien laaja kielituki mahdollistavat sen, että verkkopalveluihin valittu typografia toimii selkeän kielen jatkeena ja olennaisen tiedon välittäjänä.

Fontit Kannan verkkoilmeessä

Verkkoilmeen typografia pohjautuu Kannan brändikirjassa linjattuihin kirjaintyyppeihin. Kannan verkkopalveluiden typografinen ilme perustuu vahvaan ja näyttävään otsikkofonttiin sekä helppolukuiseen sisältöfonttiin. Molemmissa fonteissa muotokieli on modernia ja selkeää.

Kannan verkkopalvelujen typografia perustuu kahteen päätteettömään (sans serif) fonttiin:

  • otsikoissa kirjaintyyppi on Montserrat ja
  • muussa tekstissä kirjaintyyppi on Nunito.

Saavutettavuutta tukee esimerkiksi kirjainmerkkien hyvä erottuvuus toisistaan. Valituissa fonteissa erottuvuutta parantavat klassisen a-kirjaimen käyttö, ligatuurien vähyys sekä tarkkeiden, kuten ä- ja i-kirjaimen pisteiden, selkeä erottuvuus.

Hyvää käytettävyyttä tukee muun muassa fonttien joustava skaalautuvuus eri kokoihin sekä laaja merkistötuki, jolloin fontteja on mahdollista käyttää myös inarinsaamen ja pohjoissaamen kielillä.

Jos Kanta-fontit eivät jostain syystä lataudu selaimessa oikein, varafonttina toimii teknisiltä ominaisuuksiltaan Nunitoa vastaava Arial.

Kelan verkkoilmeessä sovellettavat kirjaintyypit.
Kelan verkkoilmeessä sovellettavat kirjaintyypit ovat Noto Sans (otsikot) ja Lato (muu teksti).

Otsikkofontti - Montserrat

Montserrat on visuaalisesti näyttävä fontti, jossa yhdistyy 1900-luvun alun julisteiden näyttävyys ja moderni, urbaani muotokieli.

Montserrat jo itsessään toimii visuaalisena tehokeinona ja katseenvangitsijana, joten pyri käyttämään otsikointeja harkitusti varsinkin muiden visuaalisten tehokeinojen, kuten kuvakkeiden ja ikonien yhteydessä.

Sisältöfontti - Nunito

Sisältöteksteissä käytettävä Nunito on Montserratiin verrattuna tyyliltään yksinkertaisempi ja pyöreämpi, jolloin se luo muotokontrastia Montserratin teräväkulmaisuuden kanssa.

Nunito soveltuu hyvin komponentteihin ja sisältötekstiin, sillä se skaalautuu hyvin ja pysyy fontin koosta huolimatta selkeänä ja helppolukuisena. Fontin skaalautuvuuden merkitys korostuu erityisesti mobiilikäytössä.

Tekstin väri

Otsikoissa sovelletaan pääsääntöisesti sävyä kanta-blue-80 (#003e54) pehmentämään fontin vahvaa leikkausta vaaleita taustoja vasten.

Leipätekstissä on suositeltavaa soveltaa sävyä kanta-gray-100 (#171717), jos sisältöalueen taustaväri on puhdas valkoinen.

Värillisen taustan päälle asetellun tekstin sävyn valinnassa tulee varmistaa, että tekstin ja taustan kontrastiero täyttää saavutettavuuskriteerien mukaisen minimivaatimuksen. Sävyn tummuutta kuvaavien asteikkonumerojen erotuksen tulee olla vähintään 50.

Linkkivärinä käytetään pääsääntöisesti sävyä kanta-blue-60 (#007496). Lisätietoja linkeistä löydät yleisistä linkkiohjeista ja Link-komponentin ohjeista.


Fonttien kielituki

Kannan verkkopalvelujen fonttiperheet tukevat suomen-, ruotsin- ja englanninkielistä sekä pohjoissaamen ja inarinsaamen merkistöä.

Koltansaamenkielisten verkkopalvelujen otsikko- ja sisältöfontiksi on määritelty Arial, jonka merkistö sisältää myös koltansaamen erikoismerkit. Arial -kirjainperhettä käytetään vain koltansaamenkielisissä käyttöliittymissä ja verkkosisällöissä.