Typografia

Otsikot

Otsikoissa käytetään Roboto Slab -fonttia. Tekstin paksuus on 400 regular. Printtimediassa käytetään lihavoitua fonttia.

Pienempien elementtien ja alemman tason otsikoissa pyritään käyttämään Open Sans -fonttia. Tekstin paksuus sovitetaan aina kontekstin ja luettavuuden ehdoilla.

Otsikon vaihtoehtoiseksi fontiksi tarjotaan aina Helveticaa, Arialia ja selaimen omaa sans-serif -fonttia. Eli samaa kuin leipätekstissä.

Otsikoissa ei käytetä pelkkiä isoja kirjaimia.

.main-title { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: 400; } .small-title { font-family: "Open Sans", Helvetica, Arial, sans-serif; }

Leipäteksti

Open Sans -fonttia käytetään kaikkialla tavallisessa tekstissä: leipätekstissä, painikkeisssa, listoissa jne.

Open Sansin vaihtoehtoiseksi fontiksi tarjotaan aina Helveticaa, Arialia ja selaimen omaa sans-serif -fonttia. Eli samaa kuin otsikoissa.

.text { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; } .text--light { font-weight: 300; } .text--semibold { font-weight: 600; } .text--bold { font-weight: 700; }

Fontit

On suositeltavaa ladata fontit suoraan Google Fontsista. API:ssa ei ole käyttörajoitteita ja mahdolliset päivitykset tulevat automaattisesti näkyviin.

Open Sans Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyzzx
0123456789
Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Open Sans SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Open Sans Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Roboto Slab Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Tallenna paikallisesti asennettavat fontit