
Show HN: Font Playground – Play with variable fonts - wentin
https://play.typedetail.com/
======
kowdermeister
This uses font-variation-settings CSS property

[https://caniuse.com/#search=font-variation-
settings](https://caniuse.com/#search=font-variation-settings)

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

~~~
wentin
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!

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

~~~
systoll
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.

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

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

~~~
kalleboo
Interestingly, on Mac Safari it actually renders in color
[https://djr.com/merit-badge/](https://djr.com/merit-badge/)

------
dziungles
Cool, this one is also great:
[https://fonty.dizoo.bg/](https://fonty.dizoo.bg/)

------
DonHopkins
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](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....](https://partners.adobe.com/public/developer/en/font/T1_SPEC.PDF)

[2] [http://www.costena.com](http://www.costena.com)

[3] [http://www.costena.com/famous.html](http://www.costena.com/famous.html)

~~~
wentin
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!

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

~~~
wentin
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!

------
pepijndevos
Does not seem to work for me on Firefox/Linux

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

~~~
chime
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?

~~~
ygra
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.

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

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

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

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

------
tobyhinloopen
Doesn’t seem to do much on mobile Safari

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

