Typografi i Jøkul

Typografi er fundamentet i enhver god brukeropplevelse. I Jøkul er typografisystemet nøye gjennomtenkt for å sikre lesbarhet, hierarki og konsistens på tvers av alle Fremtind-produkter — fra skademelding til sparekalkulator.

Fremtind Grotesk

Jøkul bruker Fremtind Grotesk — en egenutviklet humanistisk sans-serif skreddersydd for Fremtind. Fonten er optimalisert for skjermbruk med følgende egenskaper:

• Høy x-høyde — bokstavene er relativt høye sammenlignet med versalene, noe som gir bedre lesbarhet i små størrelser.
• Åpne apoturer — bokstaver som «a», «c» og «e» har tydelige åpninger som skiller dem fra hverandre og reduserer forveksling.
• OpenType-funksjoner — tabellnummer (tnum) for justering i tabeller, og stilistiske alternativer for visse tegn.
• Automatisk lasting — fonten er inkludert i Jøkuls CSS-pakke og trenger ingen manuell konfigurasjon.

Typografiskalaen

Jøkul definerer en fast skala med navngitte størrelser. Bruk CSS-variablene for å holde egne komponenter i samsvar med systemet:

--jkl-font-size-display

4rem (64px) — brukes sparsomt til store hero-seksjoner og splash-sider. Aldri i løpende tekst.

--jkl-font-size-title-large

3rem (48px) — primær sidetittel på landingssider og kampanjesider.

--jkl-font-size-title-medium

2.25rem (36px) — standard sidetittel i applikasjoner. Tilsvarer typisk <h1>.

--jkl-font-size-title-small

1.75rem (28px) — seksjonsoverskrift. Tilsvarer typisk <h2>.

--jkl-font-size-heading-large

1.375rem (22px) — underoverskrift for seksjoner. Tilsvarer typisk <h3>.

--jkl-font-size-heading-medium

1.125rem (18px) — liten overskrift for kort og paneler. Tilsvarer typisk <h4>.

--jkl-font-size-body

1rem (16px) — standard brødtekst. Grunnlaget for all løpende tekst.

--jkl-font-size-small

0.875rem (14px) — hjelpetekst, labels, metadata og sekundær informasjon.

--jkl-font-size-micro

0.75rem (12px) — juridisk tekst, fotnoter og svært sekundær informasjon. Bruk med varsomhet.

Linjehøyde og bokstavavstand

Jøkul setter linjehøyde (line-height) og bokstavavstand (letter-spacing) som en del av typografitoken-systemet:

--jkl-line-height-body

1.5 — brukes for all løpende brødtekst. Gir pusterom mellom linjene.

--jkl-line-height-heading

1.2 — tettere linjehøyde for overskrifter, der ord er færre og teksten kortere.

--jkl-letter-spacing-small

0.08em — brukes for --jkl-font-size-small og --jkl-font-size-micro for å kompensere for at små bokstaver lettere flyter sammen.

CSS-variabler i praksis

Slik bruker du typografi-tokens direkte i CSS:

/* Eksempel: egendefinert komponent */
.min-seksjon__tittel {
  font-size: var(--jkl-font-size-title-small);
  line-height: var(--jkl-line-height-heading);
  font-weight: 700;
  margin-bottom: var(--jkl-spacing-m);
}

.min-seksjon__brødtekst {
  font-size: var(--jkl-font-size-body);
  line-height: var(--jkl-line-height-body);
  max-width: 66ch;
}

Linjelengde og lesbarhet

Linjelengde er en av de viktigste faktorene for lesekomfort. Forskning viser at den optimale linjelengden for brødtekst er 45–75 tegn.

• Bruk ch-enheter i stedet for px: max-width: 66ch tilsvarer omtrent 66 tegn i gjeldende font.
• For smale kolonner (sidebarer, kort, modaler) er 35–50 tegn akseptabelt.
• Unngå linjelengder over 85 tegn — øyet må bevege seg for mye mellom linjeskift.
• Unngå linjelengder under 30 tegn — øyet må bevege seg for ofte og bryter leserytmen.

Responsiv typografi

Jøkuls skala er designet for desktopskjermer (1280px+), men fungerer godt på alle skjermstørrelser. For jevn skalering kan du bruke CSS clamp():

/* Skalerer fra body (16px) til title-small (28px) */
font-size: clamp(
  var(--jkl-font-size-body),
  1rem + 2vw,
  var(--jkl-font-size-title-small)
);

I de fleste applikasjoner er det tilstrekkelig å bruke faste størrelser og la layouten håndtere tilpasningen via responsive breakpoints.

Når skal du bruke hvilken størrelse?

Display / Title Large

Kampanjesider, onboarding-intro, store markedsføringsseksjoner. Maks én per side.

Title Medium / Title Small

Sidetitler og hovedseksjoner i applikasjoner. Bruk én Title Medium per side.

Heading Large / Heading Medium

Underseksjoner, kortoverskrifter, accordion-titler og skjemagrupper.

Body

All løpende tekst: instruksjoner, beskrivelser, innhold i modaler og drawers.

Small / Micro

Hjelpetekst under skjemafelt, timestamps, juridiske merknader, tags og badges.

Tilgjengelighet og typografi

WCAG 2.1 stiller krav til typografi som Jøkul hjelper deg å overholde:

1. Tekststørrelse (1.4.4): Tekst skal kunne forstørres til 200 % uten tap av innhold. Unngå faste px-verdier på font-size i rot-elementet; bruk rem.
2. Tekstspacing (1.4.12): Innhold skal ikke gå tapt om brukeren øker linjehøyde til 1,5, avstand etter avsnitt til 2em, bokstavavstand til 0,12em og ordavstand til 0,16em.
3. Kontrast (1.4.3): Normal tekst (under 18pt) krever kontrastforhold på minst 4,5:1 mot bakgrunnen. Jøkuls fargetoken-system er designet for å overholde dette automatisk.