About
Why Grade Exists
Why Grade was built: most typography guides describe rules without letting you feel them. Grade teaches web typography through interactive demos and research-backed CSS defaults.
Most typography content falls into two camps: aesthetic essays about font pairing, or abstract guidelines disconnected from CSS. Developers need something else — measurable variables, visible consequences, and defaults they can paste into a codebase today.
The gap Grade fills
Readable type fails in predictable ways: lines too wide, gray text that fails WCAG, flat heading hierarchy, inconsistent tokens. These are CSS problems with CSS solutions, but most guides describe them without letting you experiment in context.
Grade puts controls inside the article. Drag a slider, watch the text change, remember why the rule exists. Then copy the default.
Educational goals
- Build a mental model of the seven readability variables
- Connect research thresholds to concrete CSS values
- Reduce typography decisions to maintainable design tokens
- Make accessibility constraints (WCAG contrast) practical, not abstract
Interactive lessons
Related guides
Frequently asked questions
- Why interactive lessons instead of a reference table?
- Typography rules make sense only when you see them break. Line length, contrast, and scale are felt before they are remembered. Interactive demos encode that experience into the learning.
- Why focus on developers specifically?
- Developers make typography decisions in CSS every day — often without design support. Grade meets them where they work: max-width, line-height, font-weight, and color tokens.