4 ms·

The Google Fonts page doesn't really do justice to how dynamic this font is -- https://www.recursive.design/ https://www.recursive.design/ has a live demo that

The Google Fonts page doesn't really do justice to how dynamic this font is -- https://www.recursive.design/ 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 6y ago
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
- chrisdalke 6y ago
  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 6y ago
    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 6y ago
      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 6y ago
        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 6y ago
        > 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?
- crazygringo 6y ago
  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. :)
  - WA 6y ago
    Interesting. But given that so many big brands simply use Arial or Helvetica for their logo and brand, is this really a thing?
    - crazygringo 6y ago
      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/ 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 6y ago
        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.
  - andrewingram 6y ago
- MildlySerious 6y ago
  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.
- dhosek 6y ago
  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.
- ratmice 6y ago
  I can imagine wanting to use a flexible font for syntax highlighting for colorblind people and monochrome displays like eInk.
nyanpasu64 6y ago
> 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 6y ago
  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.
  - deleted 6y ago
    [deleted]
  - deleted 6y ago
    [deleted]
thewarpaint 6y ago
That's a wonderful showcase of the posibilities of variable fonts, thanks!
lambda 6y ago
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).
- nedbat 6y ago
  The sliders on the site work for me in Firefox, v78.0.2.
  - augstein 6y ago
    Also in Safari iOS 13.6
- heycam 6y ago
  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 6y ago
    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 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!
- jsjohnst 6y ago
  > Unfortunately, font-variation-settings isn't supported by Firefox, Safari, IE, or older versions of Edge Seems to work fine for me on Safari
whalesalad 6y ago
I love the transition from straight to slanted.
mortenjorck 6y ago
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 6y ago
  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 6y ago
    https://www.recursive.design/ https://www.recursive.design/
estevao2c 6y ago
Really cool demo indeed, but it lags a lot on my phone. Still a really great font
- thundernixon 6y ago
  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!
thundernixon 6y ago
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.

airstrike 6y ago

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

chrisdalke 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      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 6y ago
        > 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?
crazygringo 6y ago
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. :)
- WA 6y ago
  Interesting. But given that so many big brands simply use Arial or Helvetica for their logo and brand, is this really a thing?
  - crazygringo 6y ago
    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/ 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 6y ago
      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.
- andrewingram 6y ago
MildlySerious 6y ago
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.
dhosek 6y ago
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.
ratmice 6y ago
I can imagine wanting to use a flexible font for syntax highlighting for colorblind people and monochrome displays like eInk.

nyanpasu64 6y ago

> 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 6y ago
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.
- deleted 6y ago
  [deleted]
- deleted 6y ago
  [deleted]

thewarpaint 6y ago

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

lambda 6y ago

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

nedbat 6y ago
The sliders on the site work for me in Firefox, v78.0.2.
- augstein 6y ago
  Also in Safari iOS 13.6
heycam 6y ago
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 6y ago
  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 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!
jsjohnst 6y ago
> Unfortunately, font-variation-settings isn't supported by Firefox, Safari, IE, or older versions of Edge Seems to work fine for me on Safari

whalesalad 6y ago

I love the transition from straight to slanted.

mortenjorck 6y ago

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 6y ago
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 6y ago
  https://www.recursive.design/ https://www.recursive.design/

estevao2c 6y ago

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

thundernixon 6y ago
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!

thundernixon 6y ago

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.