game-typography

Applies the arcade's Fraunces and Outfit type system to game UI text and numbers.

1|Updated Aug 31, 2026
One-click install
npx skills add https://github.com/gagandeepgill/puzzle-game --skill game-typography-gagandeepgill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-typography
Source: https://github.com/gagandeepgill/puzzle-game/tree/main/.claude/skills/game-typography
Command: npx skills add https://github.com/gagandeepgill/puzzle-game --skill game-typography-gagandeepgill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Game UI text often ends up inconsistent, illegible, or off-brand because font roles, sizes, and contrast ratios are chosen ad hoc. This Skill encodes the arcade's measured typography rules so every label, number, and button follows the same system. ## Core Features & Use Cases - Font role separation: Fraunces handles identity and result numbers (wordmarks, scores, quotas); Outfit handles operational text (labels, buttons, HUD), with enforced fallback stacks. - Numeric styling rules: Mandates tabular-nums on every updating counter so layouts do not twitch, and defines which numbers are results versus operational state. - Measured contrast floor: Documents verified ratios (steel on card at 4.91:1, edge on card at 3.32:1) so color changes are checked against #22262e rather than assumed. - Use Case: When adding a new stat tile to Payload's modal, use this Skill to pick the correct face, size, weight, and color pairing that passes the contrast floor. ## Quick Start Use the game-typography skill to style the new round-summary headline and stat row in Payload's end-of-run modal.

Frequently Asked Questions about game-typography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose fonts for a game UI?▼

Assign each font a strict role: Fraunces (serif, 500-700) for identity and result numbers the player should feel, Outfit (sans, 400-700) for operational text the player should read. Mixing the roles is what makes game UI read as generic.

How do I stop numbers from shifting layout when they update?▼

Apply `tabular-nums` to every digit that updates in place or sits in a column, such as scores, quotas, tickers, and totals. Without it, proportional figures change width on every update and the layout twitches.

What contrast ratio does game UI text need?▼

Body text needs 4.5:1; the arcade's steel-on-card pair measures 4.91:1. Component boundaries need 3:1 per WCAG 1.4.11; edge-on-card measures 3.32:1. Measure against the tightest background, `#22262e`, and record the number in a comment.

Should small secondary text use a grey color?▼

Text below about 12px should not use steel on card; use ink, which measures 14.81:1. Anything both secondary and tiny is better removed than greyed further, since the 9.5px badges and 10px captions are the risky cases.

Does this typography system scale with browser font size settings?▼

No. Every size is in px, so raising the browser's default font size changes nothing; only page zoom works. The documented fix is converting body copy to rem while keeping the fixed-geometry board grid and marble in px.