Why I Built Grade

I shipped helper text at #9E9E9E on white: 2.7:1 contrast. WCAG wants 4.5:1 for body sized type. I had been treating typography as taste. 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 (opens in a new tab): a free typography site for people who ship interfaces. Fourteen lessons, a demo in the middle of each article, 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.

The gap

Typography advice is easy to find and hard to use in the editor. Blogs explain a rule, then send you to a calculator in another tab. Checklists get skimmed. Auditors can flag contrast. They do not show what a line that is too wide feels like, and they do not hand you max-width: 65ch when you need it. Grade keeps the rule and the break on the same page.

Two tracks. Basics cover measure, contrast, scale, leading, weight, spacing, and consistency. Intermediate covers what breaks after static mockups: text wrap, fluid type with clamp(), container queries, oklch() for dark mode, link underlines, tabular figures, and text-box-trim.

The lesson

Each lesson is an article with a demo in the middle of the prose. 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 lesson lands on max-width: 65ch, with a comfort range of 45 to 75 characters.

In contrast, you push gray text against a background until it crosses 4.5:1. Pure white on pure black can pass every checker and still hurt on OLED at night.

Every lesson ends with one number or token, not a menu of options. 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. Start with measure (opens in a new tab) if you want the shortest path into it.