Text

The different text sizes

<Stack>
  <Text variant="xxl">xxl - I am 50px on desktop, and 36px on mobile</Text>
  <Text variant="xl-display">xl-display - I am 40px on desktop, and 30px on mobile</Text>
  <Text variant="xl-sans">xl-sans - I am 40px on desktop, and 30px on mobile</Text>
  <Text variant="lg">lg - I am 30px on desktop, and 24px on mobile</Text>
  <Text variant="md-lg">md-lg - I am 24px on desktop, and 21px on mobile</Text>
  <Text variant="md">md - I am 21px on desktop, and 18px on mobile</Text>
  <Text variant="sm">sm - I am 18px on desktop, and 16px on mobile</Text>
  <Text variant="xs">xs - I am 16px on desktop, and 14px on mobile</Text>
  <Text variant="2xs">2xs - I am 14px on desktop, and 12px on mobile</Text>
</Stack>

You can also customize text by specifying fontSize and or lineHeight.
Specified fontSize will however not change dynamically on mobile / desktop, like variant does.
the lineClamp prop will truncate the text after a certain number of lines

<Text fontSize="desktop.lg" lineHeight="taller" maxWidth="800px" lineClamp="3">
  I am 30px on both mobile and desktop. If you want me to change dynamically while still using &apos;fontSize&apos; you must specify with fontSize=&#91;&quot;mobile.lg&quot;, &quot;desktop.lg&quot;&#93;
</Text>

Typografi er et av de sterkeste virkemidlene vi har for å lage visuelle hierarkier. Derfor er det viktig at man følger noen grunnleggende guidelines for å komme i gang.

Skrifttyper

Skrift­fam­i­lien til Vy består av Vy Sans og Vy Dis­play.

Vy Sans har sub­til ege­nart og tidløs utform­ing, med god lesbarhet. Den finnes i skriftsnittene Light, Reg­u­lar, Bold, samt Light Italic, Reg­u­lar Italic og Bold Italic. Light brukes på Epi-sidene, mens vi i Elm- og React-apper foretrekker Regular og Bold. Italic-snittene brukes sjelden og kun i spesiell tilfeller.

Vy Display har et sære­gent uttrykk og har kun ett snitt. Den er mindre lesbar i små størrelser, og skal derfor helst bare brukes på overskrifter på Epi-sidene i størrelsene XL og XXL, mens vi i Elm- og React-apper foretrekker Vy Sans.

Størrelser

Vi bruker seks faste skriftstørrelser: 2xl, lx, lg, md, sm og xs. Hver størrelse har sin faste linjehøyde. 2xl finnes kun for Vy Display. I Elm-apper og Vy-appen brukes hovedsakelig lg, md og sm, og default tekststil er “sm Regular”, og supplerer denne med større og mindre tekststiler. Xs er svært liten og brukes begrenset og kun der det ikke er mulig med størrelse sm. Det kan for eksempel være i små informasjonsbokser.

Les mer om overskrifter herEkstern lenke.

Tekstfarger

Det er fire tilgjengelige tekstfarger: Dark Grey, Dark Teal, Pine brukes på lys bakgrunn og White på mørk bakgrunn. Husk å alltid å sikre god kontrast til bakgrunnen i hht gjeldende WCAG-krav. Hør med en i Designsystemet hvis du er usikker.