DDS/Typography

Typography

The type scale uses system fonts for maximum readability across platforms.

Font Families

--ds-font-sans

The quick brown fox

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto

--ds-font-mono

const x = 42

"SF Mono", "Fira Code", ui-monospace

Type Scale

text-xs

12px

The quick brown fox

Captions, badges, helper text

text-sm

14px

The quick brown fox

Body text, UI labels, table cells

text-base

16px

The quick brown fox

Default body copy

text-lg

18px

The quick brown fox

Lead text, section intro

text-xl

20px

The quick brown fox

Subheadings, card titles

text-2xl

24px

The quick brown fox

Section headings (h3)

text-3xl

30px

The quick brown fox

Page headings (h2)

text-4xl

36px

The quick brown fox

Hero headings (h1)

Font Weights

Normal (400)

Design System

Medium (500)

Design System

Semibold (600)

Design System

Bold (700)

Design System