apply-typography-scale

Name: apply-typography-scale
Author: gnurio

github.com/gnurioDesign & UI453165 installsUpdated 26w ago

About apply-typography-scale

A design skill for building clear typographic hierarchy in marketing pages and application interfaces. It provides rules for font sizes, weights, line heights, and line lengths, and evaluates typography scales.

Key features

01Creates a hand-crafted type scale
02Sets sizing units and font weights
03Adjusts line height by text size
04Evaluates line length and hierarchy

Use cases

01Define heading and body styles for marketing pages
02Set type hierarchy for dense application UIs
03Check readability of text width and line height

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill apply-typography-scale

After installing, type/apply-typography-scalein Claude Code to confirm it loaded.

Details

From the project README

Skill: Apply Typography Scale

Purpose

Create clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.

Core Rules

Hand-crafted, not mathematical — Avoid modular scales with fractional pixels
Use px or rem, never em — Prevents compounding issues
Minimum 25% jumps — 16px → 20px (25%), not 16px → 18px (12.5%)
Two weights only — 400/500 normal, 600/700 bold
Never < 400 for UI — Too hard to read at small sizes

Recommended Scales

Marketing Page

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

Application/Dense UI

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

Line-Height Rules

Inverse proportion to size:

Small text (12-14px): 1.6-1.7 (needs help finding next line)
Body text (16px): 1.5-1.6
Large headlines (30px+): 1-1.2 (needs less help)

Line Length

Optimal: 45-75 characters per line
Max-width: 20-35em for paragraphs
Wide paragraphs: Increase line-height to 1.8-2.0

Decision Criteria

PASS

Scale uses a small set of intentional sizes with clear jumps between roles
Type hierarchy combines size, weight, line-height, and color
Body text remains readable across marketing, app, and content contexts
Line length and line-height fit the reading context

FAIL

Scale relies on tiny increments that do not create hierarchy
Font weights are too light for UI text
Long-form text lines are too wide or cramped
em sizing compounds unpredictably in nested elements

Common Failure Modes

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

Examples

See examples/typography-scale/ for scale implementations.

References

references/hand-crafted-scales.md
references/avoid-em-units.md
references/line-height-proportion.md

Comments

Markdown supported