Skip to content

Typography

A 13px base for dense tools, sized in rem. One superfamily: sans for reading, serif for headings and the single figure a tile exists to show, mono for identifiers.

Scale

Each size carries its own line height, a multiple of 4px. Nothing goes above 32px: these are the sizes of the product, and this site’s larger reading sizes are its own.

  • --text-2xs10px / 14px

    text-2xs

    uppercase column headers

  • --text-xs11px / 16px

    text-xs

    timestamps, metadata

  • --text-sm12px / 16px

    text-sm

    table cells, dense labels

  • --text-base13px / 20px

    text-base

    body, default UI text

  • --text-md14px / 20px

    text-md

    section headings

  • --text-lg16px / 24px

    text-lg

    page title

  • --text-xl20px / 28px

    text-xl

    modal titles — rare

  • --text-metric-sm24px / 28px

    text-metric-sm

    secondary KPI

  • --text-metric32px / 36px

    text-metric

    primary KPI, ceiling

Families

Drawn to share proportions. The serif applies by element: every heading, and the metric tier. Text that isn’t a heading never goes serif.

  • --font-sansSource Sans 3 Variable

    Body and interface text, at every size.

  • --font-headingSource Serif 4 Variable

    Every heading, by element

  • --font-monoSource Code Pro Variable

    API-KUS-2607-00007 trial_balance_monthly.csv

The display boundary

At 24px and above, text is seen, not read: the one figure a tile exists to show takes the serif’s display cut, through MetricTile.

H1 operating profit¥2.2bn
Budget ¥2.5bn
H1 shortfall¥355m
Under budget

Numerals

Tabular figures everywhere, prose included, so columns of figures line up. Misaligned figures in a financial tool are a correctness hazard.

Exchange rates: subsidiary profits worth fewer yen
−¥41,415,809
Exchange rates: KJP margin on intercompany sales
−¥275,333,022
Great Lakes Duplicating Supply reserve (US)
−¥112,654,251
Seventh-floor vacancy (real estate)
−¥37,800,000
Personnel costs (hiring freeze)
¥417,533,766
Gross profit at constant rates and other
−¥305,523,245

Text colours

Chosen per mode by lightness, never by mirroring the other mode’s step. Tertiary is never text anyone reads.

Light

  • The month, explained.

    text-primaryledger-950, 16.39:1

  • The month, explained.

    text-bodyledger-900, 12.38:1

  • The month, explained.

    text-secondaryledger-700, 6.64:1

  • The month, explained.

    text-tertiaryledger-600, 4.89:1

Dark

  • The month, explained.

    text-primaryledger-50, 16.39:1

  • The month, explained.

    text-bodyledger-100, 15.01:1

  • The month, explained.

    text-secondaryledger-300, 10.15:1

  • The month, explained.

    text-tertiaryledger-400, 7.37:1