[chrisdalke]

The Google Fonts page doesn't really do justice to how dynamic this font is -- https://www.recursive.design/ has a live demo that shows more of the options, maybe the link should be changed to their demo.

There are four dimensions and a few other flags that the font can be adjusted by in CSS: natural-width to fixed-width, Linear to "Casual", Font weight, Font slant, and cursive variants.

By tweaking any of the variable font parameters it you can get anything in the range of a "serious" monospace font to a more casual font useful for UI mockups. I don't spend a huge amount of time in the font design world but this is one of the first variable fonts I've seen that feels less like a gimmicky demo and more like a seriously versatile tool, really great work!

[airstrike]

The question is: do we need flexible fonts? Other than fine-tuning the monospace font to fit your exact preferences given the hours you spend coding, everything else seems to be a matter of just picking an appropriate type that fits your project

[crazygringo]

As a coder, probably not.

As a designer, absolutely. The exact weight of a font can make a ton of difference in a finished product, and it's frequent to be frustrated that the font isn't available in the weight that would look right for the needs -- you need something in between semibold and bold, or something in between regular and condensed, or something oblique but not that oblique.

It's the difference between a design being good, and a design being beautifully "just right" with everything perfectly in proportion.

So for that, variable fonts are a godsend.

That being said, I've never seen a slider between proportional and monospace before. That's just weird. :)

[andrewingram]

Is there anything related to outputting a static font from a variable font + config? The problem I have with variable fonts is that whilst they're smaller than an entire font family, they're usually significantly larger than individual fonts -- to the point that I can't justify using them on the web.

[patrickthebold]

It's perfect for those times where you need something monospace, but not too monospace.

[jameshart]

Not sure if you're being facetious - it's actually not a crazy idea. For example: displaying 'code' at display font sizes.

If I want to show something that looks like code - like an HTML tag or something - at a heading size on a page or a poster, a proper monospaced coding font is going to look bad. Playing with the MONO slider on https://www.recursive.design/ for a string like '<blink />' does a good job of producing something that looks like code but isn't swamped with too much whitespace...

[WA]

Interesting. But given that so many big brands simply use Arial or Helvetica for their logo and brand, is this really a thing?

[crazygringo]

Helvetica (Neue) comes in more weights and variations than practically any other typeface. So it is really a thing.

https://www.myfonts.com/fonts/linotype/neue-helvetica/

Also, Helvetica is popular in large part because of the very precise personality it has with is quite amenable to the image corporations often like to portray. It become widely available on computers, starting with Macs, because it was already such a useful font. Major corporations aren't choosing Helvetica simply because it's a default font on computers. And, of course, it's not like a majority of companies use Helvetica for their branding or anything -- it's a popular font, but where popular means maybe 3% or 5%, not 50%.

[Firehawke]

Another way of saying it would be:

Helvetica was put on Macs because it was so popular as a useful font, rather than it becoming popular because it was on Macs.

[dhosek]

This is effectively the third try at making something like this work. Arguably the first "variable" font was Metafont which was limited by its programmatic interface which made most type designers reject it as a useful tool. The roughly contemporaneous development of PostScript and the subsequent opening up of the Type 1 format to non-Adobe font development was sufficient to end any possibility of MF being a viable type development system. Still, its fully programmable nature meant that it was possible to have parameterized typefaces and opened the possibility for something like this to appear elsewhere.

Take two was Adobe's Multiple Master extension to Type 1. Technically this is still used by Adobe Acrobat to handle fallbacks for missing fonts, but as an end-user technology it was a failure, largely because of difficulties in being able to use the interpolated fonts—few applications allowed direct selection of interpolated designs and users had to generate them in ATM instead.

So now we have the third attempt, with better application support, which has some hope of success. For text type users, the appeal is the ability to finally regain optical scaling for type designs. Traditionally, as a type design was created at a smaller size, it would become relatively darker with less contrast. Perhaps the most dramatic example of this in everyday use is to compare the spindly appearance of "fake" small caps with the more robust appearance of properly designed small caps. So this is one case where, yes, we really do want this ability.

[chrisdalke]

Just speculating, but this could help in any web project where you're including multiple font weights/styles -- Currently that involves building a CSS font-family from multiple font files which have a lot of redundant information. With a variable font, your font family could pull from a single font file and use the font parameters to tweak different styles.

The HN audience loves to discuss the bloat in web design -- If you can reduce 500kb of font-<heavy, bold, italic, light> files into a single file that interpolates between font vectors dynamically, that goes a long way to avoiding excessive resources. And you also get the benefit of being able to tweak the parameters of each font style without changing out static files.

For example, with Recursive the entire static font family come in at 12.8mb, while the dynamic font family in a single file is 1.45mb. Obviously you wouldn't load up every variant and Recursive is a very large font, but I could certainly imagine replacing ~8-10 font files with a single variable font.

