A full type system built for a brand called Marqee. The system pairs a Didone display serif with a humanist geometric sans, then defines every step of the ladder from display heading down to legal caption. Sizes are on a modular scale (1.25 ratio) so the ladder reads the same on a business card, a landing page, and a slide.
Type ladder
Didone Serif
Regular 700 · 72/76
-1.5% tracking
Didone Serif
Regular 600 · 44/50
-1% tracking
Humanist Sans
Medium 500 · 24/32
0% tracking
Humanist Sans
Regular 400 · 17/28
0% tracking
Humanist Sans
Medium 500 · 13/18
+4% tracking, caps
Monospace
Regular 500 · 12/16
+8% tracking, caps
Six steps from display to label. Every jump is a 1.25 ratio so any two adjacent sizes feel deliberately related. Line-height tightens as the type gets larger and loosens as it gets smaller, which is the opposite of what beginners do.
Pairing rationale
Didone display serif
High stroke contrast, small optical size not permitted. Used at 40px and above only. Reads as considered, older-than-a-quarter, print-shop-serious. Does the tonal work for headlines and drop caps and nothing else.
Humanist geometric sans
Neutral, screen-optimized, five weights available. Handles subhead down to legal. Was chosen for its tabular figures (needed for pricing tables and salary charts) and for a stylistic alternate on the single-story g.
Weight ladder
Rules of thumb
- One type family at a time on a single screen unless the second family is doing a job the first cannot (an italic drop cap, a monospaced tag, a numeral in a chart).
- Line-length between 55 and 75 characters at body size. Anything narrower fragments the read; anything wider loses the eye at line-return.
- Tracking scales inversely with size. Display type gets tighter, caption type gets looser. This is not a preference; it is a rendering fact about small type.
- Numerals in tables are tabular-figures only. Proportional figures in a table make columns twitch.
- All-caps rows over 6 words are banned. All-caps at length destroys word-shape and forces the reader to spell instead of read.
What the system is really doing
A brand type system is not a font list; it is a set of decisions about hierarchy that a team can make quickly at 4pm on a Thursday without a designer in the room. The ladder above answers: what size, what weight, what line-height, what tracking, and which family, for every type element the brand ships. Once those decisions are written down the marketer, the engineer, and the copywriter all make the same call without a meeting. That is the whole point.
Responsive behavior
The ladder above is the desktop ladder. On mobile the same six steps compress by a fixed ratio (Display 72 becomes 44, Headline 44 becomes 30, Subhead 24 becomes 19, Body 17 stays at 17, Caption 13 stays at 13, Label 12 stays at 12). Line-height and tracking do not compress; only the size does. This is because line-height and tracking are relative to size and re-scale on their own.
The rule is that the body size never drops below 16 on any device. Members read long-form copy on trains, in coffee shops, on couches; setting body under 16 destroys the reading experience without saving any real space. If a component cannot fit at 17, the component is redesigned, not the type.
Where the system fails and what to do
- Data tables. Body sans at 17 does not work at scale in dense financial tables. In tables I drop to 14 and switch to tabular figures. This is a documented exception, not a violation.
- Code blocks. Body sans is banned inside code. Code uses the monospace at 14 with 1.5 line-height and a background wash at 5% opacity.
- Legal pages. Terms, privacy, and disclosures use the body ladder at 15 with a 720-character measure. Nothing about the legal type ladder is optimized; it is optimized for legibility across screen readers and print.
- Email. Every step of the ladder maps to a fallback stack for email clients that do not support Inter. The fallback is a native system-ui sans on iOS and Android, which is close enough that members will not notice the swap.
Interested in similar work? Tell me what you are trying to move.
Start a conversation