From harness-claude
Explains typography anatomy including x-height, ascenders, descenders, counters, serifs, stroke contrast, and optical sizing to select fonts, evaluate readability, compare typefaces, and debug rendering issues.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Anatomy of type — x-height, ascenders, descenders, counters, serifs, stroke contrast, optical sizing, and how anatomy affects readability
Guides font pairing with concord/contrast/conflict model, x-height matching, superfamilies, and 2-3 family limits. Use for UI type selection, design systems, or typeface evaluation.
Guides web typography: font selection, pairing, scaling, spacing, responsive type, variable fonts, loading optimization, accessibility, and readability.
Creates modular typography scales with size ratios, weights, line-heights, responsive adjustments, and best practices for consistent UI text.
Share bugs, ideas, or general feedback.
Anatomy of type — x-height, ascenders, descenders, counters, serifs, stroke contrast, optical sizing, and how anatomy affects readability
Learn the vertical metrics. Every Latin typeface is defined by a vertical scaffold:
x; the single most important metric for perceived size and readabilityH; typically 68-72% of the em squareb, d, h, l); usually exceeds cap height by 2-5%g, p, q, y; typically 20-30% of the em square below baselineEvaluate x-height ratio before selecting any font. The x-height-to-cap-height ratio determines perceived size at a given pixel value. Higher x-height = more readable at small sizes, less elegant at large sizes.
Understand counter and aperture openings. Counters are the enclosed or partially enclosed spaces within letters (the hole in o, e, d). Apertures are the openings in letters like c, e, s.
Classify typefaces by their structural attributes, not marketing labels.
Assess stroke contrast for size-appropriate selection. Stroke contrast is the ratio between the thickest and thinnest strokes in a letterform.
Use optical sizing when available. The same letterforms need different treatments at different sizes — this is not merely scaling.
opsz axis (available in variable font)Font metrics directly impact layout calculations. Two fonts set at 16px can produce visually different results:
This is why switching fonts without adjusting sizes produces layouts that "break" — the visual weight shifts even though the CSS value has not changed. When replacing one typeface with another, always compare x-height ratios and adjust font-size proportionally: new_size = old_size * (old_x_ratio / new_x_ratio).
When building a design system, document these metrics for your chosen typeface:
| Metric | What It Controls | Typical Range |
|---|---|---|
| x-height ratio | Perceived size, readability | 0.63-0.76 |
| Cap-to-ascender overshoot | Vertical rhythm predictability | 2-8% above cap |
| Descender depth | Line-height requirements | 15-30% of em |
| Average character width | Characters per line (measure) | 45-65% of em |
| Tabular figure width | Data table alignment | Fixed across 0-9 |
Stripe uses sohne-var (a variable font by Klim Type Foundry) with these anatomical characteristics:
ss01 activated across all text for alternate character formsApple SF Pro demonstrates best-in-class optical sizing:
Display fonts at body size. Decorative or high-contrast typefaces (Playfair Display, Abril Fatface, Bodoni) have thin hairline strokes that become invisible below 18px on screen. The result is broken, unreadable body text that appeared fine in a mockup at 200% zoom. Rule: if the font has "Display" in its name, never use it below 24px.
Ignoring x-height when comparing fonts. Georgia at 16px reads larger than Futura at 16px because Georgia's x-height ratio is 0.698 vs Futura's 0.653. Designers who swap fonts without adjusting sizes get layouts that "shrink" or "grow" unpredictably. Always compare x-height ratios and compensate: if switching from Inter (0.756) to Garamond (0.630), increase font-size by ~20% to maintain visual equivalence.
Treating all sans-serifs as interchangeable. Helvetica, Inter, Roboto, and Futura are all "sans-serif" but have fundamentally different anatomies. Helvetica has closed apertures and uniform stroke widths (grotesque); Inter has open apertures and optical sizing (neo-grotesque); Futura has geometric construction based on circles (geometric); Fira Sans has calligraphic stroke variation (humanist). Substituting one for another changes readability, personality, and spacing.
Ignoring variable font axes. Modern variable fonts like Inter, Roboto Flex, and SF Pro expose wght, opsz, wdth, and slnt axes. Using a static 400-weight file when the variable font could provide precise weight tuning (e.g., 350 for a specific hierarchy level) wastes the typeface's capabilities. Check available axes at fonts.google.com before defaulting to static files.
Inter (Rasmus Andersson, 2017-present) Designed specifically for computer screens. Key anatomical decisions:
c, e, s for character differentiation at 11px+wght (100-900) and opsz (14-32) axesRoboto Flex (Google, 2022) The most parametric variable font in production:
wght, wdth, opsz, GRAD (grade), XTRA (x-axis tracking)Vercel Geist (Vercel, 2023) A typeface engineered for developer tooling and dashboard interfaces:
This is a knowledge skill. When activated, it provides typographic anatomy expertise to guide font selection and configuration decisions. It does not modify files directly. Use the principles here when evaluating font-family, font-size, font-variation-settings, and letter-spacing values in any design system or component library.