Context
Fluid typography using the CSS clamp function allows font sizes to scale smoothly with the viewport rather than jumping between fixed sizes at breakpoints. Type grows and shrinks continuously between a defined minimum and maximum. It's a powerful technique, but visualizing how a fluid type scale actually behaves across viewport widths requires either resizing your browser constantly or guessing.
A few tools existed for this, but none had the combination of features I wanted. Rather than compromise, I built my own, combining fluid type testing with basic type size and font testing in a single interface.
Role
Process
- 01
Combining two related problems
There are great fluid type tools out there, but they tend to focus on the clamp calculation. This tool combines that with broader type testing: sizes, fonts, and basic typographic properties. The goal was a single place to evaluate a combination of type choices holistically, with just enough tools.
- 02
Vuex for shared state
Type settings needed to be accessible and reactive across multiple parts of the interface simultaneously. Vuex handled that cleanly, keeping the UI in sync as values changed.
Outcome
A working tool that I use occasionally in my own workflow. More than the tool itself, it was a valuable exercise in building something from a personal itch... understanding the CSS clamp technique and type scales deeply enough to build a testing interface around it.