The quick brown fox jumps

DM Serif Display · 44px · weight 400 · tracking -0.02em

h2

The quick brown fox jumps

DM Serif Display · 32px · weight 400 · tracking -0.015em

h3

The quick brown fox jumps over the lazy dog

DM Sans · 22px · weight 700 · tracking -0.01em

h4

The quick brown fox jumps over the lazy dog

DM Sans · 17px · weight 600

h5

The quick brown fox jumps over the lazy dog

DM Sans · 14px · weight 700 · uppercase · tracking 0.08em · accent colour

h6

The quick brown fox jumps over the lazy dog

DM Sans · 13px · weight 600 · uppercase · tracking 0.06em · muted

Paragraphs

p

The quick brown fox jumps over the lazy dog. Paragraph text is the baseline of readable content — comfortable line-height and measure matter most here.

DM Sans · 16px · weight 400 · line-height 1.7

p.lead

A lead paragraph introduces a section with a slightly larger, lighter voice to ease the reader in.

DM Sans · 20px · weight 400 · line-height 1.6 · muted

p.small

Secondary body copy, captions, and supporting text. Often rendered in a muted colour to establish visual hierarchy without competing with the main paragraph.

DM Sans · 14px · weight 400 · line-height 1.65 · muted

blockquote

Good design is as little design as possible.

DM Serif Display · italic · violet left border · tinted background

Inline semantic tags

strong

This text contains strongly important content — bold weight.

em

This text adds emphasis with italic styling.

small

Main text followed by smaller fine print or legal copy inline.

mark

Use highlighted text to draw attention to a specific phrase.

del / ins

~~Removed content~~ replaced by inserted content.

abbr

The W3C sets web standards — hover to see the full title.

code

Inline code snippets use a monospace font with a tinted background.

Image gallery