ux-typography
✓Typography patterns using Utopia fluid type scale with cqi units. Use when setting font sizes, line heights, font families, or text styling. Covers display vs body fonts, hierarchy, and readability. (project)
Installation
SKILL.md
Fluid typography system using Utopia scale with container query inline (cqi) units. This skill covers font selection, sizing, and typographic hierarchy.
The project uses Utopia fluid scale with cqi units (container query inline). Sizes interpolate based on container width.
IMPORTANT: cqi units require container-type: inline-size on an ancestor. The project sets this on html.
Typography patterns using Utopia fluid type scale with cqi units. Use when setting font sizes, line heights, font families, or text styling. Covers display vs body fonts, hierarchy, and readability. (project) Source: matthewharwood/fantasy-phonics.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-typography- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is ux-typography?
Typography patterns using Utopia fluid type scale with cqi units. Use when setting font sizes, line heights, font families, or text styling. Covers display vs body fonts, hierarchy, and readability. (project) Source: matthewharwood/fantasy-phonics.
How do I install ux-typography?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-typography Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/matthewharwood/fantasy-phonics
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01