Export the system
An analysis is only useful if it ends up in the codebase. TYPAL exports the resolved system as plain CSS, CSS custom properties, fluid clamp() sizes, a Tailwind @theme block, design tokens JSON or a written style guide — copied in one click, consistent with everything you saw on the canvas.
Issue 04 — Typography
The quiet discipline of setting type well
Why measure, rhythm and contrast decide whether a page feels resolved
Most typographic problems are not mistakes of taste. They are small measurable things — a measure that runs too wide, leading borrowed from a different size, a hierarchy whose steps are too close together — and each one costs the reader a fraction of attention. Set them right and the page stops asking for effort.
“Typography exists to honour content.” — Robert Bringhurst
Analyse this layout
Figure 1 — Vertical rhythm across a 8px baseline grid.
632px measure~74 characters per line · in range
37px, 23px, 17px, 13px — sizes picked by eye, none of them related. This cannot be exported as a system because it is not one; every new size would be another guess.
Issue 04 — Typography
The quiet discipline of setting type well
Why measure, rhythm and contrast decide whether a page feels resolved
Most typographic problems are not mistakes of taste. They are small measurable things — a measure that runs too wide, leading borrowed from a different size, a hierarchy whose steps are too close together — and each one costs the reader a fraction of attention. Set them right and the page stops asking for effort.
“Typography exists to honour content.” — Robert Bringhurst
Analyse this layout
Figure 1 — Vertical rhythm across a 8px baseline grid.
632px measure~79 characters per line · recommended 45–75
Every size is a step on a 1.25 modular scale from a 16px base, so the export below is a complete, reproducible system — not a list of one-off values.
How TYPAL checks this
- CSS classes and :root variables for fonts, sizes, leading and tracking
- Fluid clamp() declarations that scale between mobile and desktop
- A Tailwind v4 @theme block with per-role size, leading, tracking and weight
- Design tokens JSON and a written style guide for hand-off
Exported css
@theme {
--font-display: "Playfair Display", Georgia, serif;
--font-text: "Inter", system-ui, sans-serif;
--text-heading: 3.5rem;
--text-heading--line-height: 1.4;
--text-heading--letter-spacing: 0em;
--text-heading--font-weight: 500;
--text-body: 1rem;
--text-body--line-height: 1.5;
--text-body--font-weight: 400;
}