Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • grunnleggende
      • Hva er Aksel?
      • Kom i gang med kodepakkene
      • Kom i gang med Figma
      • Har du innspill til Aksel?
      • Versjonering i Figma
      • Logo
      • Design tokens
      • Farger
      • Brekkpunkter
      • Typografi
      • Endringslogg
      • Migrering
      • CSS import
      • Kommandolinje
      • Stylelint
      • Tailwind
      • Layout primitives
      • Nextjs
      • OverridableComponent

Typografi

Oppdatert 30. april 2025Stabil

Innhold på siden

  • Font
  • Størrelser
  • Linjelengde
  • Avstand og luft
  • Stiler
    • Heading
    • BodyLong
    • BodyShort
    • Label
    • Detail

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

Optimal bredde på brødtekst er mellom 50 og 75 tegn per linje inkludert mellomrom. Kortere eller lengre tekstlinjer kan gå utover lesbarheten. 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.

Stiler

Beskrivelse og veiledning til hvordan typografien brukes finner du i komponentartikkelen Typography.

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

Style-nameFont-sizeLine-height
BodyLong Large20px28px
BodyLong Medium18px28px
BodyLong Small16px24px

BodyShort

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

Label

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

Detail

Style-nameFont-sizeLine-height
Detail14px20px

© 2025 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