Typography
Johnston needs a TfL licence. This site uses P22 Underground. Hammersmith One is the free alternative.
Choose a font profile
P22 Underground
This site's default. Closer to Johnston than Hammersmith One. Body stays 400. Titles use 600 and tighter tracking. Needs an Adobe Fonts kit.
- Title
Victoria line
tfl-title text-2xl- Body
Minor delays while we fix a signal fault.
text-base font-normal- Secondary information
Updated 2 minutes ago
text-sm text-muted-foreground
ROLE TYPE SETTINGS title tfl-title text-2xl 600 / -0.025em body text-base 400 / normal secondary text-sm muted 400 / normal
Hammersmith One
Free Google Font with a single 400 cut. Titles stay regular, with normal tracking.
- Title
Victoria line
tfl-title text-2xl- Body
Minor delays while we fix a signal fault.
text-base font-normal- Secondary information
Updated 2 minutes ago
text-sm text-muted-foreground
ROLE TYPE SETTINGS title tfl-title text-2xl 400 / normal body text-base 400 / normal secondary text-sm muted 400 / normal
Add a font to your app
tfl-components does not bundle or load a font. Components inherit their font family from the parent, so your app owns the choice, the loading method and the licence.
P22 Underground
This site uses P22 Underground from Adobe Fonts. Add the family to a web project kit, then set title metrics after the kit has loaded. Body stays 400. Titles use 600.
<head>
<link
rel="stylesheet"
href="https://use.typekit.net/YOUR_KIT_ID.css"
/>
</head>Title settings for P22 Underground
Confirm that the kit has loaded before using 600 and tighter tracking. A fallback font with these metrics will look wrong.
.app {
font-family: "p22-underground", sans-serif;
--tfl-title-weight: 600;
--tfl-title-tracking: -0.025em;
}Open P22 Underground on Adobe Fonts and follow the web project instructions for your account.
Hammersmith One
Use it when you need a free font. Next.js can self-host it from Google Fonts. Do not synthesize a heavier title weight or tighten sentence-case titles.
import { Hammersmith_One } from "next/font/google";
const hammersmith = Hammersmith_One({
subsets: ["latin"],
weight: "400",
});
<html lang="en" className={hammersmith.className}>Title settings for Hammersmith One
Keep the component defaults at 400 and normal tracking.
.app {
font-family: "Hammersmith One", sans-serif;
--tfl-title-weight: 400;
--tfl-title-tracking: 0;
}Read the Next.js font guide or open Hammersmith One on Google Fonts.
Official Johnston
Do not copy a font file from TfL or another site. For qualifying work, apply through TfL font requests.
Fit before shrinking
Long station names should wrap or abbreviate before they become hard to read. Scaling stops at STATION_LABEL_MIN_SCALE = 0.75, which takes a 16px label down to about 12px. Drag the demo until the two strategies split.
Keeps shrinking without abbreviations
Measuring…
Abbreviates at the 12px floor
Measuring…
220px · drag to resize
The Station labels component applies this policy while preserving find, copy and accessible names. Test real names and widths in the Station typography tool.
Licensing still belongs to the host app
Installing these components grants no right to use Johnston, TfL Go or any other protected typeface. See Licensing and brand use for the wider rules around type, colours and protected marks.