Typography

Typography in Prism is purpose driven. You pick a role (what the text does) and the token sets size, line height, and weight for you.

Typography roles

Roles give each type style a fixed purpose. Pick the role that matches what the text does, not how big it should look. Prism’s type system is built on Inter, with one role per token category: heading, paragraph, and text.

Typography roles in context: a card with a heading, a paragraph, and text in a data table and actions

Heading

Creates hierarchy within components, patterns, and pages. Not for emphasis. Use a heading only when it introduces the content below it.

.heading-{1–4}
Headings in context: heading-1 as page title, heading-2 as section title, heading-3 as card header, heading-4 as small heading

Paragraph

For bodies of text that are read rather than scanned: messages, descriptions, and longer explanations. Larger line heights give more reading comfort. Not for UI elements. The extra line height costs vertical space in controls and tables.

.paragraph-{size}--{weight}
The same sentence set in paragraph-400 (16/24), paragraph-300 (14/20), and paragraph-200 (12/18)

Text

For UI elements: labels, values, table data, and metric blocks. Condensed line heights save vertical space and keep interfaces easy to scan. Not for long reading. If it runs past a few lines, switch to paragraph.

.text-{size}--{weight}
text-500 to text-200, each showing a label, a percentage change, and a price

Typography properties

Three properties apply across every role. Line height and weight are built into each token; tabular figures are switched on wherever numbers need to line up.

Line height

Line heights sit on the 4px baseline grid, with one deliberate exception: 18px, used by text-300 and paragraph-200, lands on the 2px half-step. Here, readability wins over grid rigidity.

Line heights as multiples of 4px, from 36px (4×9) for heading-1 down to 16px (4×4) for text-200, with the 18px half-step (4×4.5) of text-300 highlighted

Weights

Headings come in a fixed weight: bold for .heading-1, semi-bold for the rest. Paragraph and text styles adapt to their context, so every size is available in regular, medium, semi-bold, and bold. Medium is only for actions and navigation: buttons, links, and navigation items. The token table below lists the recommended pairings.

Inter in regular (400), medium (500), semi-bold (600), and bold (700)

Weight in dark themes

Light text on a dark background looks heavier than dark text on a light one. To keep bold looking the same in both, it drops from 700 to 600 in the dark themes.

The word Bold at weight 700 on a light card next to weight 600 on a dark card, looking equally heavy

Tabular figures

These figures have a uniform width, which makes them an ideal choice for presenting numerical data in tables. The Table component applies them automatically.

Elsewhere, use tabular figures only for numeric data related to size (e.g., percent, count, price). Don’t use them for numeric data unrelated to size (e.g., date, zip code).

font-variant-numeric: tabular-nums
Proportional figures in stacked metrics next to a right-aligned table column set in tabular figures

Tokens

The recommended class for each role, with its size, line height, and weight. Native h1–h4 elements pick up the matching heading style without a class.

Need just one property? Use the CSS variable behind the class:

.text-300--regular {
  font-size: var(--prism-font-size-text-300-regular);
  font-weight: var(--prism-font-weight-text-300-regular);
  line-height: var(--prism-font-line-height-text-300-regular);
}
ClassStyleUsage
.heading-128px / 36px · BoldPage titles
.heading-220px / 28px · SemiboldSection titles, modal headers
.heading-316px / 24px · SemiboldSubsection titles, card headers
.heading-414px / 20px · SemiboldSmall headings, sidebar titles
.paragraph-400--regular16px / 24px · RegularLong-form body text
.paragraph-300--regular14px / 20px · RegularSecondary body text, descriptions
.paragraph-200--regular12px / 18px · RegularCaptions, footnotes
.text-500--regular20px / 24px · RegularLarge UI text, featured content
.text-400--regular16px / 20px · RegularDefault UI text
.text-400--bold16px / 20px · BoldEmphasized UI text
.text-300--regular14px / 18px · RegularSecondary UI text, form hints
.text-300--bold14px / 18px · BoldEmphasized secondary text
.text-200--regular12px / 16px · RegularHelper text, timestamps
.text-200--bold12px / 16px · BoldEmphasized helper text
.text-400--medium16px / 20px · MediumLarge links
.text-300--medium14px / 18px · MediumButtons, links, navigation and breadcrumb items
.text-200--medium12px / 16px · MediumSmall buttons and links