Roles, Typefaces, & Maths
A type stack for Cowboys & Beans that honours tradition, exploits variable font technology, and scales fluidly from phone to ultrawide.
Each typeface was chosen for a specific role in the hierarchy and for properties that serve the C&B brand. No defaults, no usual suspects. Every choice has a reason.
Why Fraunces? It's a soft-serif inspired by early 20th-century display faces — Windsor, Souvenir, Cooper — but rebuilt with variable font technology that would make Bringhurst weep with joy.
Four variable axes: WONK toggles the playful leaning characters (the tilted n/m/h that give it personality). SOFT dials the ink softness from sharp to rounded. opsz adjusts for optical size. wght spans Thin to Black.
The C&B connection: The hand-painted warmth of your cowboy hat illustration lives in the same aesthetic territory as Fraunces's soft-serif forms. It's characterful without being kitschy. Western-adjacent without being a "western font."
Why Literata? Designed by TypeTogether as the custom typeface for Google Play Books — literally engineered for reading books on screens. Scotch Roman roots with modern screen optimisation.
Its optical size axis adjusts stroke contrast, x-height, and spacing automatically — opsz: 72 for headlines is elegant and high-contrast; opsz: 10 for captions is sturdy and open. One variable font file replaces what would be 15+ static files.
The C&B connection: For a publishing house, your body text IS your product. Literata reads beautifully for exactly the use case you need: book descriptions, author bios, chapter excerpts. It has the gravitas of Baskerville without its screen-rendering limitations.
Why Plex Mono? A monospace that balances technical precision with human warmth — the rounded dots and open counters keep it from feeling robotic. It's the typographic equivalent of your engineer-artist duality.
Used for: metadata, dates, ISBNs, price tags, navigation labels, code snippets, form labels, captions. Everything that's functional rather than editorial. The mono width creates natural alignment in lists and data.
The C&B connection: A monospace third voice adds the systematic, engineered layer. It signals "this is a considered, well-built thing" — which is exactly what your design system approach communicates.
Every font size is generated by multiplying the base (1rem) by powers of 4/3 — the same ratio as the musical interval of a perfect fourth. As Tim Brown showed, these ratios produce typographic harmony for the same mathematical reason they produce auditory harmony. This scale is fluid: at narrow viewports it tightens to a major third (1.25); at wide viewports it opens to the full perfect fourth.
Each site uses the same three typefaces and the same scale but emphasises different weights, optical sizes, and axis settings to create its own voice.
The same typeface, tuned differently per context. This is where variable fonts earn their keep — not just weight variation but genuine personality adjustment via the SOFT and WONK axes.
| Context | Weight | SOFT | WONK | opsz | Character |
|---|---|---|---|---|---|
| books — heading | 700 · The Weight of Stars | 20 | 0 | 72 | Sharp, no wonk. Editorial precision. The Typographer. |
| art — artist name | 300 · Artist Name | 70 | 0 | 96 | Light, soft, airy. Recessive. The Gallerist. |
| home — brand | 900 · Cowboys & Beans | 60 | 1 | 144 | Heavy, soft, WONKY. Full personality. The Storyteller. |
Production Type's Newsreader was a strong contender for body text. It's also a variable font with optical sizing, designed for long-form reading. Where Literata draws on Scotch Roman tradition, Newsreader channels transitional old-style — more kinetic, more editorial. I've loaded it here so you can compare:
The ship had been falling for eleven years before anyone on board realised it was also arriving. Dr. Kaur watched the instruments with the particular stillness of someone who has just understood that everything they believed was wrong in the most beautiful possible way.
The ship had been falling for eleven years before anyone on board realised it was also arriving. Dr. Kaur watched the instruments with the particular stillness of someone who has just understood that everything they believed was wrong in the most beautiful possible way.
Literata gets a strong recommendation because it was purpose-built for exactly our use case — a publishing platform where people read book descriptions, excerpts, and long-form content on screens. Its Scotch Roman roots give it warmth and presence without the editorial urgency of Newsreader. For a publisher's site, Literata says "sit down and read"; Newsreader says "here's what happened today."
That said, Newsreader has gorgeous italics and could work brilliantly if you prefer a slightly more kinetic, less bookish feel. Both are free, both are variable, both have optical sizing. We could even use Newsreader for the art site's captions (where the editorial energy fits) and Literata for the books site (where the reading quality matters most) — though that adds complexity.
Fraunces No other free variable font gives us this combination of display personality, axis-driven adaptability, and warm-serif character that matches your brand. The WONK axis alone — the ability to dial personality up for the parent site and off for the books site — is worth the entire selection.
The perfect fourth ratio (4:3 = 1.333…) generates this sequence when applied to a 1rem base: 1.000, 1.333, 1.777, 2.369, 3.157, 4.209. Each step is base × ratio^n. The negative steps are base × ratio^(-n): 0.750, 0.563.
Why perfect fourth rather than, say, golden ratio (1.618)? The golden ratio produces too much contrast between adjacent steps for body text — the jump from step 0 to step 1 is 62%, which makes it hard to create subtle hierarchies. The perfect fourth's 33% jump is assertive enough for clear hierarchy but gentle enough for nuanced intermediate levels. For reference: major second (1.125) is too flat; perfect fifth (1.500) is too dramatic for most web work; major third (1.250) is the safe choice. We chose one step bolder.
The fluid interpolation uses clamp(min, preferred, max) where the preferred value is a linear function of vi (viewport inline size). At 360px the effective ratio is 1.25 (major third); at 1440px it's 1.333 (perfect fourth). This means headings grow proportionally faster than body text as the viewport widens — Bringhurst's principle that display type needs more air, and text type needs more density, implemented in pure CSS mathematics.
Weber-Fechner tells us why this matters: just-noticeable differences in size are proportional to the size itself (ΔI/I = k). A geometric scale with ratio r means each step is equally noticeable — the perceived difference between step 0→1 is the same as step 3→4. An arithmetic scale (adding, say, 4px each step) would make large sizes feel compressed and small sizes feel spread out.