Typografi i Jøkul

God typografi er ryggraden i ethvert designsystem. Se hvordan Jøkul håndterer det.

Kategori: Design
Publisert: 08.03.2026
Lesetid: 2 min.

En kollega viste meg en gang en skjerm der vi hadde fire ulike skriftstørrelser for "brødtekst" i fire ulike deler av applikasjonen. Alle var rundt 16px, men ingen var eksakt like. Det hadde skjedd gradvis — én liten override her, en annen der. Ingen hadde lagt merke til det, men alle kjente at noe var galt. Det er det typografi gjør når det svikter: det undergraver tillit uten at du kan peke på nøyaktig hvorfor.

Fremtind Grotesk — og hvorfor vi laget vår egen font

Jøkul bruker Fremtind Grotesk, en egenutviklet humanistisk sans-serif. Beslutningen om å lage en egenutviklet font var ikke tatt lett — det er dyrt og tidkrevende. Men ingen off-the-shelf-font hadde den kombinasjonen vi trengte: høy x-høyde for lesbarhet i små størrelser, norske spesialtegn i perfekt form, og en tone som sier "norsk forsikringsselskap" uten å se kjedelig ut.

Fremtind Grotesk lastes automatisk når du importerer Jøkuls CSS. Ingen manuell fontlasting nødvendig.

Typografiskalaen — seks nivåer som faktisk brukes

Vi startet med ni skriftstørrelser. Etter et halvt år hadde vi innsett at folk brukte tre av dem 90% av tiden. Skalaen er nå seks nivåer, og hvert nivå har et klart formål:

jkl-title-large — 3rem: Hero-overskrifter. Brukes maksimalt én gang per side, og bare på landingssider.
jkl-title-medium — 2.25rem: Primær sidetittel. Én per side. Ikke to.
jkl-title-small — 1.75rem: Seksjonsoverskrift, tilsvarer h2. Det du bruker mest.
jkl-heading-large — 1.375rem: Underoverskrift, h3-nivå.
jkl-body — 1rem: Standard brødtekst. 16px. Gjør ikke denne lavere.
jkl-small — 0.875rem: Hjelpetekst og metadata. Ikke bruk den til avsnitt — det er for lite.

SCSS-miksiner i stedet for CSS-klasser

Jøkul eksponerer typografistilene som SCSS-miksiner, ikke bare ferdige CSS-klasser. Det betyr at du kan inkludere riktig typografi i dine egne komponenter uten å legge til ekstra HTML-wrapper-elementer:

@use "@fremtind/jokul/core" as jokul;

.min-komponent__tittel {
  @include jokul.jkl-title-small;
}

.min-komponent__brødtekst {
  @include jokul.jkl-body;
  max-width: 66ch;
}

Linjelengde — den regelen de fleste ignorerer

Optimal linjelengde er 45–75 tegn for brødtekst. Mer enn det, og øyet mister tråden.
Bruk ch-enheter, ikke px — de skalerer med fontstørrelsen.
I smale kolonner kan 35–45 tegn fungere, men test alltid med ekte innhold.

CLS og font-display — det vi lærte av en dårlig Lighthouse-score

Vi hadde en periode der Lighthouse-scoren vår falt dramatisk på CLS. Årsaken var at Fremtind Grotesk lastet sent og forskjøv hele layouten. Løsningen var å tune font-display-strategien:

font-display: swap: Brødtekst vises umiddelbart med fallback-font, deretter byttes til Fremtind Grotesk. Liten CLS-risiko.
font-display: optional: Null CLS, men fonten vises kanskje ikke ved treg tilkobling. Vi bruker dette for overskrifter over fold.

I tillegg la vi til size-adjust og ascent-override på fallback-fonten for å minimere det visuelle hoppet. CLS-scoren gikk fra 0.18 til 0.02.

Typografi er det usynlige arbeidet. Når det er gjort riktig, legger ingen merke til det. Når det er galt, vet alle at noe er skjevt — selv om ingen kan sette ord på det. Jøkul gjør jobben for deg, men du må respektere systemet og la det gjøre det.