Typography
TfL uses licensed Johnston. Compare Hammersmith One and P22 Underground for web interfaces.
Choose a font profile
The official TfL typeface is Johnston, which requires permission to use. This site compares two practical alternatives so you can see how each one changes the same interface.
Hammersmith One
Free to use and the default for this site. Google Fonts has one real 400, so titles stay regular and track normally.
- 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
P22 Underground
A closer Adobe Fonts alternative to Johnston. This repo uses 400 for reading text and 600 for prominent titles.
- 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
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.
Hammersmith One
Use it when you need a free default. 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.
P22 Underground
Use it when you already have an Adobe Fonts subscription and want a closer match to Johnston. This repo uses 400 for body text and 600 for titles.
<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 opting into 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.
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.