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

I Sikt så benytter vi oss av skriftfamilien Haffer. Vi har tre forskjeliige vekter tilgjengelige, som brukes i spesifiserte kontekster.

Haffer Bold 700

Haffer Semibold 600

Haffer Regular 400

Hvis det å bruke Haffer ikke er praktisk, som for eksempel presentasjoner som skal sendes ut og redigeres av eksterne bidragsytere, bruker vi Arial som erstatning.

Tokenbasert

Sikt designsystem benytter seg av tokens for å holde kontroll på våre typografiske attributter, gjøre vedlikehold enklere og gjøre design og utviklingsprosessen enklere.

Sikt leverer semantiske typografitokens i flere kategorier: headlines, body text, label og overline. Disse er bygget opp av basetokens (også kjent som primitives) som definerer skriftstørrelser (fontsize), vekt (fontweight), linjehøyder (lineheight). Basetokens finner du nederst på denne siden.

Overskriftshierarki

På bakgrunn av det enorme spennet av produkter og tjenester som sikt leverer, tilbyr Sikt Designsystem to forskjellige overskriftspakker: Editorial og Application.

Editorial headlines

Editorial-pakken er utgangspunktet for det fleste produktene i Sikt. Den ligger størrelsesmessig tett opptil overskriftsstilene som har vært brukt før. Den har høy størrelseskontrast mellom de største og de minste overskriftene, slik at man kan lage både nøkterne og rolige layouter, samt at man har anledning til å blåse opp overskrifter som trenger mer fokus.

Application headlines

Application-pakken er et tilbud som leveres på bakgrunn av noen teams behov for å ha en stor informasjonstetthet med mindre tekststørrelser og mindre luft i sine produkter. Application-pakkens overskrifter er dermed en del mindre på de største nivåene, og har også mindre størrelses forskjell mellom hvert trinn.

Uansett hvilken av pakkene man velger, kan det være et greit utgangspunkt å velge overskrifter slik at man hopper over et nivå. I stedet for xxl, xl, og l, kan det bli klarere for brukeren å se forskjell om man bruker xl, l og s. Hva som er riktig fremgangsmåte her avhenger selvfølgelig av plassbehov, og hvor mange nivåer med overskrifter man har behov for.

Editorial headlines

editorial/headline-xxl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-1200-value48px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-xs-value1.15

editorial/headline-xl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-1100-value42px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-xs-value1.15

editorial/headline-l

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-900-value32px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-xs-value1.15

editorial/headline-m

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-800-value28px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-s-value1.25

editorial/headline-s

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-700-value24px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-s-value1.25

editorial/headline-xs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-600-value22px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-m-value1.35

editorial/headline-xxs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-300-value16px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-l-value1.5

Application headlines

application/headline-xxl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-1000-value36px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-s-value1.25

application/headline-xl

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-800-value28px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-s-value1.25

application/headline-l

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-700-value24px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-s-value1.25

application/headline-m

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-600-value22px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-s-value1.25

application/headline-s

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-500-value20px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-m-value1.35

application/headline-xs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-400-value18px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-m-value1.35

application/headline-xxs

Designtokens for editorial headline
TypeTokenVerdi
fontsizetypography-fontsize-300-value16px
fontweighttypography-fontweight-semibold-value600
lineheighttypography-lineheight-m-value1.35