Tekst utgjør mesteparten av innholdet i produktene våre. For å presentere dette innholdet på en enkel og ryddig måte, bruker vi noen utvalgte stiler og komponenter. Disse er bygget opp med ulike kombinasjoner av størrelse, fontvekt, linjehøyde og farge.
Font
Fonten vi bruker i NAV heter Source® Sans 3. Det er en sans-serif font spesielt designet for digitale produkter. Fonten er tilgjengelige i Figma, uten at du trenger å laste ned og installere den selv. Dersom du trenger Source® Sans Pro til andre programmer, kan du laste den ned fra Google Fonts.
Størrelser
Vi har totalt 8 størrelser i designsystemet. 14, 16, 18, 20, 24, 28, 32 og 40px. Grunnstørrelsen for tekst i digitale produkter er 18px.
Linjelengde
For best mulig lesbarhet for alle brukere, bør det ikke være mer enn 50–75 tegn per linje inkludert mellomrom. Da blir teksten mer innbydende og mindre overveldende. Dette er særlig viktig for brukere med lese- eller konsentrasjonsvansker.
Avstand og luft
Den enkleste måten å oppnå rytme og god bruk av luft med designsystemet er å bruke de ferdige utformede typografi-komponentene som er tilgjengelig i Figma og kode.
WCAG-samsvar
På WCAG-nivå A og AA, dvs. de nivåene vi er pålagt til å oppfylle, er det ikke noe krav om minimum tekststørrelse eller linjehøyde. Det reglene krever er at brukeren kan justere tekststørrelse og linjehøyde. Dersom du bruker typografikomponentene, sikrer du at fontene dine er kodet på en måte som lar brukeren justere disse.
WCAG krever også god fargekontrast. Typografikomponentene alene kan ikke stå for god kontrast, siden det er du som designer eller utvikler som styrer fargevalgene. Sjekk kontrastene i løsningen din opp mot kontrastkravene med Colour Contrast Analyser, Stark i Figma eller med nettleserens DevTools.
Stiler og komponenter i Figma
Når du bruker komponentene, kan du velge om avstand skal være «på» eller «av». I tillegg til komponenter, finnes det også stiler i Figma, og CSS-klasser i kode.
Heading
| Style-name | Font-size | Line-height | Letter-spacing |
|---|---|---|---|
| Heading XLarge | 40px | 52px | -1% |
| Heading Large | 32px | 40px | -0.8% |
| Heading Medium | 24px | 32px | -0.2% |
| Heading Small | 20px | 28px | -0.1% |
| Heading Xsmall | 18px | 24px | -0.1% |
BodyLong og BodyShort
Denne stilen brukes mye til korte og lengre tekster. Brødtekst for eksempel. Stilen finnes i tre størrelser. I tillegg til størrelsene, er det egne stiler for strong, link og link + strong.
BodyLong
| Style-name | Font-size | Line-height |
|---|---|---|
| BodyLong Large | 20px | 28px |
| BodyLong Medium | 18px | 28px |
| BodyLong Small | 16px | 24px |
I tillegg til de ulike størrelsene er det laget egne stiler for strong, link, og link strong.
BodyShort
| Style-name | Font-size | Line-height |
|---|---|---|
| BodyShort Large | 20px | 28px |
| BodyShort Medium | 18px | 24px |
| BodyShort Small | 16px | 20px |
I tillegg til de ulike størrelsene er det laget egne stiler for strong, link, og link strong.
Label
Label er alltid i semibold.
| Style-name | Font-size | Line-height |
|---|---|---|
| Label Large | 20px | 28px |
| Label Medium | 18px | 24px |
| Label Small | 16px | 20px |
Detail
Detail har også stiler for strong og uppercase.
| Style-name | Font-size | Line-height |
|---|---|---|
| Detail | 14px | 20px |