Show HN: Font Playground – Play with variable fonts | Hacker News Reader

Show HN: Font Playground – Play with variable fonts

play.typedetail.com

131 pointswentin23 comments

This uses font-variation-settings CSS property

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

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

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!

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.

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).

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

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

Cool, this one is also great: https://fonty.dizoo.bg/

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

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.

(Firefox Nightly, Windows.)

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!

Does not seem to work for me on Firefox/Linux

Support for variable fonts is due to ship in Firefox 62.

(You can experimentally enable it in Firefox 61 by setting layout.css.font-variations.enabled to true in about:config.)

Thanks! That worked for me. This is such a great feature. Once standard, it would reduce the need for have multiple variants of the same font-family.

I noticed only a few fonts allowed slant. Does this depend on the TTF/OTF we use?

The axes are defined by the font. Slant implemented that way usually leads to an oblique font, while many fonts (even sans-serif ones) have distinctly-designed italic variants. Simply applying a skew transform to a font only rarely leads to something good, which is why most fonts don't offer that.

At least FF Meta has an italic axis, but only two discrete values for it, which comes out at more or less the same as two different fonts.

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.)

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

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.

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

Doesn’t seem to do much on mobile Safari

The site itself is desktop-only, but the feature it demonstrates works.

Reply on news.ycombinator.com