Typography

Typography Beta er en ny, forenklet versjon av typografisystemet som samler alle typografiske behov i kun to hovedkomponenter: Heading og Text. Dette gir et fleksibelt og fremtidsrettet API. Så, hvorfor et nytt API?

Styling - visuelt bedre hierarki
Enklere API – kun to hovedkomponenter å forholde seg til.
Bedre tilgjengelighet – semantisk korrekt HTML med as-prop.
Større fleksibilitet – kombiner as, variant, size, weight og spacing fritt.

Live demo

Heading
<Heading as="h1" variant="title-1">Title 1</Heading>
<Heading as="h2" variant="title-2">Title 2</Heading>
<Heading as="h3" variant="subtitle-1">Subtitle 1</Heading>
<Heading as="h4" variant="subtitle-2">Subtitle 2</Heading>
<Heading as="h5" variant="section-1">Section 1</Heading>
<Heading as="h6" variant="section-2">Section 2</Heading>

Text
<Text variant="leading">Leading</Text>
<Text variant="quote">Quote</Text>
<Text variant="paragraph">paragraph</Text>
<Text variant="subparagraph">subparagraph</Text>
<Text variant="caption">caption</Text>
<Text variant="label">Label</Text>
<Text variant="sublabel">SubLabel</Text>
<Text variant="overline">Overline</Text>
<Text variant="emphasized">Emphasized</Text>
<Text variant="code-text">Code Text</Text>
<Text variant="preformatted-text">Preformatted Text</Text>

 Blockquote med footer
<Blockquote>
  Entur gjør det enklere å reise kollektivt
  <BlockquoteFooter>Ola Nordmann, Entur</BlockquoteFooter>
</Blockquote>

Link
<Link href="https://entur.no/">Reiseplanleggeren til Entur</Link>
<Link href="https://entur.no/" external>Reiseplanleggeren til Entur</Link>

Lists

Unordered list
<UnorderedList spacing="md">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</UnorderedList>

Numbered List
<NumberedList type="A" spacing="lg">
  <ListItem>Step 1</ListItem>
  <ListItem>Step 2</ListItem>
  <ListItem>Step 3</ListItem>
</NumberedList>

List Items with Titles
<UnorderedList>
  <ListItem title="Important">This is an important item</ListItem>
  <ListItem title="Note">This is a note item</ListItem>
  <ListItem>Regular item without title</ListItem>
</UnorderedList>

List types
// Decimal (1, 2, 3)
<NumberedList type="1">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</NumberedList>

// Upper Alpha (A, B, C)
<NumberedList type="A">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</NumberedList>

// Lower Alpha (a, b, c)
<NumberedList type="a">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</NumberedList>

// Upper Roman (I, II, III)
<NumberedList type="I">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</NumberedList>

// Lower Roman (i, ii, iii)
<NumberedList type="i">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</NumberedList>

Bruk av typografikomponenter i Figma

Lær hvordan du setter opp og bruker typografi-komponenter i Figma for å sikre konsistens og effektivitet i designarbeidet ditt.

Steg 1: Opprett et Frame, aktiver vertikal Auto Layout og sett spacing til 0 px. Hent og plasser typograi-komponenter i riktig rekkefølge.

Steg 2: Juster egenskaper som tekstinnhold, stil og variant direkte i komponentpanelet.

Steg 3: Legg til ekstra spacing dersom en heading står rett under en tekst for bedre visuell hierarki.

Steg 4: Test responsiviteten ved å bytte mellom størrelsesmoduser (typography modes) og se hvordan typografien tilpasser seg.

Gode praksis

Typografi størrelsesmoduser

For å sikre konsistens på tvers av plattformer og produkter, skal vi standardisere bruken av typografimoduser (Typography modes).

Compact mode
Brukes i B2B-applikasjoner og grensesnitt med høy informasjonsdensitet, der plassutnyttelse er viktig.
Default mode
Standard for Entur og Omtur sine apper. Gir god balanse mellom lesbarhet og plass, og fungerer som hovedvalg i de fleste brukerflater.
Display mode
Brukes i automater, skjermpresentasjoner og andre flater med stor visningsflate og lengre leseavstand.

Ikke bland ulike typografimoduser i samme grensesnitt. Velg én modus som utgangspunkt for hele løsningen, og hold deg konsekvent til den. Unntak må være tydelig begrunnet og dokumentert.

Typografihierarkier

Hold riktig proximity (avstand) og tydelig visuelt hierarki for å sikre god typografisk rytme, balanse og lesbarhet. Elementer som hører sammen skal stå nær hverandre, mens ulike seksjoner skal ha tydelig separasjon.

Unngå ustrukturerte avstander mellom alle elementer. Det bryter hierarkiet og gjør det vanskelig å se hva som hører sammen.

Bruk Auto Layout og spacing-tokens for å skape logiske grupper og et klart hierarki. Dette gjør innholdet lett å skanne og gir bedre leseflyt.

Tilgjengelighet (UU)

For å sikre god lesbarhet og universell utforming anbefaler WCAG at tekstlinjer ikke blir for lange. Lange linjer gjør det vanskeligere å følge teksten, mens for korte linjer gir mange linjeskift og kan redusere leseflyten.

Kontrastkrav

Tekst må ha minst 4.5:1 kontrastforhold mot bakgrunnen.

Linjelengde og lesbarhet

Norske ord er ofte lengre enn engelske, noe som gir flere tegn per ord. For å unngå unødvendige linjeskift og bevare flyt, kan 80–85 tegn per linje være mer hensiktsmessig for norsk tekst.

For mobil anbefales kortere linjer, typisk 35–50 tegn, for å sikre lesbarhet på små skjermer. Unngå å ha under 20 tegn per linje, da det gir for mange linjeskift og dårlig lesbarhet.