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

Lists

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.

1// Slik henter du inn Beta-variant av Typografi-komponenter 
2import { Heading, Text } from "@entur/typography/beta";

Heading

Heading gir deg riktige styles automatisk, og er laget for å følge designsystemets nivåer.

• Semantikk (as): velg riktig HTML-tag (h1–h6)
• Visuelt uttrykk (variant eller size): styr utseendet uavhengig av semantikk. varianter vår anbefalt styling av ulike nivåer, men du kan velge size om du ønsker annen størrelse.

Ved å skille mellom semantiske props (as) og visuelle props (variant, size, weight, spacing), gir vi utviklere mulighet til å skrive semantisk korrekt HTML uten å være bundet til det visuelle uttrykket. Dette gir flere fordeler:

• Universell utforming – skjermlesere forstår innhold bedre
• SEO – søkemotorer tolker strukturen korrekt
• Designfrihet – semantisk <h2> kan styles som en liten tittel
• Konsistens – samme variant kan gjenbrukes overalt

Varianter

Text

Text er mer fleksibel, og krever at du velger variant selv.

Varianter

Semantikk

Husk at det er ditt ansvar å bruke riktig as-prop, slik at HTML-en gir mening for både mennesker, maskiner og hjelpemidler. Men vi legger til riktig semantikk basert på varianten du velger. Om du ikke bruker variant, må du sørge for å legge til riktig as-prop selv. Default er p.

Hvis du bare skriver:

1<Text as="label">Navn</Text>

…får du semantisk <label>uten styling. Skal den se ut som den kommer fra vårt designsystem, kan du bruke variant:

1<Text as="label" variant="label">Navn</Text>

Siden label-element også brukes som et designelement ulike steder blir denne default <span></span>:

1<Text variant="label">Navn</Text>

Spacing

Spacing kontrollerer mengden luft over og under typografikomponentene. Vi bruker våre spacing-tokens , fra `xs2` til `xl`. Du kan også spesifisere retningsbestemt spacing med `-top` eller `-bottom` suffiks.

Viktig: Ny margin-oppførsel

Baseklasser har ingen margin som standard, men variant tar seg av spacing for deg og legger derfor til margins:

• Base-klasser: eds-heading og `.eds-text` har `margin: 0`
• Varianter med spacing: Mange varianter inkluderer anbefalt spacing
• Size-klasser: Kun font-size og line-height, ingen margins
• Eksplisitt spacing: Du kan overstyre med spacing prop

Hvordan fungerer spacing?

Andre komponenter

Lists

View mode

TypographyBeta støtter forskjellige visninger for å tilpasse typografien til ulike skjermstørrelser og bruksområder. Denne løsninger er foreløpig designet med tanke på automater. Men vil passe flere bruksområder.

Hvordan det fungerer

Systemet bruker view-mode attributtet for å kontrollere typografi-skalering:

• Standard mode/default: Automatisk større typografi på desktop
• Compact mode: Når det er behov for små størrelser, uansett skjermstørrelse
• Display mode: Konsistent stor typografi på alle skjermstørrelser

Bruk av view-mode

1<html view-mode="display">
2  <!-- Alt innhold får large typografi -->
3</html>

1<div view-mode="display">
2  <Heading as="h1">Stor tittel for store skjermer</Heading>
3  <Text variant="paragraph">Større tekst som er lettere å lese</Text>
4</div>

1// Sett view mode for hele siden
2document.documentElement.setAttribute('view-mode', 'large');
3
4// Fjern view mode (tilbake til default)
5document.documentElement.removeAttribute('view-mode');
6
7// Sjekk nåværende mode
8const currentMode = document.documentElement.getAttribute('view-mode');

Eksempel responsive

Når skal du bruke det?

• Standard/Default: Standard responsive typografi for de fleste bruksområder
• Display:
  • Automater og informasjonsskjermer
  • Tilgjengelighet for brukere med synsproblemer
  • Presentasjoner og store skjermer
  • Offentlige rom hvor tekst skal være lett å lese
• Compact: Om du bare trenger tokens for små størrelser, oftest ved B2B-behov med store og mange informasjonsbehov. (Tabeller, admingrensesnitt etc.)

Migrering

Her er en mapping av alle gamle komponenter → nye.Du kan også lese vår migreringsguide under fanen utvikling, om du ønsker hjelp til migreringen.

1Heading1 → <Heading as="h1" variant="title-1">
2Heading2 → <Heading as="h2" variant="title-2">
3Heading3 → <Heading as="h3" variant="subtitle-1">
4Heading4 → <Heading as="h4" variant="subtitle-2">
5Heading5 → <Heading as="h5" variant="section-1">
6Heading6 → <Heading as="h6" variant="section-2">
7BaseHeading → <Heading>

1Paragraph → <Text as="p" variant="paragraph">
2LeadParagraph → <Text as="p" variant="leading">
3SmallText → <Text as="p" variant="subparagraph">
4StrongText → <Text as="strong" weight="bold">
5EmphasizedText → <Text as="em" variant="emphasized">
6CodeText → <Text as="code" variant="code-text">
7PreformattedText → <Text as="pre" variant="preformatted-text">
8Label → <Text as="label" variant="label">
9SubLabel → <Text as="span" variant="sublabel">
10SubParagraph → <Text as="p" variant="subparagraph">

Typografi migreringsguide

Denne guiden hjelper deg med å migrere fra de gamle typografi-komponentene til det nye beta typografi-systemet.Migreringsscriptet er laget basert på frontend-repoer vi forvalter, derfor vil ikke all migrering være 100%, det er derfor viktig å teste alle endringer selv.

• Hva scriptet gjør: Oppdaterer både imports og komponentbruk til beta-komponenter
• Konsekvenser:
  • <Heading1 className="ditt-klassenavn"> blir <Heading className="ditt-klassenavn" as="h1" variant="title-1">
  • <Paragraph> blir <Text variant="paragraph">
  • <Link> blir <Link> (fra @entur/typography/beta)
  • Dine props og CSS-klasser blir med videre, derfor er det viktig å sjekke hva du overstyrer.
  • Når bruke denne: Når du vil migrere til det nye systemet umiddelbart
  • ⚠️ Viktig: Test grundig etter migrering!

Kom i gang - Migrering

Avhengigheter

Migreringsskriptet bruker en hybrid tilnærming for å finne filer i prosjektet ditt:
Skriptet prøver først å bruke glob for avansert mønstermatching, og faller tilbake til Node.js innebygde moduler hvis glob ikke er tilgjengelig.

1# Med glob (anbefalt) - bedre mønstermatching
2📦 Using glob package for pattern matching
3
4# Uten glob - bruker Node.js innebygde moduler
5📁 Using Node.js built-ins for file discovery

Bruk scriptet

Alternativ 1: Med glob (anbefalt)
Bruker glob når tilgjengelig for bedre mønstermatching

1# Installer glob
2npm i glob
3
4# Vis hjelp og alternativer
5npx @entur/typography@latest migrate --help
6yarn dlx @entur/typography@latest migrate --help
7
8# Se hva som ville blitt endret (trygt)
9npx @entur/typography@latest migrate --dry-run
10yarn dlx @entur/typography@latest migrate --dry-run
11
12# Komplett migrering: oppdater alt til beta-komponenter
13npx @entur/typography@latest migrate
14yarn dlx @entur/typography@latest migrate

Alternativ 2: Uten glob

1# Vis hjelp og alternativer
2npx @entur/typography@latest migrate --help
3yarn dlx @entur/typography@latest migrate --help
4
5# Se hva som ville blitt endret (trygt)
6npx @entur/typography@latest migrate --dry-run
7yarn dlx @entur/typography@latest migrate --dry-run
8
9# Komplett migrering: oppdater alt til beta-komponenter
10npx @entur/typography@latest migrate
11yarn dlx @entur/typography@latest migrate

migrate vil automatisk:

• Oppdatere alle imports
• Erstatte gamle komponenter med beta-komponenter
• Konvertere props til det nye formatet

1// Før migrering
2import { Heading1, Paragraph } from '@entur/typography';
3
4function MyComponent() {
5  return (
6    <div>
7      <Heading1>Min tittel</Heading1>
8      <Paragraph>Mitt innhold</Paragraph>
9    </div>
10  );
11}

1// Etter migrering
2import { Heading, Text } from '@entur/typography/beta';
3
4function MyComponent() {
5  return (
6    <div>
7      <Heading as="h1" variant="title-1">
8        Min tittel
9      </Heading>
10      <Text variant="paragraph">Mitt innhold</Text>
11    </div>
12  );
13}

Heading komponenter

1Heading1 → <Heading as="h1" variant="title-1">
2Heading2 → <Heading as="h2" variant="title-2">
3Heading3 → <Heading as="h3" variant="subtitle-1">
4Heading4 → <Heading as="h4" variant="subtitle-2">
5Heading5 → <Heading as="h5" variant="section-1">
6Heading6 → <Heading as="h6" variant="section-2">
7BaseHeading → <Heading>

Text komponenter

1Paragraph → <Text as="p" variant="paragraph">
2LeadParagraph → <Text as="p" variant="leading">
3SmallText → <Text as="p" variant="subparagraph">
4StrongText → <Text as="strong" weight="bold">
5EmphasizedText → <Text as="em" variant="emphasized">
6CodeText → <Text as="code" variant="code-text">
7PreformattedText → <Text as="pre" variant="preformatted-text">
8Label → <Text as="label" variant="label">
9SubLabel → <Text as="span" variant="sublabel">
10SubParagraph → <Text as="p" variant="subparagraph">

Sikkerhetsfunksjoner

Migreringsskriptet inkluderer flere sikkerhetsfunksjoner for å beskytte prosjektet ditt:

• Tillatte mapper: Skanner kun `src/**`, `app/**`, `components/**`, etc.
• Blokkerte mapper: Skanner aldri `node_modules`, `dist`, `.git`, etc.
• Dry-run modus: Test endringer uten å modifisere filer ved å bruke --dry-run
• Tilpassbare stier: Overstyr mapper med TYPOGRAPHY_MIGRATION_DIRS miljøvariabel
• Standardmapper: Skanner automatisk `src/**`, `app/**`, `apps/**`, `components/**`, `pages/**`, `lib/**`, `utils/**`, `styles/**`, `css/**`, `scss/**`
• Filtypefiltrering: Prosesserer kun TypeScript, JavaScript og SCSS/CSS filer

Tilpassing av scriptet

Default mapper som blir scannet

Migreringsskriptet skanner automatisk disse mappene:

• `src/**` - Kildekode
• `app/**` - Applikasjonsmapper
• `apps/**` - Flere applikasjoner
• `components/**` - Komponenter
• `pages/**` - Sider
• `lib/**` - Biblioteker
• `utils/**` - Hjelpefunksjoner
• `styles/**` - Stilfiler
• `css/**` - CSS-filer
• `scss/**` - SCSS-filer

Du kan overstyre standardmappene med miljøvariabelen TYPOGRAPHY_MIGRATION_DIRS:

Alternativ 1: Miljøvariabel

export TYPOGRAPHY_MIGRATION_DIRS="src/**,app/**,components/**"

Alternativ 2: Inline miljøvariabel

1# Kjør med inline miljøvariabel
2TYPOGRAPHY_MIGRATION_DIRS="src/**,app/**" npx @entur/typography@latest migrate
3
4# eller
5TYPOGRAPHY_MIGRATION_DIRS="src/**,app/**" yarn dlx @entur/typography@latest migrate

Viktige sikkerhetsregler

• Kun relative stier: Ikke bruk absolutte stier som `/home/user/project`
• Ingen parent-mapper: Ikke bruk `../parent/directory`
• Ingen home-mapper: Ikke bruk `~/home/directory`
• Glob-mønstre: Bruk `**` for å skanne undermapper (f.eks. `src/**`)

Eksempler på gyldige mapper

1TYPOGRAPHY_MIGRATION_DIRS="src/**,app/**,components/**"
2TYPOGRAPHY_MIGRATION_DIRS="packages/my-app/**,lib/**"
3TYPOGRAPHY_MIGRATION_DIRS="frontend/**,backend/**"

1TYPOGRAPHY_MIGRATION_DIRS="/absolute/path"      # Absolutt sti
2TYPOGRAPHY_MIGRATION_DIRS="../parent/directory" # Parent-mappe
3TYPOGRAPHY_MIGRATION_DIRS="~/home/directory"    # Home-mappe

Viktig: Ny margin-oppførsel

Baseklasser har ingen margin som standard, men variant tar seg av spacing for deg og legger derfor til margins:

1<Heading1>Denne hadde automatisk margin</Heading1>
2<Paragraph>Denne hadde også margin</Paragraph>

1// Med variant som har spacing
2<Heading as="h1" variant="title-1">Denne har margin fra variant</Heading>
3<Text variant="paragraph">Denne har margin fra variant</Text>
4
5// Uten variant (kun base-klasse)
6<Heading as="h1">Denne har ingen margin</Heading>
7<Text>Denne har ingen margin</Text>

Hvordan fungerer spacing?

1// Variant med spacing (default med spacing)
2<Heading as="h1" variant="title-1">Tittel med margin fra variant</Heading>
3<Text variant="paragraph">Tekst med margin fra variant</Text>
4
5// Eksplisitt spacing (overstyrer variant)
6<Heading as="h1" variant="title-1" spacing="lg">Tittel med large spacing</Heading>
7<Text variant="paragraph" spacing="md">Tekst med medium spacing</Text>
8
9// Uten spacing (kun base-klasse)
10<Heading as="h1">Tittel uten margin</Heading>
11<Text>Tekst uten margin</Text>
12
13// Fjern spacing fra variant
14<Heading as="h1" variant="title-1" spacing="none">Tittel uten margin</Heading>
15<Text variant="paragraph" spacing="none">Tekst uten margin</Text>

Margin til spacing migrering

Migreringsskriptet oppdaterer automatisk `margin` props til `spacing`:

1// Før migrering
2<Heading1 margin="bottom">Tittel</Heading1>
3<Paragraph margin="none">Tekst</Paragraph>
4
5// Etter migrering
6<Heading as="h1" variant="title-1" spacing="md-bottom">Tittel</Heading>
7<Text variant="paragraph" spacing="none">Tekst</Text>

Hjelp?

Hvis du støter på problemer under migrering:

1. Gjennomgå migreringsguiden
2. Gjennomgå Typografi Beta dokumentasjonen
3. Åpne et issue i design system repository
4. Kontakt design system-teamet

Props

Denne komponenten har ingen props

Denne komponenten har ingen props

Denne komponenten har ingen props