Typography as Interface
There is a persistent myth in web design that typography is a subset of design — one tool among many, alongside color, illustration, motion, and layout. This essay argues that typography is the interface. Everything else is furniture.
The Hierarchy of Attention
When a reader arrives at a page, they make a decision in under three seconds: is this worth reading? That decision is made almost entirely on typographic signals. The size of the headline. The density of the body text. The whitespace around it. The font itself.
Color can support this decision. Motion can distract from it. But typography is the decision. A well-set page communicates competence, intention, and care before a single word is read.
What We Mean by "Typography-First"
Typography-first design does not mean "only text." It means that every visual decision is evaluated through the lens of reading comfort and typographic hierarchy. A button's border radius matters because it sits next to body text. A card's padding matters because it frames a headline. A page's maximum width matters because it determines line length.
Consider the most basic design token: body font size. Most component libraries default to 16px or even 14px. Remarque's non-negotiable minimum is 17px. This single decision — one pixel — changes the feeling of every page built with the system. It says: we prioritize your comfort.
The details are not the details. They make the design.
Charles Eames said this about furniture. It applies equally to type. The difference between a comfortable reading experience and an adequate one is found in line height, letter spacing, and paragraph spacing. Not in the presence of a gradient or the curvature of a card corner.
The Three-Font Discipline
Remarque uses exactly three fonts, each with a defined role that never overlaps:
- Newsreader — Display text only. Page titles, article titles, section headings at or above
--text-sectionsize. Never for body copy. - Inter — The workhorse. Body text, UI labels, navigation, buttons, everything that isn't a display heading or a technical label.
- JetBrains Mono — Metadata, code, timestamps, labels, technical accents. Never for headings or body text.
This constraint is intentional. Three fonts is enough to create clear hierarchy. Four creates confusion. Two can work but often sacrifices either the editorial quality of a serif display face or the technical precision of a monospace.
Against the Component-First Approach
Most design systems start with components: buttons, cards, modals, dropdowns. Typography is added later, as a "theme" layer that gets configured once and forgotten. The result is predictable — the components look fine in isolation, but the assembled page feels generic. The typography was never the protagonist.
Remarque inverts this. The build order in AGENT_RULES.md is explicit: tokens first, then typography, then the layout shell, then prose styling. Components come last, and only the ones you actually need. This is not accidental. It ensures that every component is designed around the typography, not the other way around.
Readability Is Not Optional
The web has a readability crisis. Dense dashboard layouts. Full-width text on 27-inch monitors. Body text at 14px with 1.4 line height. These are not design choices — they are defaults that nobody questioned.
Remarque questions all of them. The reading column is constrained to 46rem (~740px). Line height is 1.75. Top padding before the main heading is at least 6rem. These numbers are not arbitrary — they come from centuries of book typography, adapted for screens.
A site built with Remarque should be comfortable to read for an extended period. If it isn't, the implementation has failed, regardless of how polished the components look.
Typography as interface is not a new idea. It is the oldest idea in design, predating screens by five centuries. What is new is the need to defend it against the relentless pressure of SaaS aesthetics, component libraries, and the assumption that more visual elements equals better design.
Sometimes the best interface is just well-set text.