Typeface
Software Design Typography
A browser-based variable font inspector and comparison tool. Upload any variable font, explore its axes in real-time, and compare multiple fonts side by side with custom specimen text.
The Problem
Variable fonts are powerful but hard to evaluate. Designers need to see how weight, width, optical size, and custom axes interact across different text samples. Existing tools either show one font at a time or can’t handle custom axes.
Features
- Axis explorer — sliders for every variable axis with real-time preview
- Side-by-side comparison — load up to 4 fonts simultaneously
- Custom specimen text — test with your own copy, not just pangrams
- Export CSS — generates the exact
font-variation-settingsvalue for your chosen configuration - OCR-aware rendering — visual overlay showing how font features affect readability
Technical Details
- Pure client-side — no server, fonts stay local
- Uses the CSS Font Loading API for dynamic font injection
- Canvas rendering for pixel-level comparison overlays
- Web Workers for font parsing (OpenType tables can be large)
Design Decisions
The tool itself uses a monospace font stack to maintain the “terminal aesthetic” of the broader site. The interface is intentionally minimal — the font being inspected should be the star, not the UI around it.