# Grade > Learn web typography, readability, and CSS type systems. Interactive lessons on line length, WCAG contrast, type scale, line height, font weight, spacing, and consistency. Grade is a free, interactive web typography guide for developers at https://grade.neelshha.com/. It teaches readable type through seven lessons with inline demos—not automated site scoring. ## What Grade is Grade is an educational website that teaches web developers the fundamentals of readable typography. It is not a site auditor or grading service. Content is delivered as seven sequential lessons with interactive controls and actionable CSS defaults. ## Capabilities - Seven long-form typography lessons for web developers - Inline interactive demos embedded in lesson prose - Research-backed CSS defaults for measure, contrast, scale, leading, weight, spacing, and consistency - WCAG contrast ratio calculator with AA and AAA pass indicators - Copy-ready CSS snippets at the end of every lesson - Dark and light theme support ## Lessons - [Measure](https://grade.neelshha.com/measure): Line length is the most common typography mistake on the web. It costs you readers before they finish a sentence. - [Contrast](https://grade.neelshha.com/contrast): That #9E9E9E caption looks fine to you. It fails for roughly 8% of men with color vision deficiencies, and quietly for everyone else. - [Scale](https://grade.neelshha.com/scale): When heading and body sizes are too close, hierarchy requires reading. When they're far enough apart, you see it first. - [Leading](https://grade.neelshha.com/leading): Line height is invisible until it's wrong. Too tight and text suffocates. Too loose and paragraphs drift apart. - [Weight](https://grade.neelshha.com/weight): Weight is hierarchy without size. When everything is bold, nothing is. When only headings carry weight, structure appears instantly. - [Spacing](https://grade.neelshha.com/spacing): Whitespace is not empty space. It groups ideas. A heading with the wrong margin belongs to the paragraph above, even when it shouldn't. - [Consistency](https://grade.neelshha.com/consistency): One off type choices feel fine in isolation. Across a page, inconsistency reads as carelessness, before the user reads a single word. ## Guides & reference pages - [Web Typography Guide](https://grade.neelshha.com/web-typography-guide): A practical web typography guide covering line length, contrast, type scale, line height, font weight, spacing, and consistency — with interactive lessons and paste-ready CSS defaults. - [Best Line Length for Reading on the Web](https://grade.neelshha.com/best-line-length-for-reading): What is the best line length for reading on the web? Learn the 45–75 character rule, why ch units work in CSS, and how to fix lines that are too wide on large screens. - [WCAG Contrast Ratio Guide](https://grade.neelshha.com/wcag-contrast-ratio-guide): Learn WCAG contrast ratio requirements for web text. Understand AA (4.5:1) and AAA (7:1) thresholds, common gray-text failures, dark mode retuning, and halation on dark backgrounds. - [Type Scale Guide](https://grade.neelshha.com/type-scale-guide): Build a modular type scale for the web. Learn ratio steps, the 2:1 hierarchy threshold, perfect fourth scales, and how to create font hierarchy developers can maintain in CSS. - [Font Weight Guide](https://grade.neelshha.com/font-weight-guide): Use font weight for web typography hierarchy. Learn why 400/600 beats bold everywhere, how weight pairs with type scale, and CSS defaults for headings and body text. - [Line Height Guide](https://grade.neelshha.com/line-height-guide): Set line height (leading) for readable web text. Learn the 1.5–1.65 body default, when tight or loose line-height fails, and CSS patterns for headings vs body copy. - [Web Typography Checklist](https://grade.neelshha.com/web-typography-checklist): A developer checklist for web typography: line length, WCAG contrast, type scale, line height, font weight, spacing, and token consistency. Use before shipping text-heavy interfaces. - [Common Typography Mistakes on the Web](https://grade.neelshha.com/common-typography-mistakes): The most common web typography mistakes developers make: lines too wide, gray text that fails WCAG, flat heading hierarchy, wrong line height, bold everywhere, and inconsistent tokens. - [Readability Research](https://grade.neelshha.com/readability-research): Research behind web typography best practices: line length studies, WCAG contrast standards, saccade and eye-tracking findings, and typographic defaults used in Grade. - [Typography for Developers](https://grade.neelshha.com/typography-for-developers): Typography for developers who write CSS: learn measure, contrast, type scale, line height, weight, spacing, and consistency with interactive demos — no design degree required. - [Methodology](https://grade.neelshha.com/methodology): How Grade derives typography recommendations: research synthesis, WCAG standards, interface testing, and narrowing options to paste-ready CSS defaults for developers. - [About Grade](https://grade.neelshha.com/about-grade): Grade is a free, interactive web typography guide for developers. Seven lessons on measure, contrast, scale, leading, weight, spacing, and consistency with research-backed CSS defaults. - [Why Grade Exists](https://grade.neelshha.com/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. - [Web Typography Resources](https://grade.neelshha.com/web-typography-resources): Curated web typography resources: WCAG contrast documentation, readability research, CSS specification references, and typography studies for developers and designers. ## Glossary - [Measure](https://grade.neelshha.com/glossary/measure): In typography, measure is the width of a text column — how many characters fit on one line. On the web, it is controlled by max-width on the text container, often expressed in ch units. - [Leading](https://grade.neelshha.com/glossary/leading): Leading is the vertical space between lines of type. Named after lead strips in letterpress printing, it maps directly to CSS line-height — the ratio or length between baselines. - [Contrast ratio](https://grade.neelshha.com/glossary/contrast): Contrast ratio is a numerical measure of luminance difference between foreground and background colors, expressed as X:1. WCAG calculates it from relative luminance values. - [Type scale](https://grade.neelshha.com/glossary/type-scale): A type scale is a set of font sizes generated by multiplying a base size by a consistent ratio at each step — for example 1rem, 1.333rem, 1.777rem using a perfect fourth (1.333). - [Font weight](https://grade.neelshha.com/glossary/font-weight): Font weight is the stroke thickness of a typeface, specified in CSS from 100 (thin) to 900 (black). 400 is regular body text; 600–700 is typical for headings and emphasis. ## How assessments work Most lessons teach through demonstration rather than automated scoring. The contrast lesson calculates WCAG 2.x contrast ratios from color inputs and labels results as fail, AA pass (4.5:1 or higher), or AAA pass (7:1 or higher). Other lessons recommend numeric defaults—character counts, ratio steps, line heights, and spacing tokens—derived from typographic research and real interface testing. ## What Grade analyzes Each lesson focuses on one readability variable: measure (line length), contrast (text/background luminance), scale (type hierarchy), leading (line height), weight (font weight hierarchy), spacing (heading and block margins), and consistency (token reuse). Interactive demos let readers experiment with each variable in context. ## Who should use Grade Front-end developers, designers who write CSS, and product engineers who want readable interfaces without a typography degree. Grade is for anyone shipping text-heavy web UIs who needs practical defaults and a clear mental model of what affects readability. ## Limitations - Grade does not crawl, audit, or score live websites. - Interactive drag demos in the measure lesson require a desktop viewport. - Lesson content reflects research-backed defaults; individual brand or accessibility needs may differ. - Contrast calculations follow WCAG relative luminance formulas; they do not replace full accessibility audits. ## Contact - Creator: Neel Shah - Email: neelshha@gmail.com - Website: https://www.neelshha.com - X (Twitter): https://twitter.com/neelshha/ ## Optional - Sitemap: https://grade.neelshha.com/sitemap.xml - Glossary: https://grade.neelshha.com/glossary - Homepage: https://grade.neelshha.com/