Why I Built Grade

Your contrast checker said pass. The caption still failed.

I had shipped #9E9E9E helper text on a settings page. WCAG tools flagged nothing urgent. On a Retina display in a dim room, it looked fine. On white, it was 2.7:1. Below the 4.5:1 floor. I only noticed after a friend mentioned squinting at timestamps on his phone in daylight.

That was when I stopped treating typography as taste and started treating it as variables. I could not find a guide that let me feel where each one breaks before I memorized the rule. So I built one.

The gap

Typography content online tends to split in two. Aesthetic guides: font pairings, editorial layouts, inspiration galleries. Reference tools: contrast calculators, scale generators, line-length formulas. Both are useful. Neither answered what I actually needed.

I would read the rule, paste the value, ship it, and still wonder why the paragraph felt wrong. The number was right. The feeling was off. What I wanted sat in between: research-backed defaults explained in prose, with controls that let me break the rule and notice the exact moment readability drops.

What I built

Grade is a free, interactive curriculum on web typography. Seven lessons. One concept each. Demos live inside the article, not in a separate tab you forget to open.

No font history. No pairing essays. Just the variables that decide whether someone finishes reading your interface: measure, contrast, scale, leading, weight, spacing, and consistency.

Every lesson follows the same shape. Name the mistake. Let you break it with a slider or comparison. State the rule in one sentence. End with CSS you can paste today.

The seven basics

Each lesson covers one variable and leaves you with one default. Read in order or jump to what you need.

Measure

Body text on a wide monitor often runs 100+ characters per line. The layout looks balanced. The reading experience is not. Measure is a property of the text block, not the page wrapper.

Default: max-width: 65ch on every container holding reading text. The comfortable range is 45–75 characters. Sixty-five is the starting point I keep coming back to.

Contrast

#9E9E9E caption gray ships because it looks fine on a calibrated display. It fails the ratio. Contrast also has a ceiling: pure white on pure black passes every checker and still causes halation on dark backgrounds at night.

Default: at least 4.5:1 for body and secondary text. On dark mode, separate text tokens with off-white on dark gray, aiming for 7:1 to 15:1.

Scale

When h1 is 24px and body is 16px, the ratio is only 1.5:1. Hierarchy becomes attentive. The reader has to compare elements to understand rank. Above roughly 2:1, hierarchy becomes preattentive. Structure registers before comprehension.

Default: a perfect fourth scale at 1.333×. Heading steps large enough that you see structure before you read it.

Leading

Line height is invisible until it is wrong. Below 1.5, multiline paragraphs suffocate. Above 1.65, lines start to float apart.

Default: body line-height between 1.5 and 1.65. Never below 1.5 for reading text.

Weight

When everything is font-weight: 600, nothing is. Weight is hierarchy without size, useful when your scale steps are conservative.

Default: reserve weight for headings. Let body stay at 400.

Spacing

A heading with too little top margin belongs to the paragraph above it, even when it should introduce the one below. Whitespace groups ideas.

Default: margin tokens that tie headings to the content they introduce, not just separate blocks.

Consistency

One-off type choices feel fine in isolation. Across a page, inconsistency reads as carelessness before anyone reads a single word.

Default: a small token set applied everywhere. Measure, contrast, scale, leading, weight, and spacing as one system.

Demos in the prose

Most typography guides describe the rules. Grade lets you feel them. In the contrast lesson, you drag a slider and watch #9E9E9E cross 4.5:1 before your eye catches up. In the measure lesson, you drag column width until you lose your place returning to the next line.

The controls sit inside the article because context matters. Each demo also surfaces the spec: contrast ratios, character counts, scale ratios. You see the number and the feeling at the same time.

One default, not ten options

Every lesson draws on typographic research, gets tested on real interfaces, and narrows to one default you can trust. Not an encyclopedia of options. One value, with the reasoning behind it, so you know when and why to deviate.

Go try it

Typography is not a taste problem. It is a variables problem. Once you know which variables matter and what good defaults look like, most readability issues become obvious before they ship.

Grade is live at grade.neelshha.com. Start with measure. Drag the width slider. Paste max-width: 65ch into your next project. Then keep going.