Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Kom i gang med kodepakkene
    • Kom i gang med Figma
    • Samarbeid og bidrag
    • Versjonering i Figma
    • Design tokens
    • Farger
    • Brekkpunkter
    • Typografi
    • Endringslogg
    • Migrering
    • CSS import
    • Kommandolinje
    • Stylelint
    • Tailwind
    • OverridableComponent
Grunnleggende / Styling

Typografi

Oppdatert 22. august 2023Stabil

    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.

    Skjermbilde som viser de ulike variantene av Source Sans 3 vi bruker i NAV.
    Vi bruker variantene Regular, Semibold og Italic i NAV.

    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-nameFont-sizeLine-heightLetter-spacing
    Heading XLarge40px52px-1%
    Heading Large32px40px-0.8%
    Heading Medium24px32px-0.2%
    Heading Small20px28px-0.1%
    Heading Xsmall18px24px-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-nameFont-sizeLine-height
    BodyLong Large20px28px
    BodyLong Medium18px28px
    BodyLong Small16px24px

    I tillegg til de ulike størrelsene er det laget egne stiler for strong, link, og link strong.

    BodyShort

    Style-nameFont-sizeLine-height
    BodyShort Large20px28px
    BodyShort Medium18px24px
    BodyShort Small16px20px

    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-nameFont-sizeLine-height
    Label Large20px28px
    Label Medium18px24px
    Label Small16px20px

    Detail

    Detail har også stiler for strong og uppercase.

    Style-nameFont-sizeLine-height
    Detail14px20px

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack