Recursive, a free variable font for code and UI, now on Google Fonts

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

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.

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.

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.

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

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.

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?

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

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

Seems to work fine for me on Safari

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.

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!

Exactly same. I try different fonts from time to time but always end up going back to Consolas.

I think Cascadia Code[0] is pretty close but I wish Microsoft would re-release Consolas with ligatures.

[0] https://github.com/microsoft/cascadia-code

Also, Inconsolata 3.0 is also a variable font with a wide range, including widths from 0.5 to 2.0 of the standard width. I need to see about doing something similar to the Recursive mini-site where I show that off and explain how to get access to the capabilities, but have been busy with other stuff.

Yes. Inconsolata is really good, as is Consolas, and both have been two of my favorite fonts. But JetBrains Mono has clicked in my brain like no other font. It's just so pleasing to read, especially on a 4K monitor.

On the terminal, my favorite font is "Liberation Mono".

Some of the other good fonts are: Cascadia Code/Mono, Droid Sans Mono, Fira Code, Hack, Menlo, Source Code Pro, and Terminus. I just happen to like JetBrains Mono the most.

Which exact variant are you using? Could you please copy past your setting line?

yes!

Il|i! and DO0Q

I like 0 vs O better, but 1 vs l worse: https://imgur.com/a/1tXx8aH

What is "parameter mono set to min. 0.5" and where do you find that?

[edit: Oh I see. It's not on the linked page but on the font's homepage.]

Can I ask what software you ran into that issue with? Probably, it was a strict-monospace environment, like vim in a terminal. I have created code-specific fonts to deal with this issue:

there are fonts made specifically for code which have code ligatures & the simple l, f, 6, & 9 frozen in, if you like these features but don’t want to mess with OpenType features (or if your code editor doesn’t support that).

https://github.com/arrowtype/recursive/tree/main/fonts/rec_m....

The issue doesn’t occur in web browsers, as far as I know, as they support proportional type (include mostly-mono families with a few proportional glyphs).

Maybe it helps to set the OVERLAP_* flags as described in the glyf table spec?

The font is under the OFL license, and you can definitely host it on your own server, no connection to Google required.

Can you perhaps say more about what you dislike about the lowercase “m”? It has to be extremely condensed to fit into a fixed-width space, just the same as any other monospaced font for code.

Thanks for checking out the font. As the main maker of it, I would love for it to include Cyrillic & Greek characters (and Arabic & Thai & more...), but this font’s variable axes mean that it is veeery slow to draw additional characters for (they have to be drawn in 12 or 24 different styles for things to work). But:

1. If someone wants to contribute the work in a PR, or the funding for work, I would be happy to extend the character set.

2. The font sticks to the most common width for monospaced fonts, so many fonts that do include Cyrillic & Greek glyphs will work elegantly as fallbacks. I recommend IBM Plex Mono, for one free + open-source option that is particularly good. Or, of course, you could just use Plex for everything, and you wouldn’t be wrong.