What it is
This skill creates a complete typography system with harmonious font sizes, weights, and spacing rules. It's designed for anyone building digital products who wants their text to look polished and professional without guessing at sizes. You get a ready-to-use scale that works across desktop and mobile.
What it does
- Generates a mathematical scale of text sizes from captions to large headings
- Defines line heights and letter spacing for optimal readability
- Provides font weight and pairing recommendations
- Creates responsive rules so text scales gracefully on mobile devices
- Documents usage guidelines for each text style
Use it when
- You're designing a website, app, or marketing site and need consistent text sizing
- You want your headings and body copy to look harmonious without manual tweaking
- You're building a design system or brand guide
- You need typography rules that work across desktop and mobile
Add this skill to your AI
Copy the source URL and ask your AI to add it. Most coding agents — Claude Code, Cursor, Codex, Gemini CLI, OpenCode, Windsurf — will fetch and install it for you.
Try this prompt:
Add this skill to my project: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/typography-scale