Typography
The typefaces Headland Yachting uses, and how headings and text are sized and spaced.
Typefaces
- Headings: DM Serif Display Page titles and section headings.
- Body text: DM Sans Running text, buttons, forms and navigation.
- Monospace: System monospace Code, and figures that need to line up.
Headings and text
A clear page title
A section heading
A smaller heading
Body text sits at a comfortable size and line length for reading. Links take the accent colour.
Captions and supporting text are smaller and quieter.
A clear page title
A section heading
A smaller heading
Body text sits at a comfortable size and line length for reading. Links take the accent colour.
Captions and supporting text are smaller and quieter.
Hierarchy comes from weight, size and space, not capitals: headings are set in sentence case, without all-caps labels above them.
Sizes
| Token | Size | Sample |
|---|---|---|
12px | Headland Yachting | |
13.5px | Headland Yachting | |
15px | Headland Yachting | |
16.5px | Headland Yachting | |
18px | Headland Yachting | |
22px | Headland Yachting | |
16px | Headland Yachting | |
17px | Headland Yachting | |
12px | Headland Yachting | |
14px | Headland Yachting | |
16px | Headland Yachting | |
clamp(19px, 2.4vw, 23px) | Headland Yachting | |
clamp(24px, 4vw, 34px) | Headland Yachting | |
clamp(30px, 5vw, 46px) | Headland Yachting | |
clamp(34px, 6vw, 56px) | Headland Yachting | |
clamp(16px, 2vw, 18px) | Headland Yachting |
Type tokens
| Token | Light | Dark | Use |
|---|---|---|---|
'DM Serif Display', Georgia, 'Times New Roman', seriffont.family.dm-serif | 'DM Serif Display', Georgia, 'Times New Roman', seriffont.family.dm-serif | Headings, display text, card titles | |
'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-seriffont.family.dm-sans | 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-seriffont.family.dm-sans | Running text, interface text, buttons | |
ui-monospace, SFMono-Regular, Menlo, Consolas, monospacefont.family.system-mono | ui-monospace, SFMono-Regular, Menlo, Consolas, monospacefont.family.system-mono | Eyebrows, labels, code, tabular figures | |
'DM Serif Display', Georgia, 'Times New Roman', seriffont.family.dm-serif | 'DM Serif Display', Georgia, 'Times New Roman', seriffont.family.dm-serif | Somnia's default wordmark (the site name) follows the heading font; a brand with a fixed logo face sets its own | |
'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-seriffont.family.dm-sans | 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-seriffont.family.dm-sans | The strapline under a logo lockup |
| Token | Light | Dark | Use |
|---|---|---|---|
none | none | text-transform for h1 to h3 | |
0em | 0em | letter-spacing for h1 to h3 | |
400 | 400 | font-weight for h1 to h3 and page titles. A display face with one weight (e.g. DM Serif Display) sets 400 so the browser doesn't fake a bold | |
none | none | text-transform for buttons | |
0.01em | 0.01em | letter-spacing for buttons |