Typografi

For å presentere tekst på korrekt måte er det laget stiler som har ulike kombinasjoner av størrelse, fontvekt og linjehøyde. Det er også laget et sett med typografi-komponenter som innkapsler disse stilene, slik at de enkelt kan brukes i ulike sammenhenger. Beskrivelse av hvordan typografi-komponenter brukes finner du i komponentartikkelen Typography.

Font-family

Font-family er ikke en del av designsystem-biblioteket, du må selv importere ønsket font i din app. Komponentene har kun blitt testet med fonten "Inter". Velger du en annen font må du selv teste at det ser bra ut.

Når du velger font bør du passe på at den har god lesbarhet på dataskjermer. Da vi valgte "Inter" la vi vekt på følgende kriterier:

• Open font license + har et aktivt community
• Stor skriftfamilie (light, regular, italic, bold, semibold)
• Gjenkjennelige bokstaver, tall og spesialtegn (ikke for kreativ)
• Tydelige overlengder og underlengde på bokstavene.
• Synlig forskjell på lignende tegn (I, l, 1) (må aktiveres)
• Åpne bokstaver gror ikke igjen (f.eks tegn som a, e og c)
• Lik strektykkelse i overgangene.
• Tabular numbers (monospace)
• Variabel font
• God bokstav og ordmellomrom
• Språkstøtte

"Inter" er tilgjengelig i Figma uten at du trenger å laste ned og installere den selv. Trenger du den til andre formål kan du laste den ned fra github.com/rsms/inter.

For hosting kan Altinn CDN benyttes:

<link
  rel='stylesheet'
  href='https://altinncdn.no/fonts/inter/v4.1/inter.css'
  integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD"
  crossorigin="anonymous"
/>

For å aktivere lowercase l with tail, legg til følgende i din CSS:

font-family: 'Inter', sans-serif;
font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */