Typografi

Indeks deler typografi i tre komponenter:

• Heading — overskrifter (h1–h6)
• Text — brødtekst og løpende tekst
• LinkText — lenker i løpende tekst

Alle bruker data-size for å styre visuell størrelse uavhengig av semantisk element.

Overskrifter (Heading)

Overskrifter i Indeks skiller mellom semantisk nivå og visuell størrelse. Semantisk nivå bestemmer dokumentstrukturen og hva skjermlesere annonserer, og er alltid et HTML-element fra h1 til h6. Visuell størrelse styrer utseendet og følger som standard en fast mapping, men kan overstyres hvis det visuelle hierarkiet krever det.

De tre største størrelsene (2xl–lg) bruker SpareBank 1 Title, de tre minste bruker SpareBank 1.

Størrelse (size)	Heading-nivå (as)	Font	Eksempel
2xl	h1	SpareBank 1 Title	Overskrift
xl	h2	SpareBank 1 Title	Overskrift
lg	h3	SpareBank 1 Title	Overskrift
md	h4	SpareBank 1	Overskrift
sm	h5	SpareBank 1	Overskrift
xs	h6	SpareBank 1	Overskrift

Bruk

Laster...

import { Heading } from '@sb1/indeks-react';

Laster...

Heading-nivå kan overstyres med size hvis det visuelle hierarkiet ikke samsvarer med det semantiske:

Laster...

Laster...

Spacing i overskrifter

Alle overskrifter kommer uten spacing som standard. Du kan legge til anbefalt spacing basert på størrelsen, eller bruke spacing-utility-klasser til å sette margin selv.

Legg til spacing-klassen som tilsvarer størrelsen:

Størrelse	Klasse
2xl (h1)	ix-mb-sm
xl (h2)	ix-mb-xs
lg (h3)	ix-mb-sm
md–xs (h4–h6)	ix-mb-2xs

Laster...

Bruk addRecommendedSpacing-propen for å legge til anbefalt margin-bottom basert på størrelse:

Laster...

Props for Heading

Attributt / klasse	Beskrivelse
ix-heading	Påkrevd basisklasse. Setter farge og linjehøyde.
data-size="2xl"	Visuell størrelse som h1
data-size="xl"	Visuell størrelse som h2
data-size="lg"	Visuell størrelse som h3
data-size="md"	Visuell størrelse som h4
data-size="sm"	Visuell størrelse som h5
data-size="xs"	Visuell størrelse som h6

Prop	Type	Standard	Beskrivelse
as	h1, h2, h3, h4, h5, h6	— (påkrevd)	Semantisk HTML-element. Bestemmer heading-nivå.
size	2xl, xl, lg, md, sm, xs	Utledet fra as	Visuell størrelse. Overstyrer standard mapping.
addRecommendedSpacing	boolean	false	Legger til margin-bottom basert på størrelse.
className	string	—	Ekstra CSS-klasser.

---

Brødtekst (Text)

Text er utgangspunktet for all løpende tekst: beskrivelser, hjelpetekster, meldinger og innhold som ikke er overskrift eller lenke. Standard størrelse er md, og standard element er <p>.

Størrelsene (xs–2xl) følger samme skala som spacing, noe som gjør det lett å kombinere tekststørrelse og luft uten å blande ulike skalaer.

Bruk

Laster...

import { Text } from '@sb1/indeks-react';

Laster...

Eget element

ix-text-klassen kan settes på alle block- og inline-elementer.

Laster...

Tekst rendres som standard i en <p>. Bruk as når elementet ikke er en paragraf, for eksempel i lister eller tabellceller:

Laster...

Linjehøyde

Standard linjehøyde er 1.2. Brødtekst over flere linjer trenger større linjehøyde. Sett den til 1.4 med modifikatoren under:

Legg til ix-text--long for økt linjehøyde:

Laster...

Laster...

Bold og emphasized tekst

Bruk <strong> og <em> for å utheve tekst med henholdsvis fet og kursiv stil. Begge har semantisk betydning. Bruk <b> og <i> kun når du vil ha visuell effekt uten semantisk mening.

Laster...

Laster...

Vil du utheve en hel paragraf uten <p>-elementet, bruk as:

Laster...

Props for Text

Attributt / klasse	Beskrivelse
ix-text	Påkrevd basisklasse. Setter linjehøyde og farge.
data-size="2xl"	Størrelse 2xl.
data-size="xl"	Størrelse xl.
data-size="lg"	Størrelse lg.
data-size="md"	Størrelse md (tilsvarer standard brødtekst).
data-size="sm"	Størrelse sm.
data-size="xs"	Størrelse xs.
ix-text--long	Øker linjehøyde til 1.4 for lengre tekstblokker.

Prop	Type	Standard	Beskrivelse
as	ElementType	p	HTML-element som rendres. Kan være span, strong, em, etc.
size	2xl, xl, lg, md, sm, xs	md	Skriftstørrelse.
long	boolean	false	Øker linjehøyden til 1.4. Bruk for tekst over flere linjer.
addRecommendedSpacing	boolean	false	Legger til anbefalt margin-bottom under teksten.
className	string	—	Ekstra CSS-klasser.

---

Lenker (LinkText)

LinkText er lenker som sitter i løpende tekst, ikke frittstående knapper eller navigasjonslenker. Komponenten setter riktig lenkefarge, understrek og aktiv-tilstand, og fungerer med <a> eller en hvilken som helst router-komponent.

Bruk

Laster...

import { LinkText } from '@sb1/indeks-react';

Laster...

Props for LinkText

Klasse	Beskrivelse
ix-link-text	Påkrevd basisklasse. Setter lenkefarge og understrek.
ix-link-text--no-underline	Fjerner understrek. Bruk kun i spesielle kontekster.
ix-link-text--active	Aktiv-tilstand. Endrer lenkefargen til aktiv-varianten. Brukes typisk for å markere gjeldende side i navigasjonsmenyer.

Prop	Type	Standard	Beskrivelse
as	ElementType	a	HTML-element som rendres. Bruk f.eks. Link fra React Router.
size	'sm', 'md', 'lg'	md	Skriftstørrelse.
underline	boolean	true	Viser understrek. Deaktiver kun i spesielle kontekster.
isActive	boolean	false	Markerer lenken som aktiv. Brukes i navigasjonsmenyer o.l.
className	string	—	Ekstra CSS-klasser.

---

Utility-klasser

For tilfeller der du ikke bruker Text-komponenten, finnes det utility-klasser for typografi.

Skriftstørrelse

Laster...

Vekt og stil

Klasse	Beskrivelse
.ix-text-bold	Setter font-weight: medium. Tilsvarer effekten av <strong> og <b>.
.ix-text-italic	Setter font-style: italic. Tilsvarer effekten av <em> og <i>.

strong og b arver bold-stilen fra .ix-body automatisk, og em og i arver kursiv. Utility-klassene er der for tilfellene der du ikke kan endre HTML-semantikken.

---

Universell utforming

Typografi er der dokumentstrukturen faktisk lages. Overskriftsnivåene er det skjermlesere navigerer etter, og lenketeksten er det de leser løsrevet fra avsnittet rundt.

Hva du selv må sørge for

• Nivå etter struktur, ikke størrelse: as bestemmer hva som er h1–h6, size bestemmer bare utseendet. Trenger du en mindre h2, sett size="md" framfor å bytte til h4
• Ikke lag falske overskrifter: en ix-text med stor data-size ser ut som en overskrift, men havner ikke i skjermleserens overskriftsliste. Brukere som navigerer med overskrifter hopper over seksjonen
• Beskrivende overskrifter og lenketekst: begge leses uten teksten rundt. «Se kontooversikt», ikke «Les mer»
• Behold understreken på lenker i løpende tekst: underline={false} og ix-link-text--no-underline fjerner det eneste signalet som ikke er farge
• Merk aktiv lenke for hjelpemidler: isActive og ix-link-text--active endrer bare fargen. Viser den hvilken side brukeren står på, sett også aria-current="page"
• Lenken må ende i en <a> med href: as kan peke på en router-komponent, men elementet i DOM må ha lenkesemantikk. Navigerer handlingen ingen steder, er det en knapp
• lang på tekst i et annet språk: komponentene setter det ikke, og skjermleseren bytter ikke uttale uten
• long på tekst over flere linjer: standard linjehøyde er 1.2, som er tett for løpende tekst
• <strong> og <em> når uthevingen betyr noe: .ix-text-bold og .ix-text-italic er rent visuelle og formidler ingenting til skjermlesere
• Kontrast på farget flate: fargetokenene er valgt for hovedbakgrunnene. Legger du teksten på en status-flate eller et bilde, må du måle kontrasten selv

Hva komponenten gjør automatisk

• Semantikken kommer fra elementet: h1–h6 gir overskriftsrolle med nivå, <a href> gir lenkerolle med lenketeksten som navn. Ingen ARIA legges på
• Størrelse er løsrevet fra semantikk: data-size endrer bare utseendet, så det visuelle hierarkiet kan avvike fra dokumentstrukturen uten at strukturen går tapt
• Understrek på lenker som standard, så de skilles fra brødteksten uten at farge er eneste signal
• rem-basert skala: alle størrelser bygges fra --ii-font-base-size (1rem) med faktor 1.125, og typografi-CSS-en har ingen px-verdier. Teksten følger skriftstørrelsen brukeren har valgt i nettleseren, og skalerer ved 200 % zoom
• Ingen faste bredder: teksten flyter og brekker ved 320 px viewport uten horisontal scroll
• Overstyrbar linjeavstand: linjehøyde og farge settes i :where(), som har spesifisitet 0. En brukerstil som øker linjehøyde eller bokstavavstand vinner uten !important
• Fokusmarkeringen beholdes: ix-link-text fjerner ikke nettleserens fokusring

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus til neste lenke. Overskrifter og brødtekst er ikke fokuserbare
Shift + Tab	Flytter fokus til forrige lenke
Enter	Følger lenken som har fokus

Skjermleser

• Heading: «[tekst], overskrift nivå N» — nivået kommer fra elementet i as, ikke fra size
• Text: leses som vanlig innhold, uten egen rolle
• LinkText: «[tekst], lenke». Med aria-current="page" annonseres den også som gjeldende side
• Overskriftsnavigasjon: skjermlesere lister opp h1–h6 og hopper mellom dem. Hopper du et nivå, blir listen misvisende

WCAG-kriterier

Sist gjennomgått: 2026-09-02 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier16 ditt ansvar · 10 håndtert · 42 ikke relevant · 0 ikke på plass

Ditt ansvar (16)

Kriterium	Nivå	Hva du må gjøre
1.3.1 Informasjon og relasjoner	A	Velg heading-nivå etter dokumentstruktur, ikke etter størrelse. as bestemmer det semantiske nivået (h1–h6) og er det skjermlesere annonserer og navigerer etter. size bestemmer bare utseendet. Trenger du en mindre h2, sett size="md" i stedet for å bytte til h4 — da beholder du hierarkiet. Ikke hopp over nivåer, og bruk én h1 per side. Eksempel: `<Heading as="h2" size="md">Effektiv rente</Heading>`
2.4.6 Overskrifter og ledetekster	AA	Velg heading-nivå etter dokumentstruktur, ikke etter størrelse. as bestemmer det semantiske nivået (h1–h6) og er det skjermlesere annonserer og navigerer etter. size bestemmer bare utseendet. Trenger du en mindre h2, sett size="md" i stedet for å bytte til h4 — da beholder du hierarkiet. Ikke hopp over nivåer, og bruk én h1 per side. Eksempel: `<Heading as="h2" size="md">Effektiv rente</Heading>`
1.3.1 Informasjon og relasjoner	A	Ikke lag falske overskrifter med Text. En `.ix-text` med stor data-size ser ut som en overskrift, men er ingen. Den havner ikke i skjermleserens overskriftsliste, og brukere som navigerer med overskrifter hopper rett over seksjonen. Skal teksten fungere som overskrift, bruk Heading.
2.4.4 Formål med lenke (i kontekst)	A	Skriv overskrifter og lenketekst som beskriver innholdet. Skjermleserbrukere hopper mellom overskrifter og lenker og hører dem løsrevet fra teksten rundt. Overskriften skal si hva seksjonen handler om, og lenketeksten skal si hvor lenken går: «Se kontooversikt», ikke «Les mer» eller «Klikk her».
2.4.6 Overskrifter og ledetekster	AA	Skriv overskrifter og lenketekst som beskriver innholdet. Skjermleserbrukere hopper mellom overskrifter og lenker og hører dem løsrevet fra teksten rundt. Overskriften skal si hva seksjonen handler om, og lenketeksten skal si hvor lenken går: «Se kontooversikt», ikke «Les mer» eller «Klikk her».
1.4.1 Bruk av farge	A	Behold understreken på lenker i løpende tekst. underline={false} i React og ix-link-text--no-underline i HTML fjerner det eneste signalet som ikke er farge. Da må lenken skilles fra brødteksten på farge alene, og det er ikke nok for brukere som ikke oppfatter fargeforskjellen. Fjern understreken bare der lenken er tydelig noe annet enn tekst, for eksempel i en navigasjonsmeny.
1.4.1 Bruk av farge	A	Marker gjeldende side med mer enn farge. isActive og ix-link-text--active endrer bare lenkefargen. Brukes den til å vise hvilken side man står på, må tilstanden også finnes for hjelpemidler: sett aria-current="page" på lenken.
4.1.2 Navn, rolle, verdi	A	Marker gjeldende side med mer enn farge. isActive og ix-link-text--active endrer bare lenkefargen. Brukes den til å vise hvilken side man står på, må tilstanden også finnes for hjelpemidler: sett aria-current="page" på lenken.
4.1.2 Navn, rolle, verdi	A	LinkText må rendres som en lenke med href. as kan peke på en router-komponent (for eksempel Link fra React Router), men elementet som havner i DOM må være en `<a>` med href. En `<a>` uten href har verken lenkerolle eller tastaturfokus, og en `<span>` med lenkefarge er ikke en lenke. Skal handlingen ikke navigere noe sted, er det en knapp.
2.1.1 Tastatur	A	LinkText må rendres som en lenke med href. as kan peke på en router-komponent (for eksempel Link fra React Router), men elementet som havner i DOM må være en `<a>` med href. En `<a>` uten href har verken lenkerolle eller tastaturfokus, og en `<span>` med lenkefarge er ikke en lenke. Skal handlingen ikke navigere noe sted, er det en knapp.
3.1.2 Språk på deler av innhold	AA	Merk tekst som er på et annet språk. Komponentene setter ikke lang. Står et ord eller et avsnitt på et annet språk enn resten av siden, sett lang på elementet, slik at skjermleseren bytter uttale. Eksempel: `<Text as="span" lang="en">cash flow</Text>`
1.4.3 Kontrast (minimum)	AA	Sjekk kontrasten når teksten står på en farget flate. Fargen kommer fra foreground-tokens som er laget for hovedbakgrunnene. Legger du teksten på en status-flate, et bilde eller en egen bakgrunnsfarge, må du måle kontrasten selv: 4.5:1 for brødtekst, 3:1 for tekst fra 24px (eller 19px bold) og oppover.
1.4.12 Tekstavstand	AA	Bruk long for tekst over flere linjer. Standard linjehøyde er 1.2, som er tett for løpende tekst. long i React og ix-text--long i HTML setter den til 1.4. Bruk den på alt som går over mer enn én linje — lange linjer med tett linjeavstand er tunge å følge, særlig ved forstørret tekst.
1.3.1 Informasjon og relasjoner	A	Bruk strong og em når uthevingen betyr noe. .ix-text-bold og .ix-text-italic gir bare visuell effekt og formidler ingenting til skjermlesere. Bærer uthevingen mening, bruk `<strong>` eller `<em>` — også som as="strong" på Text. Utility-klassene er for tilfellene der du ikke kan endre semantikken.
1.4.1 Bruk av farge	A	Bruk strong og em når uthevingen betyr noe. .ix-text-bold og .ix-text-italic gir bare visuell effekt og formidler ingenting til skjermlesere. Bærer uthevingen mening, bruk `<strong>` eller `<em>` — også som as="strong" på Text. Utility-klassene er for tilfellene der du ikke kan endre semantikken.
2.5.8 Målstørrelse (minimum)	AA	Frittstående lenker trenger stort nok trykkmål. Lenker i løpende tekst er unntatt kravet til målstørrelse fordi de sitter inne i en setning. Bruker du ix-link-text som en frittstående lenke, for eksempel i en meny eller en liste, gjelder kravet: målet må være minst 24 × 24 px, eller ha nok avstand til nabomålene.

Håndtert av komponenten (10)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Heading rendrer et ekte h1–h6, Text rendrer `<p>` som standard, og LinkText rendrer `<a>`. Størrelsen settes med data-size og endrer ikke semantikken, så visuelt hierarki og dokumentstruktur kan avvike uten at strukturen går tapt.
1.3.2 Meningsfull rekkefølge	A	Ingen visuell omstokking av innholdet. Rekkefølgen i DOM er leserekkefølgen.
1.4.1 Bruk av farge	A	Lenker har text-decoration: underline som standard, så de skilles fra brødteksten uten at farge er eneste signal.
1.4.3 Kontrast (minimum)	AA	Farge settes med foreground-tokens: main-emphasis for overskrift, main-default for brødtekst og link-default for lenker. Tokenene er valgt for hovedbakgrunnene i lys og mørk modus.
1.4.4 Endre tekststørrelse	AA	Alle størrelser er rem-baserte. Skalaen bygges fra --ii-font-base-size (1rem) med faktor 1.125, og typografi-CSS-en inneholder ingen px-verdier. Teksten følger derfor brukerens skriftstørrelse i nettleseren og skalerer ved 200 % zoom.
1.4.10 Omflyt	AA	Ingen faste bredder og ingen white-space: nowrap. Teksten flyter og brekker ved 320 px viewport uten horisontal scroll.
1.4.12 Tekstavstand	AA	Linjehøyde og farge settes i :where(), som har spesifisitet 0. En brukerstil eller et leservisnings-tillegg som øker linjehøyde, ord- eller bokstavavstand vinner derfor uten !important.
2.1.1 Tastatur	A	LinkText rendrer `<a>` og er tastaturfokuserbar når den har href. Heading og Text er ikke interaktive og skal ikke være fokuserbare.
2.4.7 Synlig fokus	AA	ix-link-text fjerner ikke nettleserens fokusmarkering. Lenken beholder standard fokusring, og reset-laget setter outline: auto for :-moz-focusring.
4.1.2 Navn, rolle, verdi	A	Rolle, nivå og navn kommer fra det native elementet: h1–h6 gir overskriftsrolle med nivå, og `<a href>` gir lenkerolle med lenketeksten som navn. Komponentene legger ikke på ARIA.

