Show HN: Font Playground – Play with variable fonts

The Merit Badge sidebar preview gets extremely colourful with subpixel rendering: https://temp.chrismorgan.info/merit-badge-subpixel-rendering.... It looks quite fascinating!

kalleboo• 8 years ago

Interestingly, on Mac Safari it actually renders in color https://djr.com/merit-badge/

kowdermeister• 8 years ago

This uses font-variation-settings CSS property

https://caniuse.com/#search=font-variation-settings

swaggyBoatswain• 8 years ago

I was digging through the sourcecode and package.json and was wondering how the new font changes were being made, thanks for noting this

wentin4• 8 years ago

I love how you go directly to the source code to dig it out! Actually the answer if also hidden in the code tab of the app. It you switch to Code, you can get the code snippets to make the setting work in css!

chrismorgan2• 8 years ago

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.

(Firefox Nightly, Windows.)

wentin4• 8 years ago

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!

ygra3• 8 years ago

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.

systoll2• 8 years ago

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.

ygra3• 8 years ago

All browsers on Windows by now use DirectWrite and Direct2D as far as I know. It's not an inherent limitation of the text rendering API. Yes, GDI always uses pixel-grid fitting, but no browser has used GDI text rendering for a while on Windows (Chrome was the last to switch, IIRC, and before they did, webfonts looked horrible).

DonHopkins• 8 years ago

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.

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

wentin4• 8 years ago

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!

amelius• 8 years ago

I'm getting some rendering artifacts, i.e. white horizontal lines.

kenbellows• 8 years ago

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.

ggm• 8 years ago

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

(not a typography or font expert.)

wentin4• 8 years ago

I will support adding your own fonts to font menu soon! Stay tuned and thanks for the suggestion!

Show HN: Font Playground – Play with variable fonts

Related Stories