Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

fonts.google.com

Post reply on HN
Print view View original

11–20 of 113 posts

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

#11

Post by airstrike »

chrisdalke wrote: post #10

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 variab…

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

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

#12

Post by chrisdalke »

airstrike wrote: post #11
chrisdalke wrote: post #10

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 variab…

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

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

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

#13

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

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

#14

Post by phaedryx »

ape4 wrote: post #7
phaedryx wrote: post #3

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)

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

yes!

Il|i! and DO0Q

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

#16

Post by crazygringo »

airstrike wrote: post #11
chrisdalke wrote: post #10

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 variab…

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

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

#17

Post by Klathmon »

chrisdalke wrote: post #12
airstrike wrote: post #11

Earlier quoted context omitted.

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

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

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.

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

#18

Post by seanwilson »

Klathmon wrote: post #17
chrisdalke wrote: post #12

Earlier quoted context omitted.

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

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?

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

#19

Post by enhdless »

thundernixon wrote: post #2

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

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?

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

#20

Post by rememberlenny »

seanwilson wrote: post #18
Klathmon wrote: post #17

Earlier quoted context omitted.

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.

Post reply on HN