Type

Seventeen named roles, not t-shirt sizes. A component picks a role; it never picks a font size.

The typeface

The serif is Charter, self-hosted from the package at 64KB for four faces, with font-display: swap. Charter is the face macOS and iOS already carry, which is why the design looked right before a single font was loaded. Shipping it is what gives Android readers, 64 per cent of search traffic, the same page instead of a Noto Serif fallback.

Bitstream contributed Charter to the X Consortium in 1992 with permission to use, copy, modify, sublicense, sell and redistribute, provided the notice stays intact. That notice ships with the files. BITSTREAM CHARTER is a registered trademark of Bitstream Inc.

The sans is Inter, which the app already loads, falling back to the system UI font. Figures use the sans with tabular numerals so columns line up.

Roles, not sizes

Serif for anything a reader reads. Sans for anything a reader operates. Tabular sans for every figure. Reaching past these seventeen means a role is missing, which is a conversation rather than a one-off override.

.p234-display-1fluid / 1.04 / 700

The one dominant story. One per page, never two.

Nigeria's fuel subsidy bill fell by half in the first quarter

.p234-display-2fluid / 1.07 / 700

Article H1, secondary lead.

Canada releases list of 36 countries whose citizens can apply

.p234-headline26px / 1.18 / 700

Strong secondary story in a grid.

NGX closes higher as banking stocks lead the rally

.p234-headline-sm21px / 1.24 / 700

Card headline, sidebar lead.

UBA board approves nine-month unaudited financials

.p234-headline-xs18px / 1.3 / 700

Compact supporting headline, the stacked list items.

Senate passes the 2027 appropriation bill at second reading

.p234-standfirst19px / 1.5 / 400

The deck under a headline. One sentence that says why the story matters.

The gap between the official figure and what drivers actually pay at the pump is the story.

.p234-body18px / 1.68 / 400

Article copy. 18px serif. The floor for running text is 16px anywhere on the site.

Official NBS data puts the Lagos pump price at a figure four months old. Semantic search across the archive returns live prices from reporting this week. Both are true, and the distance between them is what a reader came for.

.p234-body-sm16px / 1.6 / 400

Summary text in cards and rails. 16px, the minimum for running text.

A compact summary in a card or a rail, set at the sixteen pixel floor.

.p234-ui15px / 1.45 / 500

Navigation, buttons, tabs, form labels.

Follow this topic

.p234-ui-sm13px / 1.4 / 500

Dense controls, filter chips, table headers.

Filter by state

.p234-kicker12px / 1.2 / 700

The section label above a headline. Carries the section colour.

Market intelligence

.p234-meta13px / 1.4 / 400

Source, timestamp, coverage count. Always ink-muted.

Channels Television · 2 hours ago

.p234-caption12px / 1.45 / 400

Photo credits and footnotes. The only role allowed below 13px.

Photograph: Reuters

.p234-data-lg32px / 1.1 / 600

The headline figure on a price or market page.

1,345.80

.p234-data18px / 1.2 / 600

Figures in tables and tiles. Tabular so columns align.

1,345.80

.p234-data-sm14px / 1.2 / 500

Deltas and units beside a figure.

+2.4%

.p234-quote22px / 1.45 / 400

Pull quotes and the lead sentence of a brief.

The figures do not describe the same month, which is the point.

The floors

Running text never drops below 16px. caption and kicker are the only roles allowed at 12px, and both are labels rather than prose. The old site was mostly 12 to 14px: text-sm appeared 1,019 times and text-xs 720 times.

Two tests enforce this. One fails on any role under 16px that is not on the small-allowed list, the other fails on any role under 13px that is not caption or kicker.

Using a role

Either apply the class, or read the role's custom properties directly when a component needs to compose them.

The class

NGX closes higher as banking stocks lead the rally

HTML

<p class="p234-headline-sm">NGX closes higher as banking stocks lead the rally</p>

.my-thing {
  font-family: var(--p234-type-headline-sm-family);
  font-size: var(--p234-type-headline-sm-size);
  line-height: var(--p234-type-headline-sm-leading);
  font-weight: var(--p234-type-headline-sm-weight);
  letter-spacing: var(--p234-type-headline-sm-tracking);
}

One lead per page

display-1 is the dominant story and appears once. If two stories both look like the lead, neither is. This is the single most important thing the scale is for: the reader should know what matters without reading a word.