Typografia

Suomi.fi:n typografiateema sisältää kooltaan ja tyyliltään määritellyt tekstikomponentit ja tekstitokenit.

Kirjasintyyppi (fontti)

Suomi.fi-tyyleissä ja -käyttöliittymäkomponenteissa käytetty kirjasin Source Sans 3 on open source -fontti, eli kaikki sen leikkaukset ovat ilmaisia ja vapaasti käytettävissäsi (Open Font License). Suomi.fi Design System vastaa fontin jakelusta oman palvelimensa kautta.

Source Sans 3 -kirjasinta käyttävien verkkopalveluiden ei ole tarpeen esittää OFL-lisenssiä palvelussaan erikseen. Tämä perustuu siihen, että OFL-lisensoituja kirjasimia saa käyttää vapaasti "osana ohjelmistoa". Lisenssitekstitiedosto on kuitenkin mukana alla olevassa zip-paketissa sekä mainintana valmiissa CSS-tiedostossa, joka sisältää webfonttimääritteet (linkki alla).

Lataa kirjasin Source Sans 3 omalle laitteellesi (TTF & WOFF2)

Kun koodiprojektissa on käytössä Suomi.fi-komponenttikirjasto (suomifi-ui-components), on projektissa syytä olla mukana tarvittavat webfonttimääritteet. Tämä tapahtuu helpoiten lisäämällä seuraava linkki projektin globaaliin CSS:ään.

@import url('https://designsystem.suomi.fi/fonts/source-sans-3.css');

Vanhat kirjastoversiot

Suomifi-ui-components kirjaston versiot 17 ja sitä vanhemmat käyttävät kirjasimena Source Sans Pro:ta. Suosittelemme käyttämään kirjastosta viimeisintä versiota, mutta mikäli se ei ole mahdollista, käytä 17 ja sitä vanhemmissa versioissa kirjasimena Source Sans Pro:ta.

Lataa kirjasin Source Sans Pro omalle laitteellesi

Tai lisää seuraava linkki projektin globaaliin CSS:ään:

@import url('https://designsystem.suomi.fi/fonts/source-sans-pro.css');

Leipäteksti

Käytä leipäteksteissä niille erityisesti suunniteltuja tekstikomponentteja Text ja Paragraph

Katso tekstikomponenttien dokumentaatio

Otsikot

Käytä otsikoissa niille erityisesti suunniteltua Heading-komponenttia

Katso otsikkokomponentin dokumentaatio