Skip to content

Latest commit

 

History

History
79 lines (50 loc) · 3.12 KB

Typography.mdx

File metadata and controls

79 lines (50 loc) · 3.12 KB

import { Meta, Canvas, Controls } from '@storybook/blocks';

import * as typographyStories from './Typography.stories'; import * as HeadingStories from '../src/components/Heading/Heading.stories'; import * as ParagraphStories from '../src/components/Paragraph/Paragraph.stories'; import * as LabelStories from '../src/components/Label/Label.stories'; import * as ValidationMessageStories from '../src/components/ValidationMessage/ValidationMessage.stories';

Typography

Typografi er en viktig del av det å bygge opp innhold på en nettside. Det er avgjørende at tekst blir brukt konsekvent på tvers av et nettsted slik at brukeren enkelt kan prosessere informasjonen som er der. Typografien er delt inn i fire kategorier som er ment å dekke alle behov som måtte dukke opp på et nettsted:

Bruk

Typografikomponentene kommer med hverken innebygd eller definert font-familie. Det er opp til bruker å selv å importere ønsket font.

Vi anbefaler å bruke fonten Inter da det er denne fonten komponentene i designsystemet har blitt designet og testet med. Inter er en skrifttype spesielt designet for god lesbarhet på dataskjermer.

Den er tilgjengelig i Altinn CDN.

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

Til font-family anbefaler vi følgende sammensetning med fallback til Arial.

font-family: 'Inter', Arial, sans-serif;

Heading

Alle oversikrifter skal bruke Heading-komponenten. Dette er tekst med en tyngre font-vektning og større font-størrelse som grupperer innhold som kommer under.

Det skal kun vere 1 <h1> tag per side, men det kan vere flere h2-h6. Det er viktig at heading-hirarkiet på en side går logisk fra <h1> og nedover både når det kommer til størrelse og rekkefølge (se bruk).

H1 trenger ikke vere samme størrelse på alle nettsider. I en intern admin applikasjon kan H1 for eksempel vere 36px, mens på en annen nettside 44px. Det som er viktig er at H1-H6 skalerer logiske nedover i størrelse.

Paragraph

Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et nettsted vil bruke Paragraph.

Label

Label blir brukt for å framheve tekst, ofte sammen med Paragraph. Den har mindre linjehøyde enn Paragraph, og fungerer slik fint inne i komponenter. Ofte brukt som navn på skjemakomponenter.

ValidationMessage

Dersom du setter data-color="neutral" vil color følge nærmeste tekstfarge som er satt.

Eksempel

Vi endrer color og background-color for deg når du setter data-color-scheme.