Typography

For å bruke typografistilene kan du velge mellom å bruke utility-klassene direkte, eller å lage din egen klasse hvor du bruker Sass-mixins for å hente inn riktig stil. Vi anbefaler at du bruker mixins til å lage egne klasser når du lager komponenter til løsningen din, og at du bare bruker utility-klassene til løpende tekst og overskrifter.

For å bruke mixin-ene må du ha satt opp støtte for Sass i prosjektet ditt, og importere Jøkul der du skal bruke dem, f.eks. slik: @use "~@fremtind/jkl-core/jkl";. Nøyaktig syntaks kan variere ut fra byggoppsettet ditt.

Les mer om regler for typografi under Profilen vår.

Dette er tekststilene som tilbys i Jøkul, og hvordan du bruker dem ved hjelp av mixins eller nytteklasser. Stilene tilpasses automatisk på små skjermer. Selv om navnene i fontskalaen kanskje ikke gir det inntrykket, så står du fritt til å velge hvilket overskriftsnivå som skal ha hvilket utseende. Om du vil bruke heading-5 på h3 fordi det ser best ut visuelt, så er det fritt frem for å gjøre det. Husk bare at det er en forventning at tekststørrelsen blir mindre for hvert overskriftsnivå på siden

I de aller fleste tilfeller skal tekststilene brukes som de er, slik at tekststørrelsen tilpasses brukerens skjerm. I noen tilfeller kan det likevel være riktig å spesifisere varianten av en stil, som for eksempel når man lager en versjon av en komponent for informasjonstette løsninger.

For å velge variant må du bruke Sass-mixins, og spesifisere om du vil ha varianten for small-screen eller large-screen: @include jkl.text-style("body/small-screen");

Fontskala for små skjermer