Typografi

Typsnitt

Sundsvalls kommun använder Raleway för rubriker och display-text, och Arial för brödtext och UI. Båda används för att de redan finns installerade på de flesta system.

Stack	Använd för	Token
Raleway, Arial	Rubriker, hero, display	--font-family-header
Arial, Helvetica	Brödtext, knappar, formulär, navigering	--font-family-default
monospace	Kod, tabeller med fast bredd	--font-family-mono

Webbfont

Raleway laddas inte från CDN i @sk-web-gui/core-paketet. Det är upp till applikationen att inkludera den (t.ex. via Google Fonts eller självhost). Om Raleway saknas faller stacken tillbaka på Arial automatiskt.

Rubriker (Raleway)

52px Den enda meningen om designsystem som inte finns

40px Den enda meningen om designsystem som inte finns

32px Den enda meningen om designsystem som inte finns

24px Den enda meningen om designsystem som inte finns

20px Den enda meningen om designsystem som inte finns

18px Den enda meningen om designsystem som inte finns

Raleway Bold

52px Den enda meningen om designsystem som inte finns

40px Den enda meningen om designsystem som inte finns

32px Den enda meningen om designsystem som inte finns

24px Den enda meningen om designsystem som inte finns

20px Den enda meningen om designsystem som inte finns

18px Den enda meningen om designsystem som inte finns

Brödtext (Arial)

24px Den enda meningen om designsystem som inte finns

20px Den enda meningen om designsystem som inte finns

18px Den enda meningen om designsystem som inte finns

16px Den enda meningen om designsystem som inte finns

14px Den enda meningen om designsystem som inte finns

12px Den enda meningen om designsystem som inte finns

10px Den enda meningen om designsystem som inte finns

Arial Bold

24px Den enda meningen om designsystem som inte finns

20px Den enda meningen om designsystem som inte finns

18px Den enda meningen om designsystem som inte finns

16px Den enda meningen om designsystem som inte finns

14px Den enda meningen om designsystem som inte finns

12px Den enda meningen om designsystem som inte finns

10px Den enda meningen om designsystem som inte finns

Knapptext (Raleway Bold)

16px Skicka ansökan

14px Skicka ansökan

12px Skicka ansökan

Semantiska storlekar

Designsystemets fontSizes är semantiska, inte numeriska. Använd dessa i kod – inte rå pixel-storlek.

Token	Värde	När använda
font-size-display-1	8rem	Hero / landningssida
font-size-h-1	4rem	Sidans huvudrubrik
font-size-h-2	3.2rem	Sektionsrubrik
font-size-h-3	2.6rem	Underrubrik
font-size-h-4	2.4rem	Mindre rubrik
font-size-lead	2rem	Ingress
font-size-base	1.6rem	Brödtext (standard)
font-size-large	1.8rem	Större brödtext
font-size-small	1.4rem	Metadata, hjälptext
font-size-label-*	1.2–1.8rem	Formuläretiketter (storlek per size)

Storlekarna har responsiva varianter (lg, md, sm) — komponenterna i @sk-web-gui/react plockar rätt storlek per breakpoint automatiskt.

Källa

Typsnittsstack: packages/theme/src/fonts.ts. Storlekar: packages/theme/src/units.ts.