Typography

To present text correctly, styles have been created with different combinations of size, font weight, and line height. A set of typography components has also been created that encapsulate these styles, making them easy to use in different contexts. A description of how typography components are used can be found in the component article Typography.

Font-family

Font-family is not part of the library in Designsystemet; you must import the desired font in your app. The components have only been tested with the "Inter" font. If you choose a different font, you need to test that it looks good yourself.

Inter is a font specifically designed for good readability on computer screens. It meets the following criteria:

• Open font license + has an active community
• Large font family (light, regular, italic, bold, semibold)
• Recognizable letters, numbers, and special characters (not too creative)
• Clear ascenders and descenders on the letters
• Visible difference between similar characters (I, l, 1) (must be activated)
• Open letters don't close up (e.g., characters like a, e, and c)
• Consistent stroke thickness in transitions
• Tabular numbers (monospace)
• Variable font
• Good letter and word spacing
• Language support

The font is available in Figma without needing to download and install it yourself. If you need it for other purposes, you can download it from github.com/rsms/inter.

For hosting, the Altinn CDN can be used:

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

To activate lowercase l with tail, add the following to your CSS:

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