Font‑To‑Width (FTW!) is a script by Nick Sherman and Chris Lewis that takes advantage of large type families to fit pieces of text snugly within their containers. Unlike other text-fitting tools like FitText.js, Font‑To‑Width does not scale the font-size (at least not by default). Instead, it chooses a width or weight variant according to what fits best, and then allows for letter- and word-spacing adjustments as needed.
Many changes/improvements are coming, but you can still download it from Github in the mean time.
The demo below, based on a photo of shuffleboard standings from Jason Santa Maria, uses all 6 widths of the Panorama font collection from Production Type.
Brooklyn Nets of Shuffleboard
Gloria Agnes Saul & Morty
Helbraun Levey & O’Shufflehue
Todd and the Shuffleboards
Ain’t Nothin’ but a G Tang
When Push Comes To Shuffle
Flour, Water, Biscuit, Eat It!
The Bahi Hut Sneaky Tikis
A few notes
- Font-To-Width is meant for headlines and other short pieces of text. It was not built for justifying multi-line body type.
- Due to its use of micro spacing adjustments, Font-To-Width works best in browsers like Chrome, where subpixel spacing is supported. Other browsers that round spacing to integer values will show rounding errors.
- Shuffleboard pucks are called “biscuits”.