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
> 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.
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).
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.
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.
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)
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
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.
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:
chrisdalke|5 years 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.
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|5 years ago
nyanpasu64|5 years ago
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.
lambda|5 years ago
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).
mortenjorck|5 years ago
thundernixon|5 years ago
whalesalad|5 years ago
estevao2c|5 years ago
thewarpaint|5 years ago
khaledh|5 years ago
https://www.jetbrains.com/lp/mono/
jerrygoyal|5 years ago
greenmana|5 years ago
edwintorok|5 years ago
Wish the 'Recursive' font had a 'Slab-Serif' slider too, would've been interesting to compare.
ptato|5 years ago
hmhrex|5 years ago
axilmar|5 years ago
minerjoe|5 years ago
vz8|5 years ago
Just love how they display in emacs gui on a 4k display.
[0] https://typeof.net/Iosevka/ [1] https://github.com/ryanoasis/nerd-fonts/tree/master/patched-...
aasci|5 years ago
FireBeyond|5 years ago
axilmar|5 years ago
cjbprime|5 years ago
unknown|5 years ago
[deleted]
thundernixon|5 years ago
enhdless|5 years ago
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?
phaedryx|5 years ago
I don't think I'd use this for code, but I might for UI.
Edit: it seems that the variations are more code-oriented when you shift the code more "MONO" (based on experimentation on its website)
ape4|5 years ago
dylan604|5 years ago
brettermeier|5 years ago
unicornporn|5 years ago
[1] https://rsms.me/inter/
flixic|5 years ago
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.
sipjca|5 years ago
anotherfounder|5 years ago
thundernixon|5 years ago
http://www.gt-alpina.com/
Different variable fonts use different variable “axes” – choosing what parameters can/should be variable is just another design decision in making a font.
kalyantm|5 years ago
zimpenfish|5 years ago
usr1106|5 years ago
jameshart|5 years ago
Sadly, the version on https://www.recursive.design/ seems to include the symbol.
(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)
Shorel|5 years ago
pgtan|5 years ago
Mizza|5 years ago
https://i.imgur.com/DmxoWeM.png
thundernixon|5 years ago
That is often from the font renderer using an “even-odd rule” in vector rendering.
https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule
What is your OS & browser version?
Wowfunhappy|5 years ago
https://i.ibb.co/8sbMvL3/Screen-Shot-2020-07-23-at-6-49-52-P...
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!
thundernixon|5 years ago
https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule
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.
sings|5 years ago
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.
perardi|5 years ago
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.
thundernixon|5 years ago
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.
coronadisaster|5 years ago
detaro|5 years ago
usr1106|5 years ago
Well, even if it were legal to host it yourself, most won't do it, so Google still cashs in on the surveillance side.
alexeiz|5 years ago
Pinus|5 years ago
squid_demon|5 years ago
thundernixon|5 years ago
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:
https://www.recursive.design/
c3534l|5 years ago
kanobo|5 years ago
ChristianGeek|5 years ago
greg7mdp|5 years ago
thundernixon|5 years ago
The font has math symbols that render well. :-)
Please check out the font and try the preview/tester at:
https://www.recursive.design/
m0zg|5 years ago
zvr|5 years ago
Igelau|5 years ago
Not a fan of those inktraps at heavier weights. If it's for UI and code, why does it need inktraps?
thundernixon|5 years ago
Of course, they are there just as much for aesthetics if the type is used at large sizes.
amai|5 years ago
jordache|5 years ago
kanobo|5 years ago
mrich|5 years ago
thundernixon|5 years ago