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!
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
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. :)
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.
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...
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%.
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.
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.
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?
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.
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.
> 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.
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.
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).
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?
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.
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.
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.
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.
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!
I know this font is about versatility, but when it comes to a coding font I have yet to find something that beats JetBrains Mono (and I've tried many coding fonts).
On windows, I tried dozens of trending fonts like fira code, new ms font, jetbrains etc but nothing looks more natural to read than Consolas (and also Roboto mono)
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.
hell yeah, same here. when i heard first of iosevka, i didn't like it at all, and it wasn't til a few months and the every-so-often shoutouts later that i understood. it is the best programming font i've ever used.
I really enjoyed reading about your design process! I'm also a big fan of sign-painting aesthetics.
Can you elaborate more on the technical side? Once you have your designs and sketches, how do you go about digitizing those and creating the actual font?
In fact instead of "The quick brown fox jumps over the lazy dog" there should be a standard sentence for code fonts using those characters. Zero[0] = Oh[0]; One[1] = El[l]; or something ;)
Came to say the same thing. I placed an uppercase letter 'O' next to a zero in the preview text. They are very similar looking. I much prefer fonts with a dot or slash in the zero. If they go ahead and place a bar across the number seven and letter 'Z', I'm a bigger fan
Also, 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).
Inter is almost as good as Apple's SF, and with a much more permissive license. It's my default when designing apps for the web.
I used to default to "system font stack", but that was always because SF is such a great font. Defaulting to Ubuntu font on Ubuntu is... unfortunate. Luckily, Inter is fantastic, and it can be fantastic on every OS.
Different variable fonts use different variable “axes” – choosing what parameters can/should be variable is just another design decision in making a font.
Any comments from someone using this font as a daily driver?
I cant seem to move on from Source Code Pro (not that i'm looking to, just tried a couple and found myself clinging to Source Code Pro at the end of the day)
This looks nice (similar to what I thought about JetBrains Mono)
I tried the mono version but a double forward slash glitches and overlays the next two characters - which kinda makes it unusable for anyone touching the web.
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).
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).
macOS Terminal with any of Rec Mono Duotone, Rec Mono Casual, Rec Mono Linear, and Rec Mono SemiCasual installed from `~/git/recursive/fonts/Recursive-Beta_1.053/Recursive_Code`.
The google page seems not to support the '+' glyph, which at first seemed like a bit of a failing in a programming font - but then I remembered how many bugs string concatenation was responsible for and I realized they might be onto something.
(spoiler: it's nothing to do with the font - it looks like it's actually a URL encoding glitch with the way the page manages the preview text - it can't round-trip a + symbol correctly)
Since I have to do lots of TeX editing in emacs, every "coding" font disqualifies, if it doesn't have at least polytonic greek and cyrillic glyphs. So, misc-fixed forever!
Recursive isn't the only font where this happens, but I did notice it for Recursive. I've also observed this on more than one computer, so it's not just my machine!
What is your OS & OS version? This has generally gotten better over the past couple of years.
You can also use the static fonts, however, which don’t have vector overlaps, and Will therefore avoid this issue. In fact, it you were working on print design, it would probably still be better to use static fonts at this point.
> The characters within both subfamilies, Sans & Mono, maintain the exact same width across all font styles, independently of the values set on the Weight, Casual, Slant, and Cursive axes.
It’s very impressive that they have managed to duplex the styles across all four dimensions. This is very difficult to do across a wide range of weights while keeping the whole family cohesive.
If you have a big negative slant, and auto cursive enabled, you get much more of a humanist sans-serif, versus a neo-grotesque without those parameters. That's a huge amount of character to build into one single font.
And the absolute max size for the font is 281kb, and a more pared down version is about 100kb. Yes, I know, you'll protest, page bloat! But if I wanted to use a non-variable font, each individual font would be around 20kb, so if I needed a pretty typical stack of 300-400-600 font weights, with matching italics, I'm looking at 120kb, with individual requests for each weight.
Thanks, it has been a fun project to work on, and you are correct about variable fonts offering more range in fewer bytes!
Another thing worth considering in a “page bloat” debate is that while a very extensive variable font is maybe 300 kb, that size is fairly average for a JPEG, but you can do far more with a variable font.
Neither monospace variant looks good in a Linux terminal or a text editor. Linux is very peculiar about rendering fonts, and this font is likely designed for macos. I noticed that this font doesn't have powerline symbols which makes it even less usable in the terminal.
Does fontconfig support this? I know that you can set boolean flags for some fonts (like old-style vs. lining numbers) using the fontfeature property, but what about the "casl" axis, for example?
Why isn't the plus character, '+', valid? Shows up as one of those empty box thingies. Maybe it is just a limitation of the preview? Or does the font really not include a plus character?
Haha, well spotted. Yeah, it seems to maybe be an issue of how Google Fonts sends preview text to the URL, and the “+” conflicts with the general separator. I’ve sent a message to the folks over there, and hopefully they will put it in their backlog to fix.
The font definitely has the “+” symbol, along with many other math & currency glyphs (and many more).
Please check it out (and try the preview/tester) at:
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.
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!