Why I Built Grade

A friend told me he was squinting at timestamps on a settings page I'd shipped. The helper text was #9E9E9E on white — 2.7:1 contrast. WCAG wants 4.5:1 for body-sized type. I had treated typography as taste until then. Pick a font, nudge spacing, ship. Once I had a number, I could fix it. Vague taste could not.

That is why I built Grade: a free typography site for people who ship interfaces. Fourteen lessons, demos inside the articles, each one ending with a CSS default you can paste. In the first two weeks it got 1,400+ visitors and 5,000+ page views.

What was missing

Typography advice is easy to find and hard to use while you're in the editor. Blogs explain a rule, then send you to a calculator in another tab. Checklists get skimmed. Auditors can flag contrast, maybe, but they do not teach what a line that is too wide feels like, and they do not hand you max-width: 65ch when you need it.

I wanted the rule and the break on the same page. Drag something. Watch the text get worse. Paste a default that already works.

What's in it

Two tracks. Basics cover the variables that decide whether text is readable at all: measure, contrast, scale, leading, weight, spacing, consistency. Intermediate covers what broke once I left static mockups — fluid type with clamp(), container queries, oklch() for dark mode, link underlines, tabular figures, text-box-trim.

Most of the second track came from specific mistakes. I inverted a hex palette for dark mode and noticed secondary text glowing on black two weeks later. I had four breakpoints per heading and got tired of maintaining them. Those problems became lessons.

How a lesson works

Each lesson is a long article with a demo in the middle of the prose — not a sidebar, not a separate playground. In measure, you drag a width slider and watch a paragraph get harder to read as the line grows. The character count updates while you drag. The article lands on max-width: 65ch, with a comfort range of 45–75 characters.

In contrast, you push gray text against a background until it crosses 4.5:1. The lesson also covers dark mode, where pure white on pure black passes every checker and still hurts on OLED at night. Grade uses warm neutrals at oklch hue 80 — #fcfcfa background, #63635e secondary text — and I moved this portfolio onto the same tokens once they held up in both themes.

One default, not five options

Every lesson ends with one number or token. Type scale is a perfect fourth at 1.333×. Body line-height sits between 1.5 and 1.65. Body weight stays at 400; headings use 600. Heading margins attach to the paragraph below, not the one above.

I could have built a URL auditor with a letter grade. It would look more like a product and teach less. I could have listed five alternatives per lesson and left you deciding again. I picked one starting point, explained why, and put the control where the argument is.

Grade started with seven basic lessons. I added the intermediate track when I realized the basics assume a fixed viewport and a single theme. Both fall apart in production.

Still open

The intermediate track still feels like a sequel. It should feel like the production half of the same system. Measure and contrast earn a live readout on screen. A few later lessons still explain more than they let you break in ten seconds. That is the next pass.

I shared the launch on LinkedIn and with people already shipping interfaces. The feedback that stuck was simple: the interactive bits made the concepts click. That matched the bet. If you want to try it, start with measure. Drag the slider. Paste max-width: 65ch into your next project.