Interface typography

This skill reviews how interface text is set. It checks numeric figures, OpenType features, wrapping and uppercase spacing.

Every check is a pair. The broken line sits beside the line that replaces it.

The features below are exact when the font ships them. Do not invent a stylistic set the family does not have. ss02 is the published disambiguation set for fonts that include it. Layout, measure and color contrast are out of scope. Wrapping rules here are the ones from userinterface.wiki, including balance on headings and pretty on body text.

When to use

Use this when setting prices, tables, prose, headings, links, uppercase labels or @font-face. Use visual-design for spacing tokens that are not type. Use laws-of-ux when the issue is target size rather than glyphs.

1. Read the text styles

Read the files in scope. Note body, headings, data, code and uppercase labels separately. Record which font files are loaded.

2. Check figures and features

Columns, prices and dashboards use font-variant-numeric: tabular-nums. That is type-tabular-nums-for-data. Body prose uses oldstyle-nums. Tables and headings use lining-nums, with tabular-nums when they are data. That is type-oldstyle-nums-for-prose. Code-adjacent UI uses slashed-zero. That is type-slashed-zero. Fractions in running text use diagonal-fractions. That is type-proper-fractions.