Gå til innhold

Typografi

Sikt designsystem har utviklet et typografisystem som skal gjøre det enklere å lage produkter som er både funksjonelle og lettfattelige. Systemet skal ivareta lesbarhet og utseende på tvers av skjermstørrelser og tjenester.

Fontfamilier

Som i typografihierarkiet fra den visuelle profilen benytter vi tre vekter av Haffer i utviklingskontekst, Regular, Semibold og Bold.

Haffer Semibold 600

Haffer Regular 400

I kontekster der det ikke er praktisk å benytte Haffer, benyttes Arial som erstatning. Arial er tilgjengelig som systemfont på både Windows og MacOS.

Tokenbasert typografi

Sikt designsystem benytter seg av tokens for å holde kontroll på typografiske variabler, gjøre vedlikehold enklere og strømlinjeforme kommunikasjonen mellom design og implementasjon.

Det finnes basetokens for følgende attributter: font-size, font-weight, line-height og letter-spacing (se tabell over basetokens for typografi på bunnen av siden).

Sikt designsystem har også semantiske tokens for følgende innholdstyper: headline, body text, label og overline. Disse er levert som typografistiler i Figma.

Headlinetokens og -stiler

Sikt har et stort spenn i sine produkter og tjenester, både i brukergrupper og for informasjonstetthet. Det er stor variasjon i behovene fra brukerflate til brukerflate.

For å gjøre det enklere å komme i gang, også uten designere i teamet, har vi satt sammen to pakker av headlinetokens med utgangspunkt i hva som passer for henholdsvis lav og høy kompleksitet i brukerflaten. Disse pakkene heter Editorial og Application, og dette er synlig i navn på både tokens og tilhørende Figma-stiler.

Headline-nivåene er satt opp med modes, slik at typografien skalerer utifra skjermstørrelse.

Editorial

Editorial-pakken er utgangspunktet for det fleste flatene i Sikt. Den har høy størrelseskontrast mellom de største og de minste overskriftene. Med Editorial kan du lage nøkterne og rolige layouter, men har også anledning til å blåse opp overskrifter som trenger fokus.

Application

For team som har produkter med stor informasjonstetthet, mindre tekststørrelser og mindre ledig plass i sine produkter kan man benytter Application-pakken. I Application er de største nivåene skalert ned og denne pakken har også mindre størrelseskontrast mellom hvert trinn.

Tilpasning og egne stiler

Målet med typografitokens og -stiler har vært å gi brukerene av Sikt designsystem fleksibilitet, men fortsatt benytte Sikt designsystem sine basetokens. Pakkene med semantiske headlinetokens og -stiler skal gjøre det enklere å komme raskt i gang for de fleste, men med token-skalaene som ligger i bunn har man stor fleksibilitet ved behov.

Når man benytter pakkene står teamet fritt til å hoppe over nivåer dersom innholdet tilsier at man burde forsterke hierarkiet. Det kan for eksempel bety at det benyttes -application-xxl og -application-l for h1 og h2, i stedet for -application-xxl og application-xl.

Det er også slik at dersom behovet oppstår, så kan man opprette egne stiler lokalt, så lenge man benytter Sikt designsystem sine basetokens for attributtene.

Om teamet oppretter egne overskriftsstiler anbefaler vi å sette opp tilsvarende løsning for skalering etter skjermstørrelse som det vi har gjort i Editorial og Application-pakken.

Editorial headlines

editorial/headline-xxl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-120048px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-xs1.15

editorial/headline-xl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-110042px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-xs1.15

editorial/headline-l

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-90032px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-xs1.15

editorial/headline-m

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-80028px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-s1.25

editorial/headline-s

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-70024px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-s1.25

editorial/headline-xs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-60022px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-m1.35

editorial/headline-xxs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-30016px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-l1.5

Application headlines

application/headline-xxl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-100036px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-s1.25

application/headline-xl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-80028px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-s1.25

application/headline-l

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-70024px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-s1.25

application/headline-m

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-60022px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-s1.25

application/headline-s

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-50020px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-m1.35

application/headline-xs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-40018px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-m1.35

application/headline-xxs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-30016px
fontweighttypography-fontweight-semibold600
lineheighttypography-lineheight-m1.35