ux-typography_skill

This skill helps you implement fluid typography using Utopia scale with container query units to improve readability and visual hierarchy.

JavaScript

1

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill matthewharwood/fantasy-phonics --skill ux-typography

SKILL.md5.7 KB

Overview

This skill documents a fluid typography system using the Utopia scale with cqi (container query inline) units for responsive, container-driven type. It codifies a display vs body font stack, modular type steps, line-height and letter-spacing tokens, and clear accessibility rules. Use it to set font sizes, weights, and text styling in a fantasy-themed phonics game UI or any vanilla-JS/web-component project.

How this skill works

The system defines two font stacks (display for headings/ui, serif body for content) and a set of type-step tokens that interpolate between a min and max size based on container width. cqi units require an ancestor with container-type: inline-size so sizes scale with the component or page region. It also provides line-height, letter-spacing, and weight tokens plus container queries for local overrides and accessibility minimums.

When to use it

When establishing typographic hierarchy across pages and components
When you need responsive sizes that scale with container width rather than viewport
When setting headings, body text, captions, and UI labels consistently
When implementing accessible minimum sizes and readable line-height
When styling web components or parts of the UI independently of global viewport rules

Best practices

Set container-type: inline-size on an appropriate ancestor (project root or component) before using cqi tokens
Use display font for headings/UI and serif/sans stack for body text to preserve readability and theme
Favor var(--step-X) tokens instead of fixed px or vw units to keep scale consistent and accessible
Use tighter line-height for headings (1.1–1.2) and 1.5–1.6 for body text; increase for long-form content
Keep letter-spacing tokens for large uppercase or small-caps use; avoid overtracking body copy to preserve legibility
Respect minimum token sizes for interactive text and captions to meet readability/accessibility targets

Example use cases

Page title and hero text using --step-4/--step-5 with display font and tight letter-spacing
Body paragraphs, story content, and hints using --step-0 with recommended 1.5 line-height
Small UI labels, keyboard hints, and captions using --step--1 or --step--2 with clear contrast
Component-level overrides with @container rules to reduce or increase scale in constrained spaces
Buttons, nav labels, and phase names styled with display font, semibold/700 weight and uppercase with wider letter-spacing

FAQ

An ancestor element must have container-type: inline-size (the project sets this on html). Without it, cqi tokens will not interpolate correctly.

When should I override a type step with container queries?

Override when components live in unusually small or large containers (e.g., tiny badges or full-bleed hero areas) where the global fluid range produces poor readability or visual imbalance.

How do I ensure small text remains readable?

Enforce minimum token use (never below --step--2 for readable text), increase contrast, and keep line-height and letter-spacing appropriate for small sizes.