Typography · Perron

Skip to the content

Roles

Seventeen roles, one per job. Set every piece of text with a role, either as a class (perron-typography-body) or as a composite custom property (font: var(--perron-typography-body) plus letter-spacing: var(--perron-typography-body-tracking)).

Anything people compare down a column is a data role: times, countdowns, counts, delays, percentages. They use tabular figures, so columns line up.
overline sets its text in capitals: the class adds text-transform: uppercase, and with the custom property you add it yourself. Write the source text in sentence case.
lead is for the paragraph under a page title, on the docs website and any long-form screen. body stays at 14 px for sentences and inputs, so a page intro never borrows a heading role or a raw size.
On phones, display and data-xl step down to font.size.800, and stat to font.size.600. These are the only places a component reaches for a size directly.

Linje 5C mod Husum Torv, 08:14

typography.display Familjen Grotesk 700, 48 px / 1.15, tracking -0.96 px

Hero headline. Steps down to font.size.800 on phones.

Linje 5C mod Husum Torv, 08:14

typography.heading-lg Familjen Grotesk 700, 24 px / 1.15, tracking -0.48 px

Dialog and page titles

Linje 5C mod Husum Torv, 08:14

typography.heading-md Familjen Grotesk 600, 20 px / 1.15, tracking -0.3 px

Panel titles: a stop or a destination. The wordmark is heading-md set bold.

Linje 5C mod Husum Torv, 08:14

typography.heading-sm Schibsted Grotesk 600, 14 px / 1.3, tracking 0 px

Card titles, such as a disruption

Linje 5C mod Husum Torv, 08:14

typography.lead Schibsted Grotesk 400, 16 px / 1.5, tracking 0 px

Page intros: the paragraph under a page title on long-form screens

Linje 5C mod Husum Torv, 08:14

typography.body Schibsted Grotesk 400, 14 px / 1.5, tracking 0 px

Sentences in panels and dialogs, and the text typed into inputs

Linje 5C mod Husum Torv, 08:14

typography.body-sm Schibsted Grotesk 400, 13 px / 1.5, tracking 0 px

Supporting sentences: the line under a title, disruption details

Linje 5C mod Husum Torv, 08:14

typography.caption Schibsted Grotesk 400, 12 px / 1.5, tracking 0 px

Notes, second lines in rows, legend descriptions, map credits

Linje 5C mod Husum Torv, 08:14

typography.label Schibsted Grotesk 600, 13 px / 1.3, tracking 0 px

Buttons, tabs, chips and names in lists

Linje 5C mod Husum Torv, 08:14

typography.label-sm Schibsted Grotesk 500, 12 px / 1.3, tracking 0 px

Legend items, field and stat labels, tooltips

Linje 5C mod Husum Torv, 08:14

typography.overline Schibsted Grotesk 600, 11 px / 1.3, tracking 0.88 px, uppercase

Section headings and tags, set in capitals

Linje 5C mod Husum Torv, 08:14

typography.badge Schibsted Grotesk 700, 12 px / 1, tracking 0.12 px

The line name inside a line badge, such as M1 or 5C

Linje 5C mod Husum Torv, 08:14

typography.stat Schibsted Grotesk 600, 28 px / 1.15, tracking -0.84 px

Key figures. Steps down to font.size.600 on phones.

Linje 5C mod Husum Torv, 08:14

typography.data-xl JetBrains Mono 600, 48 px / 1, tracking -1.92 px

Kiosk clock. Steps down to font.size.800 on phones.

Linje 5C mod Husum Torv, 08:14

typography.data-lg JetBrains Mono 600, 16 px / 1.15, tracking 0 px

Top bar clock, departure countdowns

Linje 5C mod Husum Torv, 08:14

typography.data JetBrains Mono 500, 12 px / 1.3, tracking 0 px

Times, delays, counts and percentages in lists and tables

Linje 5C mod Husum Torv, 08:14

typography.data-sm JetBrains Mono 500, 11 px / 1.3, tracking 0 px

Counts in chips and tabs, chart axes, the time under a countdown

Families and weights

Token	Value
`font.family.display`Display: headings and the wordmark	Aa Øresund 08:14`Familjen Grotesk, Schibsted Grotesk, system-ui, sans-serif`
`font.family.body`Sentences, labels, controls and small headings: every role but the large headings and the figures	Aa Øresund 08:14`Schibsted Grotesk, system-ui, -apple-system, Segoe UI, Roboto, sans-serif`
`font.family.data`Data: times, countdowns, counts and data ages. Always tabular figures.	Aa Øresund 08:14`JetBrains Mono, ui-monospace, SF Mono, Menlo, Consolas, monospace`
`font.weight.regular`Running text: lead, body and caption sentences	Aa`400`
`font.weight.medium`Controls, list titles, data	Aa`500`
`font.weight.semibold`Labels, small headings, overlines and key figures	Aa`600`
`font.weight.bold`Display titles, wordmark, line badges	Aa`700`

Sizes

Sizes come from one scale, numbered like the spacing scale: the number divided by 100 is the size in 4 px units, so font.size.400 is 16 px. Roles use it.

Token	Value
`font.size.275`	Aa`11 px`
`font.size.300`	Aa`12 px`
`font.size.325`	Aa`13 px`
`font.size.350`	Aa`14 px`
`font.size.400`	Aa`16 px`
`font.size.500`	Aa`20 px`
`font.size.600`	Aa`24 px`
`font.size.700`	Aa`28 px`
`font.size.800`	Aa`32 px`
`font.size.1200`	Aa`48 px`

Line heights

Four line heights. Use none for single lines in a fixed box, tight for headings and figures, snug for labels and data, and normal for running text.

Token	Value
`font.line-height.none`Single lines in a fixed box: line badges, the kiosk clock	Two lines of body text`1`
`font.line-height.tight`Headings, key figures and clocks	Two lines of body text`1.15`
`font.line-height.snug`Labels, small headings and data	Two lines of body text`1.3`
`font.line-height.normal`Running text that wraps: lead, body and caption sentences	Two lines of body text`1.5`