Better Typography
Makes an AI agent review and fix how text renders: type scale, spacing, wrapping, fonts and punctuation.
- Repository
- jakubkrehel/skills
- Stars
- 10,236
- Licence
- MIT
- Files
- 8 files
What it does
Once installed, the agent checks and corrects how text looks in a web interface. It applies rules for font sizes, line-height, letter-spacing, line length, wrapping, truncation, numbers that change, and typographic punctuation, and writes the fixes into the project's existing styling system (it maps declarations to Tailwind utilities). It is written as a set of reference guides the agent reads, not a standalone app.
Great for
- Front-end developers polishing the look of a web app or marketing site
- Designers handing off type rules who want them applied consistently in code
- Teams that want a shared type scale with semantic names like text-body-sm
Skip it if
- Projects that do not use CSS or a web front end, since the guidance is about browser rendering
- Teams that need a brand-new typeface chosen; the skill says it avoids proposing new fonts unless asked, so it is not a font-selection tool
- Copy editing or accessibility audits on their own; the skill points those to other skills for wording, semantics and contrast
Try asking
- “Review the typography in this React app and fix line-height, weights and sizes that break the type scale”
- “Make the headings and card descriptions wrap better and stop orphaned words on the last line”
- “Add tabular numbers to the price and timer components so digits don't shift”
- “Stop iOS Safari zooming when a user focuses the form inputs”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 8 original files, the MIT licence and an attribution note.
better-typography.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip better-typography.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip better-typography.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Tell the agent whether your project uses Tailwind or plain CSS so fixes land in the right place.
- Say whether the team needs semantic size names or default names like text-sm; the skill treats these differently.
- For mobile input zoom fixes, specify which option you want, since the two recipes look different on small screens.
What's inside
- agents/openai.yaml
- choosing-fonts.md
- css-cheat-sheet.md
- details-and-accessibility.md
- SKILL.md
- spacing-and-sizing.md
- variable-fonts-and-opentype.md
- wrapping-and-punctuation.md
Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.