How do I install the Apply Typography Scale skill?

Run npx skillmds@latest add gnurio/apply-typography-scale in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Apply Typography Scale skill do?

Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors It is listed under Design & Media on SkillMD.

Is Apply Typography Scale safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Apply Typography Scale?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Apply Typography Scale free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Apply Typography Scale?

gnurio (@gnurio) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Apply Typography Scale by gnurio — Agent Skill

Name: Apply Typography Scale
Author: gnurio

File contents

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

---name: apply-typography-scaledescription: Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors---# Skill: Apply Typography Scale## PurposeCreate clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.## Core Rules1. **Hand-crafted, not mathematical** — Avoid modular scales with fractional pixels2. **Use px or rem, never em** — Prevents compounding issues3. **Minimum 25% jumps** — 16px → 20px (25%), not 16px → 18px (12.5%)4. **Two weights only** — 400/500 normal, 600/700 bold5. **Never < 400 for UI** — Too hard to read at small sizes## Recommended Scales### Marketing Page```Hero: 48-60px, weight 700, line-height 1.1H1: 36-40px, weight 700, line-height 1.2H2: 28-32px, weight 600, line-height 1.3Body: 16-18px, weight 400, line-height 1.6Small: 14px, weight 400, line-height 1.6Caption: 12px, weight 400, line-height 1.5```### Application/Dense UI```H1: 30-36px, weight 700H2: 24px, weight 600H3: 20px, weight 600H4: 16px, weight 600Body: 14-16px, weight 400Small: 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 |## ExamplesSee `examples/typography-scale/` for scale implementations.## References- `references/hand-crafted-scales.md`- `references/avoid-em-units.md`- `references/line-height-proportion.md`

Frequently asked questions

Apply Typography Scale