Design tokens · Typography

One workhorse sans, one editorial serif.

Inter does the work — dashboards, long-form prose, and small UI text all stay readable in the same family. Newsreader is an opt-in editorial serif for website surfaces like heroes and overviews. For monospace we defer to the system default; the design system doesn't ship one. Copy stays Danish-first.

Families

Inter

Display, UI & body · 400 / 500 / 600 / 700

--itkaarhus-font-sans · --itkaarhus-font-display

Aa 123

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · æøå · 0123456789 !?&—

Newsreader

Editorial display · 400 / 500 / 600 + italic

Opt-in: --itkaarhus-font-serif. Heroes, headings, KPI numbers — website surfaces, not app chrome.

Aa 123

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · æøå · 0123456789 !?&—

System monospace

Code & technical · system default

--itkaarhus-font-mono resolves to the OS monospace — no web font is loaded.

#007BA6 → rgb(0, 123, 166)

0 1 2 3 4 5 6 7 8 9 · { } [ ] ( ) · org/<repo> · POST /api/v2

Scale

text-5xl	88 / 0.98	Overblik	Hero only
text-4xl	64 / 1.02	Innovation	Page title
text-3xl	48 / 1.05	Afdelinger	Section headline
text-2xl	36 / 1.12	Aktive projekter	Subsection
text-xl	28 / 1.2	Card title	Card / dialog
text-lg	22 / 1.35	Lede paragraph	Intro copy
text-md	18 / 1.55	Editorial body	Long-form
text-base	16 / 1.55	Default body text	UI default
text-sm	14 / 1.5	Metadata & captions	Form help, table
text-xs	12 / 1.4	Eyebrow / micro	Tags, stamps

Eyebrows

A small uppercase label above a heading. The leading rule (the dash) is a deliberate signal — it marks the editorial / serif voice only. App-chrome eyebrows — page headers, cards, dashboards — stay plain.

Design tokens · Typography

Plain — app chrome

Page headers, card kickers, table sections, dashboards. No leading rule.

Indsigt · Arbejdsmiljø

Ruled — editorial voice

Only on serif / website surfaces (heroes, overviews). The 24 px rule pairs with a Newsreader heading.

Examples

Inter carries the application UI — dense, legible, hierarchy from weight and size rather than colour. Newsreader stays opt-in for editorial surfaces.

Sagsbehandling · Oversigt

Åbne sager

3 kræver handling

Sag	Ansvarlig	Frist	Dage
Tilbygning, Dokk1	Mette Sørensen	14. apr 2026	2
Aktindsigt — miljø	Jonas Bach	18. apr 2026	6
Byggetilladelse §42	Aisha Khan	30. apr 2026	18

Standard body text at 14–16 px stays comfortable across long lists and small labels alike.

Indsigt · Arbejdsmiljø

En tryg arbejdsplads starter med overblik.

Newsreader giver de redaktionelle flader ro og tyngde, med skarpe kanter helt op i displaystørrelser. Den blå farve fører an; korallen accentuerer. Brug serif til website-agtige sider — ikke til tætte applikationsflader.

Vejledning · Kom godt i gang

Ét designsystem på tværs af produkter.

Inter bærer brødtekst og UI; vægt og størrelse skaber hierarki. Hold dig til de navngivne trin i skalaen, så flader føles ens på tværs af teams.

Mønstre · Tabeller

Læsbar i tætte dataflader.

Høj x-højde og åbne bogstavformer gør Inter rolig i lange lister og små labels — fra dashboards til formularhjælpetekst.