Typography

Explore the site’s type hierarchy, text colours, and readability across different surfaces.

Type hierarchy

The site’s authored styles, using the current font. Larger heading sizes apply from 640px.

Page heading

2.25–3rem · 600
Line height 1.05

A clear place to begin.

Section heading

1.875–2.25rem · 600
Line height 1.05

Make room for the details.

Subsection heading

1.25rem · 600
Line height 1.75rem

A little more context

Lead paragraph

1rem · 400
Line height 1.75rem

Good typography helps a reader find their way, one thought at a time.

Body text

0.875rem · 400
Line height 1.5rem

Keep the important details easy to read, with enough space for each line to breathe.

Interface label

0.875rem · 600
Line height 1.25rem

Project name

Caption

0.75rem · 400
Line height 1rem

Last updated a moment ago.

Inline code

0.875rem · 400
Line height 1.5rem

color: var(--cc-foreground);

Text colours

Use emphasis to guide attention and supporting text to add context.

Foreground

The main point, clearly stated.

Muted

Supporting details give the main point context.

Subtle

A caption or a small piece of supporting information.

Link

See the reading examples

Success

Status text carries meaning through words as well as colour.

Warning

Status text carries meaning through words as well as colour.

Critical

Status text carries meaning through words as well as colour.

Information

Status text carries meaning through words as well as colour.

Reading examples

Field notes

Give each thought some room

A heading sets the direction. The first paragraph introduces the idea, and the next gives it enough detail to be useful.

Short lines and a steady rhythm make longer passages easier to follow. A change in weight or colour can point out what matters without interrupting the reading.

Explore text on different surfaces

Project details

Project name: Website refresh
Next step: Review the colour and type choices with the design team.

Updated today · Ready for review

Surface pairings

The same message on different surfaces. Use the Preview inspector to explore the text and background tokens.