Tangentially to what is demonstrated here it also makes an interesting point about how browsers approach text rendering. Dragging the sliders in Chrome makes everything jump around in pixel offsets all the time (so you couldn't even smoothly animate those values without the viewer getting a headache), while in Edge everything is smooth. But in Edge some interactions just don't work. Firefox doesn't appear to support a required feature for these to work.
I love how "Cheee" has the descriptive dimensions of puffy "Yeast" and droopy "Gravity"!<p>The last one in the list, "ZinZin", has "Swash" that makes discrete changes to different characters. And "Lab" also has four very different parameters: "Bevel", "Oval", "Quad" and "Size". "Devovar" has a LOT of weird parameters!<p>Aha, you can click on any of the checkboxes next to the parameter names to map them to the two-dimensional variable options puck. It helps to break the text sample into several lines and zoom the font size way up to appreciate it.<p>Using variable fonts instead of color for syntax highlighting would make code look less like puking up a roll of skittles. Especially with some variable fonts designed to express the syntax and semantics of the language. Parens could get huggier as the got deeper!<p>I'd love a handwriting font with a continuously variable parameter that drove something like perlin noise to make each character slightly different.<p>Reminds me of the weird property names like "BlueFuzz" that Adobe Type 1 fonts used.<p><a href="https://news.ycombinator.com/item?id=12478422" rel="nofollow">https://news.ycombinator.com/item?id=12478422</a><p>>The story I heard was that Adobe's Type 1 font encoding [1] used obscure names like BlueValues, OtherBlues, FamilyBlues, FamilyOtherBlues, BlueScale, BlueShift, and BlueFuzz, so that Adobe employees could discuss their proprietary font hinting algorithms in public while they were in line for burritos at La Costeña [2]. That way nobody from Apple or Sun or SGI who was standing in line next to them could understand what they were talking about.
Yes THAT World Famous La Costeña: Guiness Record Holder for the World's Largest Burrito! [3] On May 3rd, 1997 La Costeña of Mountain View, California created the world's largest burrito. The burrito weighed in at 4,456.3 pounds and was measured at 3,578 feet long. It was created at Rengstorff Park in Mountain View.<p>[1] <a href="https://partners.adobe.com/public/developer/en/font/T1_SPEC.PDF" rel="nofollow">https://partners.adobe.com/public/developer/en/font/T1_SPEC....</a><p>[2] <a href="http://www.costena.com" rel="nofollow">http://www.costena.com</a><p>[3] <a href="http://www.costena.com/famous.html" rel="nofollow">http://www.costena.com/famous.html</a>
The .panel on the right doesn’t do overflow, so on not-enormous screens, some of the sliders are hidden from view. Decovar with fifteen sliders is the easiest to see this on—if the viewport is less than about 1550px high, you’ll miss some of them.<p>I won’t offer suggestions on fixing that, because the straightforward solutions do damage in other ways; a more carefully thought-out solution will be required.<p>(Firefox Nightly, Windows.)
This one finally made some things about how fonts play in the web more tangible to me. the bounding box and three choices of rescaling/sizing made this much more clear to me, felt intuitive.<p>Felt like the font catalog was small. Some back info about what fonts this can play with, and why, and how to add more would help<p>(not a typography or font expert.)
I love the idea of an x-height axis as demonstrated in Dunbar. Different x-heights can be used for really interesting effects in different design contexts.