
Recursive, a free variable font for code and UI, now on Google Fonts - thundernixon
https://fonts.google.com/specimen/Recursive
======
chrisdalke
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
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. :)

~~~
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/](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...

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

[https://www.jetbrains.com/lp/mono/](https://www.jetbrains.com/lp/mono/)

~~~
jerrygoyal
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)

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

------
vz8
Die-hard fan of Iosevka[0], a narrow monospace font family (regular and term)
and nerd-font patched varieties [1].

Just love how they display in emacs gui on a 4k display.

[0] [https://typeof.net/Iosevka/](https://typeof.net/Iosevka/) [1]
[https://github.com/ryanoasis/nerd-
fonts/tree/master/patched-...](https://github.com/ryanoasis/nerd-
fonts/tree/master/patched-fonts/Iosevka)

~~~
aasci
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.

------
thundernixon
You can also learn more about Recursive & configure advanced Google Fonts API
calls on the Recursive minisite:
[https://www.recursive.design/](https://www.recursive.design/)

~~~
enhdless
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?

------
phaedryx
There are several things I look for in a "code" font: distinct 0 vs O,
distinct l vs 1, readability, etc.

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

~~~
phaedryx
yes!

Il|i! and DO0Q

------
unicornporn
I really must recommend Inter[1]. It's also open-source and available as
variable.

[1] [https://rsms.me/inter/](https://rsms.me/inter/)

~~~
flixic
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.

------
sipjca
This is by far the coolest font I’ve seen. Having this level of
customizability in one font seems like a fantastic idea

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

~~~
zimpenfish
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.

~~~
thundernixon
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...](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).

~~~
zimpenfish
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`.

------
anotherfounder
This is so great! Has anyone put out a good variable Serif font that is taking
advantage of all the variables?

~~~
thundernixon
This is one really good serif variable font:

[http://www.gt-alpina.com/](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.

------
usr1106
Some background [https://eyeondesign.aiga.org/a-brushstroke-variable-font-
tak...](https://eyeondesign.aiga.org/a-brushstroke-variable-font-taken-to-its-
extreme/)

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

Sadly, the version on
[https://www.recursive.design/](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
No Cyrillic support :/

------
pgtan
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!

------
Mizza
The capital 'A' renders very strangely for me. Firefox, OSX.

[https://i.imgur.com/DmxoWeM.png](https://i.imgur.com/DmxoWeM.png)

~~~
thundernixon
Strange, usually if a font is rendered with that issue, it would be in several
other letters, as well.

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](https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)

What is your OS & browser version?

------
Wowfunhappy
...Am I the only one who, for some fonts, has issues with the overlapping
section of the "A" character in Firefox?

[https://i.ibb.co/8sbMvL3/Screen-
Shot-2020-07-23-at-6-49-52-P...](https://i.ibb.co/8sbMvL3/Screen-
Shot-2020-07-23-at-6-49-52-PM.png)

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
Nope, you are not the only one! That is an issue of the font renderer using an
“even-odd rule” in vector rendering.

[https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule](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.

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

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

------
perardi
Wow. That is cool.

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

------
coronadisaster
Can you download the font to the server and avoid Google on each page load? Or
is it a copyright issue?

~~~
usr1106
Good question. I might guess it's as free as most things in surveillance
capitalism.

Well, even if it were legal to host it yourself, most won't do it, so Google
still cashs in on the surveillance side.

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

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

------
Pinus
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?

------
squid_demon
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?

~~~
thundernixon
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:

[https://www.recursive.design/](https://www.recursive.design/)

------
c3534l
It looks super unbalanced to me. Letters have different visual weights at
different parts for seemingly no reason at all.

------
kanobo
The designers did an amazing job. Setting --mono to 1.0 makes it look very
similar to Jetbrain's font which I like.

~~~
ChristianGeek
The lowercase “m”, for one, looks terrible though. It’s a cool demo but I’d
never use it.

~~~
thundernixon
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.

------
greg7mdp
Would be nice for a "code" font if the '+' character was displayed correctly.

~~~
thundernixon
Ha, yeah, that is a Google Fonts UI bug, and I’ve sent a message to folks over
there about it.

The font has math symbols that render well. :-)

Please check out the font and try the preview/tester at:

[https://www.recursive.design/](https://www.recursive.design/)

------
m0zg
Only latin glyphs. Пиздец.

~~~
zvr
ακριβώς!

~~~
thundernixon
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.

------
Igelau
m and @ really suffer as you crank up MONO. I like how the 0 gets a line as
soon as MONO ≥ .50

Not a fan of those inktraps at heavier weights. If it's for UI and code, why
does it need inktraps?

~~~
thundernixon
Small type can lose definition on screen just as much as in print, so
“inktraps” are really just there to help make things more crisp in text.

Of course, they are there just as much for aesthetics if the type is used at
large sizes.

------
amai
Supports over 200 languages but not Greek and Russian.

------
jordache
why is this a big deal? can someone provide insight?

~~~
kanobo
Try out the sliders on
[https://www.recursive.design](https://www.recursive.design)

------
mrich
Some of the variants look a bit like Comic Sans.

~~~
thundernixon
A beloved classic. Thanks for trying it out, and thanks for the kind words!