[Klathmon]

They offer web optimized versions. The full variable font in woff2 comes in at 523kb, and then there are subsets available from there (reduced character set, reduced customizability), and you can even build your own font with only what is needed.

[seanwilson]

Are variable fonts supposed to have a smaller file size? The examples I've looked at have been bigger than including all the variations you'd expect to use of the non-variable version. Are there examples of a significant file size saving?

Generally with web design, you want to stick to a small number of font weights anyway so if the file size isn't smaller, what's the core motivation?

[rememberlenny]

It depends. The font rendering process is based around "masters" which can vary in count. One font could have one master for all the weights, or multiple masters - for the bold/normal/light. Depending on the master count, the size can differ.

The key thing also is the number of web requests. This is not a trivial detail. One variable font can be less web requests.

[seanwilson]

> The key thing also is the number of web requests. This is not a trivial detail. One variable font can be less web requests.

Is the number of web requests a factor if you're using HTTP/2 though?

[MildlySerious]

Variable fonts are a nice match for rich text editors. They allow you to have any combination of italic and font weight without having to load in a whole font family.

[ratmice]

I can imagine wanting to use a flexible font for syntax highlighting for colorblind people and monochrome displays like eInk.

[nyanpasu64]

> There are four dimensions and a few other flags that the font can be adjusted by in CSS: natural-width to fixed-width, Linear to "Casual", Font weight, Font slant, and cursive variants.

And yet no way to decrease the x-height. I'm sick of fonts where the lowercase is tall and the uppercase/ascenders are short.

[chrisdalke]

I've seen the same trend in other recent fonts designed for programming, like JetBrains Mono, with the idea that "more height" on lowercase letters improves legibility at small font sizes. I'm in agreement with your distaste, mostly because I work on high-DPI displays where legibility is not necessarily an issue and fonts that do this look like a "blob" of text.

[lambda]

Unfortunately, font-variation-settings isn't supported by Firefox, Safari, IE, or older versions of Edge, so these settings only work for ~70% of users according to Can I Use.

It was a bit frustrating viewing this site on Firefox and not having any indication of why the settings weren't changing anything.

Of course, maybe that's because there hasn't been enough demand for it, and now that there is a font that's widely available which can use this, Firefox might finish enabling it (looks like there is a flag for it, but it's not enabled by default).

[heycam]

Support for font-variation-settings has been on by default since Firefox 62, which was released almost two years ago. Are you using a Firefox older than that?

[lambda]

Ah, sorry, I was looking at the wrong item on "Can I Use...", @font-face: font-variation-settings, rather than the "Variable Fonts" item which covers font-variation-settings outside of @font-face rules.

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

And I am running an ancient version of macOS, 10.12, which explains my issue, as it's only supported on macOS 10.13+ in Firefox.

I have a new (non-macOS) laptop in transit, but my current daily driver is an old Mac.

Sorry for the alarm!

[nedbat]

The sliders on the site work for me in Firefox, v78.0.2.

[augstein]

Also in Safari iOS 13.6

[jsjohnst]

> Unfortunately, font-variation-settings isn't supported by Firefox, Safari, IE, or older versions of Edge

Seems to work fine for me on Safari

[mortenjorck]

Initially I thought this was an error, because there are other variable fonts on Google Fonts that are displayed with multiple sliders, such as Playfair Display or Work Sans. However, it looks like in each of these cases, the italics are a separate font definition, with only a single variable axis (weight) offered for each. It appears Google Fonts doesn’t currently have a way to deal with multi-axis variable fonts.

[thundernixon]

It’s more the case that the weight axis is common, and commonly understood, so the Google Fonts front end just leaves out any axis that isn’t Weight or Italic, I guess as a “UX” consideration. It’s unfortunate. The good news is, the Google Fonts API (the thing that serves fonts and CSS based on specific URLs) _does_ handle the other axes.

So, the Recursive minisite has a configuration tool (under the “Get Recursive” button) that makes it easy to get Google Fonts embed code for all axes.

[thundernixon]

https://www.recursive.design/

[thundernixon]

Thank you for saying more, chrisdalke! I actually tried to post the font’s website, but because it was already posted last year, hacker news wouldn’t allow me to submit the link again.

[whalesalad]

I love the transition from straight to slanted.

[estevao2c]

Really cool demo indeed, but it lags a lot on my phone. Still a really great font

[thundernixon]

Yeah, we tried to pack maybe a few too many fun features into the minisite, so it is unfortunately a bit more laggy than ideal. Thanks for checking it out, though!

[thewarpaint]

That's a wonderful showcase of the posibilities of variable fonts, thanks!