About
Methodology
How Grade derives typography recommendations: research synthesis, WCAG standards, interface testing, and narrowing options to paste-ready CSS defaults for developers.
Grade is an educational resource, not an automated auditor. Recommendations come from a repeatable process: research synthesis, constraint mapping, interface testing, and narrowing to a single practical default per variable.
1. Research synthesis
Each lesson draws on established typographic practice — classical typesetting norms, WCAG accessibility requirements, readability studies on line length and leading, and hierarchy research on preattentive processing.
2. Constraint mapping
Research ranges become CSS constraints. "45–75 characters" becomes max-width: 65ch. "4.5:1 minimum" becomes tested color token pairs. "2:1 hierarchy threshold" becomes modular scale steps in rem.
3. Interface testing
Defaults are tested on real web interfaces — documentation pages, dashboards, marketing layouts — not isolated specimens. If a default fails in context, it is adjusted or annotated with scope limits.
4. Narrow to one default
Grade intentionally avoids encyclopedic option lists. Each lesson ends with one starting point you can trust, with interactive demos showing why the default exists and when it breaks.
Interactive lessons
Related guides
Frequently asked questions
- Does Grade use automated scoring?
- No. Grade teaches through interactive demonstration. The contrast lesson calculates WCAG ratios from your inputs; other lessons recommend numeric defaults derived from research.
- Can I trust Grade defaults for accessibility compliance?
- Grade defaults align with WCAG contrast requirements and established readability research, but they are not a substitute for a full accessibility audit of your specific product.