Vignelli
/vignelli is a skill for better typography. Craft consistent type systems with precise vertical rhythm and optimal readability.
curl -fsSL https://raw.githubusercontent.com/visua/Vignelli/main/.claude/commands/vignelli.md --create-dirs -o .claude/commands/vignelli.md
Measure
Two fonts set at the same size rarely look the same size — the one with the taller x‑height reads bigger. Vignelli reads the cap height and x‑height straight from the font file and adjusts each size so the type appears as large as you intended. Switch typefaces and the layout still feels balanced, because the numbers were derived from the font rather than copied from another project.
Rhythm
A page feels settled when its vertical spacing repeats on a single beat. Vignelli picks one small unit — this page uses 4px — and makes every line‑height a whole multiple of it, so headings, body text, and captions all land on the same rhythm. Nothing falls on a half‑pixel, so lines stay crisp and the spacing between them never looks arbitrary.
Baseline
Every line of text carries a little built‑in padding above and below it, which is why type almost never sits exactly where the grid says it should. Vignelli works out that padding from the font's own metrics and cancels it, so caps and baselines land on the lines you laid down. Mixed sizes align to each other without hand‑nudging.
Tokens
The finished scale is a handful of named sizes, from xs to xl, and each one carries its line‑height with it as a fixed pair. They're named by size rather than by job, so the same token can set a page title in one place and a headline stat in another. You decide what a size means where you use it, instead of locking it to a single role up front.
Verify
Some things can't be settled by arithmetic — the overall texture of a page, whether the rhythm actually feels right, whether the smallest size is comfortably readable rather than just legible in theory. Vignelli renders those cases, captures them, and puts them in front of a person to judge. It handles the math and leaves the taste to you.
Presets
Type scales already computed with Vignelli and ready to drop in. Open one to see every size, line‑height, and correction, then copy the prompt to bring that exact scale into your own project.
Inter Scale
Inter · compensation ×1.000 — the reference face
Language,
not the convenience
of a system. Typography rests on the eye —
but the eye's judgments can be approximated by metrics, verified by a human, and enforced by rules that hold across every context they serve.
The densest, most‑read size in the product is base. Design the scale outward from it, not downward from display sizes.
Is xs genuinely readable at viewing distance, or decorative only? Document the verdict. This one passes — barely. That judgment was human.
Instrument Serif Scale
Instrument Serif · compensation ×1.0704
Language,
not the convenience
of a system. Typography rests on the eye —
but the eye's judgments can be approximated by metrics, verified by a human, and enforced by rules that hold across every context they serve.
The densest, most‑read size in the product is base. Design the scale outward from it, not downward from display sizes.
Is xs genuinely readable at viewing distance, or decorative only? Document the verdict. Compensation lifted this one from 12px to 13px — it passes.