Typography
Typeface
| Role | Family | CSS |
|---|---|---|
| Everything | Geist | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
| Code, IDs | Geist Mono | 'Geist Mono Variable', ui-monospace, monospace |
ntb.no loads Geist as “GeistSans”; this repo self-hosts Geist Variable, the same design.
Site scale
For public pages and the components. Headings are semibold or bold; body text is regular at 1.6 line height.
text-ds-display64 px · 1,10 (70,4 px) · 700 · −0,010 emFørst med det siste
Hero headline. One per page. Measured: h1 64px / 70.4px, 700
text-ds-heading36 px · 1,40 (50,4 px) · 600 · 0Kurs og seminarer
Section headings; feature split headings (tighter, 1.17). Measured: h2 36px / 50.4px, 600; 36px / 42.12px in splits
text-ds-lead24 px · 1,60 (38,4 px) · 400 · 0Vi leverer nyhetene, bildene og medieteknologien dere trenger.
The sentence under the hero headline. Measured: p 24px / 38.4px, 400
text-ds-subheading24 px · 1,40 (33,6 px) · 600 · 0Vil du komme i kontakt med oss?
CTA band question, smaller section headings. Measured: h3 24px / 33.6px, 600
text-ds-title20 px · 1,40 (28,0 px) · 600 · 0Lag gode punktlister
Card titles, link card labels. Measured: h3.title 20px / 28px, 600
text-ds-body16 px · 1,60 (25,6 px) · 400 · 0Punktlister deler opp tekster, gir dem luft og gjør dem lettere å lese og få oversikt over.
Running text. Measured: p 16px / 25.6px, 400
text-ds-button16 px · 1,60 (25,6 px) · 500 · 0Button labels. Measured: a.button 16px / 25.6px, 500
text-ds-kicker16 px · 1,40 (22,4 px) · 700 · 0,044 emKong Harald V og kongehuset
Heading of a feature split, beside the image. Measured: h6 16px / 22.4px, 700, 0.7px, uppercase
text-ds-label16 px · 1,40 (22,4 px) · 700 · 0,094 emKundesenter
Footer column headings, list headings ("Kalender"). Measured: h6 16px / 22.4px, 700, 1.5px, uppercase
text-ds-eyebrow14 px · 1,40 (19,6 px) · 500 · 0,050 emSøk i bildeportalen
Small Lava label above a section ("Søk i bildeportalen"). Measured: h6 14px / 19.6px, 500, 0.7px, uppercase, Lava
text-ds-small14 px · 1,50 (21,0 px) · 400 · 0Lise Åserud / NTB
Credits, form hints, metadata. Measured: span 14px / 21px
text-ds-nav14 px · 1,00 (14,0 px) · 500 · 0Bilder og video
Main navigation items. Measured: a.nav-trigger 14px / 14px, 500
Docs scale
For docs, decisions and admin-like pages. Smaller headings, a slightly taller line for reading, and small uppercase group labels (decision DS6).
text-ds-docs-h132 px · 1,25 (40,0 px) · 600 · −0,010 emCart and checkout
One per docs page.
text-ds-docs-lead18 px · 1,60 (28,8 px) · 400 · 0How a buyer goes from a full cart to a paid order.
The paragraph under the page title.
text-ds-docs-h222 px · 1,35 (29,7 px) · 600 · −0,005 emBuyer type
Sections; listed under "On this page".
text-ds-docs-h317 px · 1,45 (24,7 px) · 600 · 0From the workspace
Within a section.
text-ds-docs-body16 px · 1,65 (26,4 px) · 400 · 0The buyer type comes from the workspace and sets the VAT basis everywhere in checkout.
Running text in docs.
text-ds-docs-small14 px · 1,55 (21,7 px) · 400 · 0D14 · Decided 2026-10-06
Tables, sidebar, captions.
text-ds-docs-eyebrow12 px · 1,40 (16,8 px) · 600 · 0,080 emOn this page
Sidebar groups, "On this page", table headers.
Hierarchy in both modes
Ink for headings and body, ink-muted for secondary text, accent-text for eyebrows.
Kurs
Lær kommareglene i lunsjen
Er du blant dem som setter komma der du synes det passer med en pustepause?
14. oktober · Kurs
Kurs
Lær kommareglene i lunsjen
Er du blant dem som setter komma der du synes det passer med en pustepause?
14. oktober · Kurs
Do
- Use one heading size step at a time; skip none.
- Keep body text at 16 px or more, 1.6 line height.
- Use uppercase only for short labels, with letter spacing.
Don’t
- Don’t use the display size outside a hero.
- Don’t set long text in bold or uppercase.
- Don’t use another typeface.