Foundations

Typography

Two families and one type scale. A size token sets the line height and letter spacing too, so text-heading-3 is all a heading needs.

Font families

Aa

Geist · font-display

Headlines, figures, tags and product labels. Usually font-medium.

Aa

Open Runde · font-sans

Everything else: body copy, buttons, forms, tables. The default on <body>. Regular, medium and semibold.

Display

Big, fluid sizes: they scale with the screen between a phone and a wide desktop. Set in font-display.

text-display

clamp(2.5rem, 2.06rem + 1.88vw, 5rem) / 1 · -0.03em

Win more work

text-title

clamp(2.25rem, 1.722rem + 2.254vw, 3.75rem) / 1.1 · -0.03em

Win more work

text-figure

3rem / 1 · -0.03em

$249

48px — prices

text-stat

clamp(2.75rem, 2.2rem + 1.8vw, 4.125rem) / 1 · -0.045em

Win more work

Headings

Fixed sizes for cards, panels and smaller headlines.

text-heading-1

2.25rem / 2.5rem · -0.01em

Quotes that win the job

36px

text-heading-2

1.875rem / 2.25rem · -0.01em

Quotes that win the job

30px

text-heading-3

1.375rem / 1.75rem · -0.01em

Quotes that win the job

22px

text-heading-4

1.0625rem / 1.5rem · -0.005em

Quotes that win the job

17px

text-heading-5

0.875rem / 1.25rem · -0.005em

Quotes that win the job

14px

Body

Copy, labels and captions.

text-body-1

0.875rem / 1.25rem

Backbone runs sales and operations for trade businesses in one place.

14px

text-body-2

0.8125rem / 1.125rem

Backbone runs sales and operations for trade businesses in one place.

13px

text-body-3

0.75rem / 1rem

Backbone runs sales and operations for trade businesses in one place.

12px

text-body-4

0.625rem / 0.875rem

Backbone runs sales and operations for trade businesses in one place.

10px

Controls

Sized for buttons and form fields; the components already apply them.

text-field

1rem / 1.25rem

Backbone runs sales and operations for trade businesses in one place.

16px

text-field-sm

0.9375rem / 1.25rem

Backbone runs sales and operations for trade businesses in one place.

15px

text-button-sm

0.75rem / 1.125rem

Backbone runs sales and operations for trade businesses in one place.

12px

text-button-md

0.8125rem / 1.25rem

Backbone runs sales and operations for trade businesses in one place.

13px

text-button-lg

0.875rem / 1.25rem

Backbone runs sales and operations for trade businesses in one place.

14px

Usage

<h2 className="font-display text-title font-medium text-balance">Section headline</h2>
<p className="text-body-1 text-ink-subtle">Supporting line.</p>

Do:Pair a display or heading size with font-display font-medium.
Do:Use text-balance on headlines so they wrap evenly.
Don't:Don't use Tailwind's default sizes (text-lg, text-2xl): use the scale.
Don't:Don't set ink-muted text people need to read: it's too faint (2.6:1).