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.
That's an 'old windows text rendering' thing. You can turn variable fonts on in Firefox, and it behaves like Chrome; but neither one works like that on MacOS.
I love how "Cheee" has the descriptive dimensions of puffy "Yeast" and droopy "Gravity"!
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!
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.
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!
I'd love a handwriting font with a continuously variable parameter that drove something like perlin noise to make each character slightly different.
Reminds me of the weird property names like "BlueFuzz" that Adobe Type 1 fonts used.
>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.
Thanks for your review! I passed along the goods words to the designer of Cheee, I am sure he is delighted.
Interesting story on Adobe Type history! The good old days!
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.
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.
I add a temporary fix to this overflow issue. it is caused by a flexbox issue on firefox.
On firefox the behavior is a little different from chrome/safari, but at least the axis are not hidden from overflowing anymore :)
thanks for the report!
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.
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
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.
[+] [-] kowdermeister|7 years ago|reply
https://caniuse.com/#search=font-variation-settings
[+] [-] swaggyBoatswain|7 years ago|reply
[+] [-] ygra|7 years ago|reply
[+] [-] systoll|7 years ago|reply
[+] [-] chrismorgan|7 years ago|reply
[+] [-] kalleboo|7 years ago|reply
[+] [-] dziungles|7 years ago|reply
[+] [-] DonHopkins|7 years ago|reply
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!
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.
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!
I'd love a handwriting font with a continuously variable parameter that drove something like perlin noise to make each character slightly different.
Reminds me of the weird property names like "BlueFuzz" that Adobe Type 1 fonts used.
https://news.ycombinator.com/item?id=12478422
>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.
[1] https://partners.adobe.com/public/developer/en/font/T1_SPEC....
[2] http://www.costena.com
[3] http://www.costena.com/famous.html
[+] [-] wentin|7 years ago|reply
[+] [-] chrismorgan|7 years ago|reply
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.
(Firefox Nightly, Windows.)
[+] [-] wentin|7 years ago|reply
[+] [-] pepijndevos|7 years ago|reply
[+] [-] jfk13|7 years ago|reply
(You can experimentally enable it in Firefox 61 by setting layout.css.font-variations.enabled to true in about:config.)
[+] [-] ggm|7 years ago|reply
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
(not a typography or font expert.)
[+] [-] wentin|7 years ago|reply
[+] [-] kenbellows|7 years ago|reply
[+] [-] amelius|7 years ago|reply
[+] [-] tobyhinloopen|7 years ago|reply
[+] [-] systoll|7 years ago|reply