Typografi

Designsystemet har et sett med typografi-tokens som dekker alle tekststiler. Tokensene er responsive og tilpasser seg automatisk mellom desktop og mobil.

Skrifttyper

Skriftfamiliene hører til merkevaren. Bekk bruker GT America for brødtekst (font-family.base) og overskrifter (font-family.display), og GT America Expanded for knapper og handlinger (font-family.action).

Tailwind-klasse	CSS-variabel
`font-sans`	`--font-family-base`
`font-display`	`--font-family-display`
`font-action`	`--font-family-action`

Skriftvekter

Token	Verdi	Bruksområde
`font-weight.light`	Light	Dekorativ tekst
`font-weight.regular`	Regular	Brødtekst og overskrifter
`font-weight.medium`	Medium	Fremhevet tekst og handlinger

Tekststiler

Designsystemet definerer syv semantiske tekststiler som kombinerer skriftstørrelse, vekt og linjehøyde:

Eksempel	Token	Beskrivelse
Aa	heading.display	Stort visuelt overskrift-element
Aa	heading.headline	Hovedoverskrift
Aa	heading.subtitle	Undertittel
Aa	heading.overline	Overlinetekst
Aa	leading	Ingress / fremhevet tekst
Aa	body	Brødtekst
Aa	action	Knapper og handlinger

Størrelser per breakpoint

Tekststørrelsene endrer seg mellom mobil og desktop:

Token	CSS-variabel (font-size)	Desktop	Mobil
heading.display	--typography-heading-display-font-size	56px	40px
heading.headline	--typography-heading-headline-font-size	48px	32px
heading.subtitle	--typography-heading-subtitle-font-size	24px	20px
heading.overline	--typography-heading-overline-font-size	20px	16px
leading	--typography-leading-font-size	32px	24px
body	--typography-body-font-size	20px	16px
action	--typography-action-font-size	16px	12px

Tekststørrelser i Tailwind

Komponentene bruker bare tekststørrelser som er koblet til tokens. Tailwinds egne størrelser (text-sm, text-lg osv.) følger ikke merkevaren.

Klasse	Bekk	Bruksområde
`text-caption`	12 px	Etiketter, badges og metatekst
`text-small`	14 px	Sekundærtekst og kompakte kontroller
`text-body`	16 px	Brødtekst og skjemafelt
`text-title`	18 px	Titler i dialoger og paneler
`text-heading-sm`	20 px	Små overskrifter
`text-heading-md`	24 px	Mellomstore overskrifter
`text-heading-lg`	30 px	Store overskrifter
`text-leading`	32 px (24 px mobil)	Ingress
`text-action`	14 px (12 px mobil)	Handlingstekst

Linjehøyder

Token	Verdi	Bruksområde
`line-height.sm`	130%	Kompakt tekst
`line-height.md`	150%	Standard (brukes av alle tekststiler)
`line-height.lg`	170%	Luftig tekst

Bruk i CSS

.display-heading {
  font-family: var(--typography-heading-display-font-family);
  font-size: var(--typography-heading-display-font-size);
  font-weight: var(--typography-heading-display-font-weight);
}
 
.body-text {
  font-family: var(--typography-body-font-family);
  font-size: var(--typography-body-font-size);
  font-weight: var(--typography-body-font-weight);
}
 
.action-text {
  font-family: var(--typography-action-font-family); /* GT America Expanded */
  font-size: var(--typography-action-font-size);
  font-weight: var(--typography-action-font-weight); /* 500 */
  text-transform: uppercase;
}

Bruk i TypeScript

import { tokens } from "@kilden/design-tokens";
 
const displayFontSize = tokens.typography.heading.display["font-size"];
// → "var(--typography-heading-display-font-size)"