Typography is one of the most powerful tools in visual communication, yet most people never learn the vocabulary to talk about it meaningfully. Resources like Monotype's glossary and Canva's guides are informative but static — you read about "ascenders" and "counters" from flat diagrams. This project was built to make typography terminology tangible and interactive, letting you explore each concept by manipulating real text.
Type Anatomy is an interactive typography exploration tool with four sections: an anatomy explorer where you toggle letterform measurement lines over a large character, a font family classification guide, a live typography measurements playground with CSS output, and a quiz to test your knowledge. All purely client-side with no external APIs required.
The anatomy overlay uses absolute-positioned elements calculated relative to the displayed character's bounding box. Font classification leverages system font stacks to demonstrate each family. The measurements tab uses CSS custom properties and range inputs to update a live preview and generate copyable CSS. The quiz engine runs entirely in JavaScript with a built-in question bank covering all major typographic terms.