| name | typography |
| description | Apply professional typographic rules to screen-based UI, including font selection that escapes the generic AI monoculture (no Inter/Roboto/Geist/Fraunces) using only open-licensed, free-for-commercial fonts. Use when generating any UI with visible text, choosing or replacing fonts, avoiding generic/AI-looking type, auditing typography violations, or when the user asks about font sizing, line height, spacing, quotes, dashes, or text formatting. |
| metadata | {"author":"bencium"} |
UI Typography
Professional typographic rules for screen-based interfaces. Based on Matthew Butterick's Practical Typography.
Mode
Enforcement — when generating ANY UI with visible text, apply every rule automatically and silently.
Audit — when reviewing existing code, flag violations.
Font Selection
Font choice is the single biggest signal of whether an interface looks designed or auto-generated. Two filters must both pass: the face must be non-generic (escape the AI monoculture) and it must be open-licensed (free for commercial use). These are independent — many open fonts are also the most overused.
Register first
- Product UI (dashboards, admin panels, tools): system stacks and familiar sans are legitimate. One well-tuned family carries the whole UI. Fixed
rem scale, 1.125–1.2 ratio. Don't over-brand a utility.
- Brand / marketing / content: the design is the product. Generic type here reads as mediocre. Run the selection procedure below.
Selection procedure (brand register — never skip)
- Voice words. Write three concrete, physical-object brand-voice words — "warm and mechanical and opinionated", not "modern" or "elegant".
- Reject your reflex. List the three fonts you'd reach for first. If any appear on the ban list below, drop them — they're training-data defaults and create monoculture.
- Search by physical object. Browse a real open-license catalog with the voice words in mind. Find the face for the brand as a thing: a 1970s terminal manual, a fabric label, a concert poster, a museum caption. Reject the first thing that "looks designy".
- Cross-check. "Elegant" is not necessarily serif. "Technical" is not necessarily sans. "Warm" is not Fraunces. If the final pick matches your original reflex, start over.
Ban list — overused faces (do not use as primary)
Two waves of monoculture. Reflex-reject all of these:
- Older: Inter, Roboto, Open Sans, Lato, Montserrat, Arial, Helvetica
- Newer (the AI-skill / Vercel / GitHub default wave): Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk / Space Mono, Instrument Sans / Instrument Serif, DM Sans / DM Serif, Outfit, Recoleta, Newsreader, Lora, Crimson, Playfair Display, Cormorant, Syne, IBM Plex (any)
Also reject the editorial-typographic lane, not just the fonts: oversized italic serif headline + tiny uppercase tracked labels + ruled separators + monochrome restraint. It reads as taste in isolation but is now the universal AI landing-page hero. Use it only for a brief that is literally editorial.
Open-license only — never recommend a font that needs a paid license
Pull exclusively from free, commercially-usable sources (SIL OFL / Apache / ITF Free License):
- Google Fonts — OFL/Apache. Use the deep catalog, not the front-page defaults (which are the overused faces above).
- Fontshare (Indian Type Foundry) — free for commercial use; rich source of distinctive, non-monoculture faces.
- Velvetyne, The League of Moveable Type, Collletttivo, Open Foundry — open-source type.
If a face you want requires a commercial license (Klim, ABC Dinamo, Pangram Pangram, Adobe Fonts subscription faces, etc.), do not use it — find the closest open-licensed equivalent and note the substitution. Never replace one default with a new default: the goal is a face that fits this brand, not a fresh monoculture.
Pairing & hierarchy
- You often need only one family in multiple weights — cleaner than two competing faces. Add a second only for genuine contrast (serif + sans, geometric + humanist).
- Never exceed 2–3 families. Never use a decorative/display face for body text.
- Build hierarchy with a modular scale (≥1.25 ratio for brand display; 1.125–1.2 for dense product UI). Flat scales (sizes 1.1× apart) read as uncommitted.
Character Standards
Quotes & Apostrophes
Always use curly (typographic) marks:
- Double quotes:
" " (“ ”)
- Single quotes:
' ' (‘ ’)
- Apostrophes:
' (curves downward, like a comma)
Critical JSX warning: Unicode escape sequences (\u2019, \u201C, etc.) do NOT work in JSX text content. Use actual UTF-8 characters or JSX expressions.
<p>It\u2019s working</p>
<p>It's working</p>
Dashes
Three distinct characters — never substitute:
- Hyphen
- — compounds, phone numbers (well-designed)
- En dash
– (–) — ranges (pages 10–20, 2020–2024)
- Em dash
— (—) — breaks in thought, parenthetical statements
Other Marks
- Ellipsis:
… (…) — never three separate periods
- Multiplication:
× (×) — never letter x
- Minus:
− (−) — never hyphen in math
- Copyright/trademark:
© ™ ® — always real symbols
Spacing Rules
- One space after punctuation — never two
- Use
to prevent line breaks:
- Before numeric references (
page 12)
- After abbreviations (
Dr. Smith)
- Between measurements (
10 px)
Text Formatting
- Bold OR italic — never both simultaneously
- Sans serif: bold works best; italic barely stands out
- Never underline — reserved for hyperlinks
- All-caps text requires 5–12% letterspacing (
letter-spacing: 0.08em)
- Kerning must always be enabled (
font-kerning: normal)
Layout Standards
Line Length
45–90 characters per line. The "alphabet test": 2–3 lowercase alphabets fit per line.
.prose {
max-width: 65ch;
}
Line Spacing
120–145% of point size.
body { line-height: 1.35; }
Body Text First
Set typography before designing other elements.
- Print: 10–12pt
- Web: 15–25px
Headings
- Maximum 3 levels
- Space above > space below
- Bold preferred over italic
- Don't use heading levels for visual style — use them for semantic hierarchy
Lists & Tables
- Use semantic markup
- Remove borders from tables; keep only a thin rule under the header row
- Consistent padding replaces visual dividers
Responsive Typography
The rules don't change with screen size. Same line length, line spacing, hierarchy.
body {
font-size: clamp(16px, 2.5vw, 20px);
}
.content {
max-width: min(65ch, 100% - 2rem);
}
Always use max-width on text containers. Use clamp() for fluid scaling.
Quick Reference: Common Violations
| Wrong | Right | Rule |
|---|
"Hello" | "Hello" | Curly quotes |
It's | It's | Curly apostrophe |
2020-2024 | 2020–2024 | En dash for ranges |
... | … | Real ellipsis |
10 x 20 | 10 × 20 | Multiplication sign |
font-style: italic; font-weight: bold | Pick one | Never both |
text-decoration: underline | Remove | Only for links |
| Line height 1.0 | Line height 1.35 | 120–145% |
| Width: 100% on text | max-width: 65ch | Line length |
| Inter / Roboto / Geist / Fraunces as primary | Open-license non-monoculture face | Font selection |
| Sizes 14/15/16/18px (muddy) | Fewer sizes, ≥1.25 ratio | Flat hierarchy is an AI tell |
| Italic serif hero + uppercase eyebrow | Roman headline, integrated kicker | Editorial-lane AI tell |
| All-caps body paragraph | Caps for short labels only | All-caps body is an AI tell |
| Gradient text on headings | Solid color | Gradient text is an AI tell |
Attribution: Rules distilled from Practical Typography by Matthew Butterick (practicaltypography.com).
