Typography Specimen
Drop in a font file and put it through its paces.
BeginnerWeb appCreative6–14hAI-buildable 5/5no setup
Load a local font and render a full specimen: a size ramp, the character set, adjustable tracking and leading, and live-editable sample paragraphs. Then a comparison mode to see two faces side by side. A designer's tool that's also a solid exercise in the Font Loading API.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Load a font file by drop or picker and apply it live
- A size ramp shows the face across a range of sizes
- The full character set renders in a grid
- Tracking, leading and weight are adjustable live
- Sample paragraphs are editable in place
- Compare two loaded fonts side by side
The interesting part
- Loading and registering a local font file with the Font Loading API
- Enumerating which glyphs a font actually contains
- Detecting and exposing variable font axes
Once it works
- Expose variable font axes as sliders
- Show the font's own metrics and supported features
- Export the specimen as a PDF via print styles
Suggested stack
reacttypescripttailwind