What is the typography-scale skill?
The typography-scale skill is part of the ui-design plugin in Owl-Listener's designer-skills pack. It makes your agent derive type sizes from a mathematical ratio, then set weights, line heights, letter spacing, font pairing and responsive rules, so a product reads consistently from caption to display.
Typography-scale lives in the ui-design plugin of Owl-Listener's designer-skills. The SKILL.md describes an expert in typographic systems, and asks the agent to build type scales that keep hierarchy, readability and rhythm consistent.
The description names two related skills. Readable-measure covers line length, and critique-typography reviews type, so this skill is the one that constructs the scale to begin with.
Ratios and sizes
- Ratios: 1.25 for major third, 1.333 for perfect fourth.
- Sizes: caption 12, body small 14, body 16, subheading 20, H3 24, H2 32, H1 40 and display 48 to 64px.
- Weights: 400, 500, 600 and 700.
Line height, spacing and pairing
Line height comes in tight 1.2, normal 1.5 and relaxed 1.75. Letter spacing runs from negative 0.02em through 0 to 0.05em. Font pairing allows a primary family, an optional secondary, and a mono face.
Responsive rules
- Scale headings down on mobile.
- Keep body text at 16px or larger.
- Hold line length between 45 and 75 characters.
Who the typography-scale skill is for
Best for
- Building a scale from a ratio instead of picking sizes ad hoc.
- Limiting regular use to four or five sizes.
- Documenting each size's usage and testing with real content.
- Related: visual-hierarchy and better-typography.
Not for
- Judging type on an existing screen, which the repository routes to the critique-typography skill.
- Choosing a ready font pairing, since the skill supplies no font library.
Use it with UiChemy
A type scale becomes concrete in a Figma file. UiChemy Figma to WordPress converts that design into a WordPress site, and Composer writes HTML, CSS and JS in Elementor or Gutenberg. Click Get Started on uichemy.com. Related page: polish.
How to install Typography Scale Skill: Sizes, Ratios and Measure
/plugin marketplace add Owl-Listener/designer-skillsRegister the marketplace
Paste the command above into the agent. It only records the source repository and installs nothing yet.
Install ui-design
Run
/plugin install ui-design@designer-skills, or tick the plugin on the Discover tab of /plugin. typography-scale is included.Gemini CLI
Per the README, copy the repository's .gemini/extensions contents into a .gemini/extensions folder in your project.
Make the request
Describe the product and ask for a type scale. Say which ratio you prefer, or let it choose.
Check that it loaded
Ask for a scale for one product. The reply should show a ratio, sizes from caption to display, line heights and a mobile rule that keeps body at 16px.
Key features
- Ratio-based scaleSizes derive from a ratio, 1.25 for major third or 1.333 for perfect fourth.
- Named sizesCaption 12, body small 14, body 16, subheading 20, H3 24, H2 32, H1 40 and display 48 to 64px.
- Weight setWeights of 400, 500, 600 and 700 cover regular through bold.
- Line heightsTight 1.2, normal 1.5 and relaxed 1.75 suit headings, body and loose text.
- Letter spacingValues of negative 0.02em, 0 and 0.05em adjust tracking by role.
- Font pairingA primary family, an optional secondary and a mono face are defined.
- Mobile adjustmentHeadings scale down on mobile, with body text staying at 16px or more.
- MeasureLine length is held between 45 and 75 characters.
- Practical limitsFour to five sizes in regular use, tested with real content and documented for usage.
Frequently asked questions
What does the typography-scale skill do?
It directs an AI agent to build a type scale from a mathematical ratio, then assign sizes, weights, line heights, letter spacing and font pairings. It is part of the ui-design plugin in Owl-Listener's designer-skills pack and aims for consistent hierarchy.
How do I install typography-scale?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install ui-design@designer-skills. Gemini CLI users copy the repository's .gemini/extensions contents into their project, following the README. Typography-scale ships inside the ui-design plugin, so there is no separate install step to run afterwards.
Which ratios does it suggest?
It names 1.25, the major third, and 1.333, the perfect fourth. Best practices say to use a mathematical ratio, and to keep only four or five sizes in regular use, so the scale stays small and usable.
What sizes does it produce?
Caption at 12, body small at 14, body at 16, subheading at 20, H3 at 24, H2 at 32, H1 at 40 and display from 48 to 64px. These are the skill's reference values, which you can adjust for your product.
What does it say about line length?
Keep it between 45 and 75 characters. The description also points to a separate readable-measure skill for deeper work on that topic. On mobile, headings scale down while body text stays at 16px or larger.
Which agents does it work with?
The README names Claude Code and Gemini CLI as the target agents for the pack. No other agents are named. The skill is plain instruction text, so other tools reading skill folders might load it, but that is not promised.
Can it choose fonts for me?
It structures a pairing as a primary family, an optional secondary and a mono face, but it does not supply a font library. Pick the families yourself, then apply the scale to them.
What license is it under?
GitHub lists the designer-skills repository as MIT licensed. That covers reading and reusing the skill text. Read the repository's license file for the full terms before you bundle files into anything you distribute.