Typography · Brand Identity · Systems Design
Meridian Brand Type System. Fully interactive documentation page. Three typefaces, 12-step modular scale, pairing-in-use examples, live type tester, do/don't guidance, and palette reference. Built in HTML/CSS/JS.
Typography systems are where brand design meets product design. A senior brand designer needs to do more than choose a typeface. They need to define how it behaves across every surface, at every scale, in every context. That means rationale, hierarchy, pairing logic, usage rules, and the discipline to hold the system to those rules.
The subject is Meridian Precision Instruments AG, a fictional manufacturer of surveying and navigation equipment founded in Zürich, 1963. A brand with a genuine heritage in precision gave the typographic choices something real to earn: every decision needed to feel calibrated, not decorative.
Three typefaces, three roles. Cormorant Garamond as the editorial serif: high contrast, literary authority, used for headlines and display. DM Sans as the workhorse: geometric, warm, handling all running copy, UI, and navigation. Space Mono as the instrument face: monospaced, reserved for coordinates, specifications, and technical metadata only.
The instrument face is the signature choice. Precision instruments generate data, and data needs a different typographic register than marketing copy. Its monospaced construction signals measurement and technical provenance.
The scale is 12 steps built on a 1.25 modular ratio from a 15px base, each step named with a token (display-xl through label) so a developer can implement it without interpreting a designer's intent. The documentation presents each step live: actual rendered type at actual rendered size, not a table of numbers.
Typeface rationale
Each face has a documented role and constraints: which weights, which contexts, which combinations are sanctioned.
Live type tester
Type anything and see it rendered simultaneously in all five type treatments at four size presets. Functional craft.
Do / Don't guidance
Four paired examples showing common misapplications alongside their correct alternatives. A system without guardrails is a suggestion.
The interactive type tester is the centerpiece and the reason this exists as a web page rather than a PDF. Type your own words and immediately see how they read in each of the system's voices. That turns a reference document into a conversation tool.
It also demonstrates a specific skill: the ability to think about design documentation as a product, not just a deliverable. The tester is simple code: a text input wired to five preview elements with font switching on a size control. The decision to build it at all is a design decision. Most type system documents don't have one.
3
Typefaces, each with a defined role and constraints
12
Scale steps built on a modular ratio
5
Live type treatments in the interactive tester