Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
How this skill is triggered — by the user, by Claude, or both
Slash command
/refactoring-ui-skills:02-apply-typography-scaleThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.
Create clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.
Hero: 48-60px, weight 700, line-height 1.1
H1: 36-40px, weight 700, line-height 1.2
H2: 28-32px, weight 600, line-height 1.3
Body: 16-18px, weight 400, line-height 1.6
Small: 14px, weight 400, line-height 1.6
Caption: 12px, weight 400, line-height 1.5
H1: 30-36px, weight 700
H2: 24px, weight 600
H3: 20px, weight 600
H4: 16px, weight 600
Body: 14-16px, weight 400
Small: 12-13px, weight 400
Inverse proportion to size:
em sizing compounds unpredictably in nested elements| Failure | Example | Fix |
|---|---|---|
| Em units | 1.25em parent, 0.875em child = 17.5px | Use px or rem |
| Micro-steps | 16px, 18px, 20px | 16px, 20px, 28px |
| Weight 300 | Light body text | Minimum 400 |
| Long lines | 100+ characters | Constrain to 35em |
| Uniform line-height | 1.5 for all | Vary by size |
See examples/typography-scale/ for scale implementations.
references/hand-crafted-scales.mdreferences/avoid-em-units.mdreferences/line-height-proportion.mdnpx claudepluginhub gnurio/refactoring-ui-plugin --plugin refactoring-ui-skillsCreates modular typography scales with size ratios, weights, line-heights, responsive adjustments, and best practices for consistent UI text.
Guides web typography with 2-3 font family limits, modular scales (Minor Third, Major Third, Perfect Fourth), line heights (1.4-1.6 body, 1.1-1.3 headings), and 45-75 character line lengths per Bringhurst rules.
Designs accessible typography systems using relative units, scalable type scales, and user-override-safe spacing. Useful for setting font sizes, line heights, and ensuring WCAG readability compliance.