Typografi

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.

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.

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.

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.