Stats
Actions
Tags
From harness-claude
Explains type anatomy, vertical metrics, x-height ratios, counter apertures, and structural classifications. Helps designers select appropriate typefaces for readability at different sizes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:design-typography-fundamentalsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Anatomy of type — x-height, ascenders, descenders, counters, serifs, stroke contrast, optical sizing, and how anatomy affects readability
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.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeGuides font pairing decisions using contrast principles, x-height matching, and family limits. Useful for selecting typeface combinations in design systems.
Designs accessible typography systems using relative units, scalable type scales, and user-override-safe spacing. Useful for setting font sizes, line heights, and ensuring WCAG readability compliance.
Guides web typography with 2-3 font family limits, modular scales (Minor Third, Major Third, Perfect Fourth), line heights (1.4-1.6 body, 1.1-1.3 headings), and 45-75 character line lengths per Bringhurst rules.