typography-skills

Use when type needs to be more than one flat colour, or when glyphs carry non-letter meaning — layer fonts, colour fonts (COLRv1, OT-SVG, bitmap), CSS font-palette, icon fonts, emoji. Also use when deciding between an icon font and SVG, when a colour font renders as flat black, or when emoji or icons break in a screen reader.

Use when the user invokes /type, or when any task involves setting, choosing, scaling, spacing, loading, tokenizing, auditing, or critiquing type — a font choice, a type scale, body copy, headings, a data table, a UI label, responsive text, webfont performance, or non-Latin script. Also use when a screen "looks off" and the cause may be typographic. Dispatcher that routes to the focused typography-* skills.

Use when reading a specimen, naming letterform parts, or explaining why two typefaces differ — apertures, counters, terminals, stroke contrast, axis, x-height, proportions. Also use when a font choice needs to be justified from visible evidence rather than vibes, or when comparing candidates that "look basically the same".

Use when choosing or replacing a typeface — "which font should we use", evaluating candidates, building a type palette, or replacing a face that isn't working. Also use when a font must carry a brand tone, survive small sizes, support extra scripts, or fit a licensing and performance budget.

Use when setting or fixing running text meant to be read continuously — article bodies, documentation, long-form pages, onboarding copy, email. Also use when readers report eye strain, losing their place, re-reading lines, or text that "feels dense", and when choosing body size, line-height, or measure.

Use when text is technically correct but reads poorly — uneven word spacing, rivers, bad rags, orphans and widows, awkward hyphenation, loose or tight tracking, wrong quote marks and dashes, cramped all-caps. Also use when a design "feels cheap", "looks AI-generated", or "something is off" and the cause is spacing detail rather than font choice.

Use when systematically reviewing existing typography against criteria — "check this page", "audit our type", pre-launch review, design-system compliance, or inherited work of unknown quality. Produces a pass/fail finding list with evidence. Use typography-critique instead when the question is about taste rather than compliance.

Use when the question is quality or taste rather than compliance — "is this any good", "does this feel right", "why does this look generic or AI-generated", art-direction review, or judging whether a typographic risk pays off. Use typography-audit instead when checking against defined criteria.

Use when setting type inside interface components — buttons, labels, inputs, form errors, navigation, badges, tooltips, tables, dense dashboards. Also use when numbers jitter in a table, labels wrap unpredictably, UI text is illegible at small sizes, or a component's text breaks in another language.

Use when composing type in space rather than sizing it — deciding how a poster, hero, editorial spread, dashboard, or landing page is structurally organized. Also use when a layout feels arbitrary, elements float without relationship, a grid is being applied by reflex, or a composition needs deliberate tension or movement.

Use when designing article, long-form, marketing, or art-directed pages — pull quotes, drop caps, captions, bylines, subheads, figures, footnotes, hero compositions. Also use when an article template feels flat and undifferentiated, or when a page needs expressive typographic voice without sacrificing readability.

Use when shipping webfonts — choosing formats, subsetting, preloading, setting font-display, eliminating FOUT/FOIT, or fixing layout shift (CLS) caused by font swap. Also use when fonts are slow, text is invisible on load, the page jumps when fonts arrive, or Core Web Vitals flag font-related shift.

Use when combining two or more typefaces — heading plus body, display plus UI, adding a face to an existing system, or diagnosing a pairing that "clashes" or "looks the same". Also use when deciding whether a second typeface is needed at all.

Use when building or fixing a type scale, choosing heading sizes, or when a screen's importance ordering is unclear — everything looks the same weight, users miss the primary action, or headings compete. Also use when a design has drifted into a dozen ad-hoc font sizes.

Use when working with variable fonts — choosing between variable and static files, using weight/width/optical-size/slant axes, setting font-variation-settings vs standard properties, animating axes, or deciding whether a variable font actually saves bytes. Also use when a variable font renders wrong or ignores its axes.

Use when turning typographic decisions into tokens, variables, or theme config — naming a type scale, structuring font/size/weight/line-height tokens, exporting to CSS/Tailwind/Style Dictionary/iOS/Android, or fixing a token set that has drifted into arbitrary values. Also use when design and code disagree about what the type scale actually is.

Use whenever type will render in a non-Latin script or a language other than English — Arabic, Hebrew, CJK, Indic, Cyrillic, Greek, Thai. Also use for bidirectional text, vertical writing, localisation-driven layout breakage, font stacks for multiple scripts, and any assumption that Latin typographic rules generalise.

Use when type moves or changes over time — animated headlines, kinetic type, text transitions, animated or responsive logotypes, scroll-driven text effects, typing/counting animations, variable-font axis animation, or loading and streaming text. Also use when motion is making text hard to read, causing discomfort, or failing reduced-motion and accessibility requirements.

Use when type must adapt across viewports, containers, or devices — fluid sizing with clamp(), breakpoint jumps, text that overflows or shrinks illegibly on mobile, headings that wrap badly, or a scale that works on desktop and collapses on phone. Also use when building a type system intended to be resolution-independent.

Use when typographic vocabulary or first principles are needed — what an em actually is, font vs typeface, leading vs line-height, points vs pixels, how CSS units relate, what the em square means. Also use when someone is confidently using a term incorrectly, or when an explanation needs grounding before a decision is made.

Use whenever type carries information — always co-load this with body text, UI, and editorial typography work. Specifically for contrast, 200% zoom, user text-spacing overrides, Dynamic Type, dyslexia and low-vision needs, screen-reader compatibility, images of text, and any claim that typography is "accessible".