Live/2025/Design & front end
Foxglove Type
A specimen site for a variable serif, where every setting on the page is adjustable and the type responds to the reader rather than a breakpoint.
Most type specimens show you the font at three sizes and call it done. Foxglove Type hands over the axes — weight, optical size, and contrast — and lets you drag them while a paragraph of real text reflows underneath.
The interesting part
Variable font axes are continuous, but layout decisions usually are not. The specimen interpolates optical size against the rendered line length rather than the viewport width, so a narrow column in a wide window still gets the right optical treatment.
Build notes
- No framework: one HTML file, a stylesheet, and about 90 lines of JavaScript for the axis controls.
- Axis values live in CSS custom properties so the controls are one assignment each.
- Scroll-linked animation uses
animation-timeline, with a static fallback where it is unsupported.
Reception
It got picked up by two type newsletters, which is the closest thing to a launch this kind of project gets.