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.

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.

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.