# Typography as interface architecture

> How five semantic type registers separate editorial narrative, reading, interface, technical evidence and runtime state without fragmenting the system.

- Category: Design Systems
- Reading time: 2 min
- Published: 2026-08-21
- Updated: 2026-09-27

Typography gives a system a reading order and a voice. Brittek uses five semantic registers so editorial narrative, reading, controls, evidence and runtime state remain visibly distinct without becoming five competing styles.

## Assign type by meaning, not size

A large heading is not automatically editorial and a small label is not automatically technical. Choose the register from the role the text performs, then choose scale, weight and measure inside that register.

The result is a stable hierarchy across routes: readers can recognise narrative, explanation, controls, evidence and active system state before they have read every word.

## Five registers, one architecture

Inter Tight carries editorial headings and public narrative. Inter carries reading text. Geist operates navigation and controls. Geist Mono documents identifiers, evidence, code and machine notation. Geist Pixel Square is reserved for execution, runtime and short system-led moments.

A change of face is therefore a change of meaning, not a decorative change of mood. Conventional typography should dominate so the runtime register keeps its signal.

- Editorial — Inter Tight
- Reading — Inter
- Interface — Geist
- Technical — Geist Mono
- Runtime — Geist Pixel Square

## Separate what a thing is from what it is doing

Static taxonomy belongs to the technical register; execution belongs to the runtime register. FILES, IDENTITY, routes and measurements remain Mono. READY, EXECUTING or DEPLOYED may use Pixel when they describe active system state.

Essential state is never carried by Pixel styling alone. Pair the expressive runtime line with an authoritative Mono line such as STATE 02 / ACTIVE, and preserve the authored casing instead of forcing uppercase in CSS.

## Let the composition adapt without changing the role

Responsive typography changes scale, measure and composition without changing semantic register. A reading paragraph stays Inter on a phone; a technical path stays Mono; an interface control stays Geist.

Allow headings to wrap naturally, keep body measure readable and move supporting material below the primary column when space contracts. Do not force desktop line breaks onto narrow screens.

## Check the rendered system

Inspect computed font families, heading order, contrast, focus states, browser zoom, fallback behaviour and layout shift. Test the runtime register at the sizes where it actually appears, not only as a large specimen.

Typography is complete only when the semantic role survives loading, responsive composition, accessibility settings and the browser that renders it.

## Index

- [Journal](https://brittek.net/journal)

Canonical URL: https://brittek.net/journal/typography-as-interface-architecture