菜单
Use when configuring variable-font axes, optical sizing, numerals, or OpenType features after a face is chosen. Unlike font-selection-and-pairing, this implements type mechanics; embedding and licence work routes to font-embedding-and-licensing.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when a game for children or learners needs age-appropriate comprehension, scaffolding, learning-feedback separation, privacy/safety, stopping cues, guardian/teacher needs, accessible play, or non-exploitative engagement. Use onboarding-and-first-run-design for ordinary apps.
Use when a game needs visual pillars, shape language, colour scripting, character/world readability, cultural motif governance, 2D/3D cohesion, VFX hierarchy, an asset bible, style scalability, performance-aware art, or engine handoff. Use illustration-style-and-systems for non-game illustration sets.
Use when tuning a game action through anticipation, response, impact, timing, animation, VFX, audio-visual coordination, camera, hit-stop, particles, haptics, reduced-motion, sensory alternatives, or intensity settings. Use micro-interactions-and-feedback for ordinary UI controls.
Use when designing game HUDs, menus, maps, inventory, dialogue, tutorials, pause/settings, save/load, failure/success, controller focus, touch, couch-distance, or diegetic interfaces. Use ordinary app UI skills for non-game task flows.
Use when a game needs its player fantasy and interaction loop routed into HUD, art direction, feedback, camera, input, accessibility, testing, and engine handoff. Use ordinary app UI skills for non-game software and the four game specialists for focused craft.
Use when designing or auditing an interactive UI for WCAG 2.2 AA, keyboard and focus behaviour, accessible names, screen readers, target size, reflow, authentication, or reduced motion. Use inclusive-and-assistive-design for needs beyond the compliance floor.
| name | variable-fonts-and-opentype-features |
| description | Use when configuring variable-font axes, optical sizing, numerals, or OpenType features after a face is chosen. Unlike font-selection-and-pairing, this implements type mechanics; embedding and licence work routes to font-embedding-and-licensing. |
| metadata | {"portable":true,"category":"01-typography-and-fonts","compatible_with":["claude-code","codex"]} |
Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com.
font-selection-and-pairing) and you now need to wire its
mechanics into a web/app UI: which weights, optical sizes, slant, width, grade, and which
OpenType features to switch on.ss01..), contextual alternates, small caps, fractions.font-selection-and-pairing first; it hands off here.font-embedding-and-licensing (and doctrine/references/embedding-by-format.md).ai-slop-typography-audit.| Input | Supplied by | Required? | Why |
|---|---|---|---|
| Chosen face and files | Typeface selector | yes | Establishes available mechanics |
| Axis and feature inventory | Foundry or file inspection | yes | Prevents invented settings |
| Text contexts and platform | Product brief | yes | Determines numeral and feature policy |
references/variable-axes.md table).embedding-by-format.md).wght, opsz,
slnt, ital, wdth, GRAD) and any custom axis the foundry ships (e.g. Fraunces SOFT/
WONK, Recursive MONO/CASL/CRSV). Reference: references/variable-axes.md.@font-face with font-weight: <min> <max> and
format("woff2-variations") so one file carries the whole hierarchy
(doctrine/references/embedding-by-format.md already prefers one variable woff2).font-weight, not raw axis settings, wherever the high-level property
exists — reserve font-variation-settings for axes with no CSS property (GRAD, custom).
Never set both for the same axis: font-variation-settings wins and resets the others.font-optical-sizing: auto so the browser ties opsz
to font-size (large = refined/tighter, small = sturdier). Only pin opsz by hand when you
want a display optical at a non-display size.font-variant-numeric: tabular-nums) for any column, table, dashboard KPI,
price list, timer, or code — equal-width digits keep columns aligned.proportional-nums) for running prose.oldstyle-nums) for literary body that sits in lowercase
text; lining (lining-nums) for UI, caps settings, and all-caps.ss01..ssNN — adopt one as a brand signature, name it),
small caps (font-variant-caps: small-caps, real not faux), and fractions
(diagonal-fractions) for recipes/measures/specs. Reference: references/opentype-features.md.font-feature-settings. Use font-variant-numeric,
font-variant-ligatures, font-variant-caps, font-feature-settings only for ssNN,
custom, or unsupported features. Don't fight the cascade by mixing both for one feature.doctrine/references/embedding-by-format.md. Note: aggressive
subsetting can strip OpenType feature tables — keep the features you rely on.font-variant-numeric in a table or financial dashboard — proportional digits make
columns jitter; tabular is the correctness default for data.font-variant: small-caps on a face without the feature shrinks caps
and thins the stroke) — only use real smcp/c2sc from a face that ships them.font-variation-settings: "wght" 700 and font-weight: 700 on the same element.ssNN with intent and a
stated reason; the rest is noise.| Output | Consumer | Evidence / acceptance |
|---|---|---|
| Axis plan | Implementer | Axis, range, property, and context recorded |
| Numeral and feature policy | Design-system owner | Real samples render without faux features |
| Verified type-mechanics spec | QA and handoff | Render plus inspected font metadata |
font-optical-sizing: auto).font-feature-settings only where required.examples/dashboard-type-system.md for the complete worked contract and rendered checks.| Condition | Decision | Wrong-choice failure |
|---|---|---|
| High-level CSS controls the setting | Use the high-level property | Raw settings override the cascade |
| Dense data, prices, timers, or IDs | Use tabular lining numerals | Columns jitter and comparisons fail |
| Feature is absent | Omit it or change the font cut | A faux or inconsistent result ships |
| Variable file is not payload-efficient | Compare measured static subsets | Assumed performance benefit adds weight |
Read and font inspection are required. Edit only for authorised implementation; execution may render specimens. Network access is optional and cannot replace inspection of the shipped file.
Without inspection or rendering, return a conditional plan, label support unverified, and provide a specimen matrix. Never claim a feature exists without evidence.
examples/dashboard-type-system.md — a real analytics/finance product type system on Recursive
opsz bound to size, tabular numerals in the data layer,
old-style numerals in prose, one stylistic set adopted, with the full CSS.references/variable-axes.md — the registered axes (wght/opsz/slnt/ital/wdth/GRAD)
plus custom axes, optical sizing, and the font-variation-settings/font-optical-sizing CSS.references/opentype-features.md — ligatures, contextual alternates, stylistic sets, small caps,
fractions, and the numerals matrix (tabular/proportional × lining/old-style), with the CSS.doctrine/design-doctrine.md; doctrine/references/font-groups-and-usage.md (which baseline
faces are variable and their axes); doctrine/references/embedding-by-format.md (one variable
woff2, subsetting, and feature-table preservation).font-selection-and-pairing; hands to font-embedding-and-licensing for load.