Gå til hovedinnhold
TOKENS

Typografi

Ved å definere tydelige tokens for font weights, størrelser og linjehøyder, blir det enklere å innføre konsistent typografi.

Vi kan anbefale å bruke vår Typografipakke for konsistent hierarki for typografi.

@use '@entur/tokens/dist/styles.scss';

.button {
    font-weight: $font-weights-body;
    font-size: $font-sizes-extra-small;
    line-height: $line-heights-extra-small;
}

Tekstvekting (font-weight)

Tekstvekting har verdier for tykkelsen eller boldness til en font. Ved å definere fontvekter som tokens kan man bygge forskjellige typografiske stiler og hierarkier. Til eksempel har man $font-weights-body for brødtekst (body er brødtekst på engelsk) og $font-weights-heading til overskrifter.

NavnVerdi
500
600

Tekststørrelser (size)

Tekststørrelser inneholder fontstørrelser. Tokenssettet har verdier fra minste tekst small text opp til største tekst heading 1. Bruk av størrelsetokens, som $font-sizes-small, gjør det enklere å skalere tekst basert på eksempelvis brukerens enhet. Da kan tokenen peke på ulike verdier for bruk på mobil eller PC. Den semantiske navngivningen gjør det også enklere å opprettholde visuelt hierarki i tekst.

NavnVerdi
10px (0.625rem)
12px (0.75rem)
14px (0.875rem)
16px (1rem)
20px (1.25rem)
24px (1.5rem)
28px (1.75rem)
32px (2rem)
40px (2.5rem)

Linjehøyder (line-height)

Linjehøyder bestemmer avstanden mellom linjene i tekstblokker. Å ha klart definerte linjehøyder bidrar til å forbedre lesbarheten av teksten. Linjehøyder kan også tilpasses forskjellige tekststiler og størrelser for å sikre at linjeavstanden passer godt sammen med den valgte fonten og layouten.

NavnVerdi
14px (0.875rem)
16px (1rem)
20px (1.25rem)
22px (1.375rem)
24px (1.5rem)
28px (1.75rem)
30px (1.875rem)
36px (2.25rem)
42px (2.625rem)
48px (3rem)
60px (3.75rem)
Rediger denne siden på Bitbucket