05Typography

The pairing

The fourth voice — and the one font this system does not ship

The three voices

Mono is the material Principle 2 is made of — every index, duration, timestamp and status runs through it — and it is still the one face this system does not ship. Those runs are short, tracked and uppercase, and the reader’s own console face is not merely adequate there, it is more familiar than anything we could send them. The consequence to know: mono is SF Mono on macOS, Consolas on Windows, and whatever the distro sets on Linux, so a mono run is not an identical width across platforms. The tabular-nums in tokens/base.css is what keeps digits aligned.

Why body copy is 400

The previous family was a Nunito-derived cut whose true Regular rendered grey rather than black, so this system set reading copy at 450 (“Book”) — an interpolation step invented to fix that face’s problem. Switzer does not have it: its Regular is properly fitted, and carrying 450 across would have been cargo — half a step heavier than the designer drew, for no reason anyone could still state. Body is 400. Switzer also has a real 500, which the old family lacked, so the ramp is 400 / 500 / 600 / 700 and every step is a weight that was actually drawn.

The scale

--size-mega is left out of this table on purpose — at clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem) its preview row would be taller than everything above it put together. It is shown in place under Display & poster typography below, which is the only context it belongs in.

Compact, after carapace: 12 / 13 / 14 / 17 / 20 / 24 / 32, then the ratio opens back up above 32 because a hero is a different job from a heading. Reading copy is 14 px because this is a product with an app inside it — at 16 the player, admin and tables all had to fight the base size with --size-small, which is the tell that the base was wrong for most of the screens being built. Only the top two steps clamp: a hero has to survive a 360 px phone, a paragraph does not. Everything is rem, because one px font-size is one piece of text that stops responding to browser zoom.

Weight, leading, tracking

Measure — the most common typographic mistake in a product

Numerals — data is never proportional

Alignment in a column of figures is a typographic property, not a table one — so time, output, .ns-num and anything carrying [data-numeric] get tabular-nums in the base layer, everywhere, automatically.

Text effects — the three rules

Everything below is decoration over text that already reads correctly without it. 1. The effect is never the meaning — struck text is a real <s>, a highlight is a real <mark>, a citation is a real link to a footnote that exists. 2. It draws once — these fire when scrolled into view and then stop; a thing that loops forever mid-paragraph is an ad. 3. It collapses under reduced motion — each effect's final state is the correct rendering, so flattening leaves a drawn highlight rather than an invisible one. Source: components/css/type-fx.css + assets/js/type-fx.js.

<mark class="ns-mark ns-mark--animate">a highlighter marks a phrase</mark>
<s class="ns-strike ns-strike--animate ns-strike--muted">one record at a time</s>
<span class="ns-circle ns-circle--animate">every trigger<svg viewBox="0 0 220 60" preserveAspectRatio="none" aria-hidden="true"><path d="M28,10 C90,-2 200,2 210,22 …"/></svg></span>
<span class="ns-frame ns-frame--animate">Governor limits</span>
<h2 class="ns-scan ns-scan--lines">Developer Console</h2>
<h2 class="ns-scramble">Metadata deploy complete</h2>

Responsive shift — why the scramble exists

The scrambler's real job is not the entrance; it is the break. When a breakpoint re-wraps a heading, the text normally teleports to its new position. assets/js/type-fx.js listens to the breakpoint media queries — not to resize, which would fire on every frame — and re-settles the characters, so a reflow reads as deliberate rather than as a jump. For the layout half of the same problem, .ns-shift-group hands the browser interpolate-size and transitions on font-size, line-height, letter-spacing and max-inline-size, and .ns-shift takes a view-transition-name. Both degrade to nothing where unsupported, which is the right failure mode for a nicety. Resize this page across 40rem or 64rem to watch the heading above re-settle.

Display and poster typography

Type at --size-mega is a graphic element, not a heading: it sets solid (--leading-mega, 0.94), tightens to --tracking-mega because tracking scales with the size it is set at, and is laid out against the viewport rather than a container.

Circular text, links, citations, anchors

Content design — how the product speaks

Voice is a typographic decision, which is why it lives here rather than on a page of its own: plain English, encouraging, practical; explain why, not just what; second person for instruction, third for the product. Sentence case everywhere except uppercase mono kickers and lesson-type badges — and uppercase is a two-or-three-word device, because a tracked uppercase sentence is measurably slower to read. No emoji in product copy. Numbers only when they are concrete.

Accessibility — the typographic floor

Weight, measure and leading are accessibility properties before they are aesthetic ones. Reading copy is --weight-body (450) and never lighter; body leading is 1.65, above the 1.5 that WCAG 1.4.12 needs to survive a reader's own text-spacing overrides; every size is rem so browser zoom works; secondary ink clears 6.87:1 rather than sitting at the 4.5:1 line. The general component contract — focus, targets, motion, status colour — is on the Accessibility page.