Ikke relevant (42)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Komponentene rendrer tekst, ikke ikke-tekstlig innhold.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Ingen sensoriske egenskaper brukes til å formidle informasjon.
1.3.4 Visningsretning	AA	Ingen orientasjonslåsing.
1.3.5 Identifiser formål med inndata	AA	Ikke et skjemafelt.
1.4.2 Styring av lyd	A	Ingen lyd.
1.4.5 Bilder av tekst	AA	Tekst rendres som tekst, aldri som bilde.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Ingen ikke-tekstlige UI-komponenter eller grafikk. Understreken på lenker er tekstdekorasjon og faller under tekstkontrast.
1.4.13 Innhold ved hover eller fokus	AA	Ingen innhold vises ved hover eller fokus; hover endrer bare lenkefargen.
2.1.2 Ingen tastaturfelle	A	Lenker er vanlige `<a>`-elementer uten fokushåndtering.
2.1.4 Tastatursnarveier	A	Ingen hurtigtaster.
2.2.1 Justerbar hastighet	A	Ingen tidsfrister.
2.2.2 Pause, stopp, skjul	A	Ingen bevegelse eller autooppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinking eller flimring.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.3 Fokusrekkefølge	A	Endrer ikke fokusrekkefølge; lenker følger DOM-rekkefølgen.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen overlay eller fastlåst element som kan dekke en fokusert lenke.
2.5.1 Pekerbevegelser	A	Ingen pekerbevegelser.
2.5.2 Avbryt peker	A	Aktivering skjer med nettleserens egen lenkehåndtering.
2.5.3 Label i navn	A	Lenketeksten er både synlig label og tilgjengelig navn.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesaktivering.
2.5.6 Samtidige inndatamekanismer	A	Ingen begrensning på inndatametode.
2.5.7 Drabevegelser	A	Ingen dra-funksjonalitet.
3.1.1 Språk på siden	A	Språk for siden settes på `<html>`, ikke av komponentene.
3.2.1 Ved fokus	A	Fokus på en lenke utløser ingen endring.
3.2.2 Ved inndata	A	Ingen inndata.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feil	A	Ingen validering.
3.3.2 Ledetekster eller instruksjoner	A	Ingen skjemafelt.
3.3.3 Forslag ved feil	AA	Ingen feilforslag.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Ingen juridisk forpliktende handlinger.
3.3.7 Redundant oppføring	A	Ingen inndata som kan gjentas.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ingen autentisering.
4.1.3 Statusmeldinger	AA	Komponentene genererer ingen statusmeldinger.

---

Tilpasning med CSS

Typografi i Indeks er ikke bygget rundt én blokkklasse. Stilene er fordelt på klasser per komponent og størrelse. Du kan bruke disse direkte i egenhåndig HTML uten React-komponentene.

Tilgjengelige klasser og selektorer

Komponent	Basisklasse	Størrelse	Modifikatorer
Heading	ix-heading	data-size="2xl|xl|lg|md|sm|xs"	—
Text	ix-text	data-size="2xl|xl|lg|md|sm|xs"	ix-text--long
LinkText	ix-link-text	—	ix-link-text--no-underline ix-link-text--active

Se fullstendig klasseliste med beskrivelse under Props-tabellene i HTML-fanene ovenfor.

Eksempel: bruk i egen HTML-struktur

<h1 class="ix-heading" data-size="2xl">Renter og betingelser</h1>
<p class="ix-text ix-text--long" data-size="md">Renten på boliglånet ditt er basert på Nibor pluss et påslag.</p>
<a class="ix-link-text" href="/konto">Se kontooversikt</a>

Relatert

• Typografi — retningslinjer og prinsipper
• Spacing-tokens og utility-klasser