Internal
Typography style guide
One scale, used everywhere. Headlines are Source Serif 4; body, labels and interface text are Public Sans. Every size is rem-based and fluid, so it scales with the reader's text-size choice and never clips on a narrow phone.
Heading scale
The FCA adds 41 firms to its Warning List
H1 · clamp(1.75rem → 3rem) · line-height 1.1 · serif 600
What the listing does and does not mean
H2 · clamp(1.375rem → 1.875rem) · line-height 1.2
Clone firms and lookalike websites
H3 · clamp(1.125rem → 1.375rem) · line-height 1.3
How we verified this
H4 · clamp(1rem → 1.125rem) · line-height 1.35
Sources used
H5 · 1rem · line-height 1.4
Correction history
H6 · 0.9375rem · line-height 1.45
Secondary and supporting text
Warning list
.kicker · 0.6875rem · 700 · tracking 0.14em · uppercase
A standfirst carries the second-most weight on a page: one or two sentences that tell a reader what the story establishes before they commit to it.
.standfirst · clamp(1rem → 1.125rem) · line-height 1.6 · muted
A caption or sourcing note. Used under images, logos and tables, never for the main argument.
.caption-text · 0.8125rem · line-height 1.5 · muted
Body copy
Body text is Public Sans at 1rem with a 1.75 line height and a measure capped near 68 characters. Paragraph spacing is 0.9rem, lists inherit the same rhythm, and links are underlined with a 2px offset so they are identifiable without relying on colour alone.
- Lists use the same line height as paragraphs.
- Long strings — URLs, reference numbers, firm names — wrap rather than overflow.
.prose-editorial · 1rem · line-height 1.75 · max-width 3xl
Reader text size
The control in the site header sets --reader-scale on the document root and stores the choice in the browser. Four steps — standard, large, larger, largest — reach 150% on top of any browser zoom, which clears the WCAG 1.4.4 requirement of 200% without loss of content or function.
Rules of use
| Element | Where it is used | Size | Line height |
|---|---|---|---|
| H1 | Page and article headline. One per page. | clamp(1.75rem → 3rem) | 1.1 |
| H2 | Section heading inside a page or article. | clamp(1.375rem → 1.875rem) | 1.2 |
| H3 | Sub-section, card headline, list item title. | clamp(1.125rem → 1.375rem) | 1.3 |
| H4 | Small block heading, sidebar module. | clamp(1rem → 1.125rem) | 1.35 |
| H5 | Label-weight heading inside dense panels. | 1rem | 1.4 |
| H6 | Smallest heading. Rare — prefer a kicker. | 0.9375rem | 1.45 |
- Never skip a heading level; the outline is how a screen reader navigates the page.
- Never set a size in px — every size is rem-based so the reader control works.
- Body text never goes below 0.8125rem, and muted text always sits on a token pair that clears 4.5:1.
- Headings balance and wrap; single-line list headings truncate instead of breaking the grid.