Recursive Mono and Sans, a free variable type family | Hacker News Reader

Recursive Mono and Sans, a free variable type family

recursive.design

248 pointsandrewshadura61 comments

"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 Italic axes. You can therefore use Recursive to create animated font transitions without breaking the layout of UI elements like menus and buttons."

This is a useful feature - is it common in other fonts?

I certainly have run into problems in HTML with bold text causing button widths to change.

I've seen that in other contexts as well. Like slide presentations reflowing paragraph text when a word gets bolded. It's definitely a useful feature to be able to guarantee that never happens.

A width change that causes reflow is the worst - especially if it happens on mouseover because at specific window widths a button can "run away" from the pointer, or get into a bistable flickering reflow.

On Linotype machines, roman and italic versions of a character share a matrix and must have the same width.

This is a rare design feature called "duplexing": https://en.wikipedia.org/wiki/Duplex just says "Duplexing in typography, where two different styles of font (e.g. regular and bold) have the same width". The font "Bahnschrift" released with Windows 10 has that for its weight axis.

Edit: rare outside monospaced fonts.

Hard to discriminate between captial letter "O" and number "0". Not that good for actual coding IMO.

P.S.: This world really does NOT need any more look-good-only-under-Chrome websites.

If you use the "mono" slider, it adds the angled line inside zero for differentiation while monospacing the characters. Presumably, you'd want monospace characters for programming, so I think that's fair.

Your criticism is true for non-monospacing, though I think any fonts suffer from that.

There are people out there who code in variable spaced fonts. Not sure how they can myself but some report feeling more productive that way, and for them this could be more of a consideration.

I just started doing this last week! Using Iosevka Aile.

There are lots of proportional fonts that have easily distinguished 0 vs. O (usually, zero is thinner, though often some of the distinctions used in monospaced fonts are also used in addition to shape differentiation.)

> P.S.: This world really does NOT need any more look-good-only-under-Chrome websites.

FF user here, haven't tried Chrome so I guess I dunno what I'm missing. Site looks nice afaict. What's the issue?

A lot of the text animation on that site does not seem to work in Firefox.

The three-D cube of letters on top is supposed to be in a range of weights and styles. On Firefox they are all the same. You can still drag the cube around with the mouse but the characters don't change as they do in Chrome.

The font selection drop downs change the font in many of the features on the page, but this doesn't work on Firefox either. I'm trying it the latest developer version.

There are a lot of sliders and pointer-dragging features that immediately change the text characteristics but none of this cool stuff works on Firefox. At the bottom it says "Made by friends of Google Fonts", maybe that's an indication of their browser alignment.

The page actually works perfectly here in Firefox (v70 and v68esr through Tor, on a retina Mac).

The animation is actually smoother in v68, which is surprising given that IIRC v70 is supposed to make better use of hardware acceleration.

The drop down works fine too.

Everything you mentioned works for me in Firefox 70.0.1 (regular release, not developer version).

I'm on Firefox on Android 9. The cube and all font weights and styles rendered as expected.

Kudos to the FF team!

Try playing with the $ tool

> P.S.: This world really does NOT need any more look-good-only-under-Chrome websites.

Incredibly, the site actually performs better for me in Safari and Firefox, than it does in Chrome. It's easier to drag the box at the top in the first two, but it's supremely laggy in Chrome.

When in monospace the 0 gets a line through it. I tried in in ff and the site worked perfectly.

It takes effort to figure out which languages/scripts are supported.

The FAQ says that over 200 languages are supported but what they actually mean is that the font covers the Unicode Basic Latin, Latin-1 Supplement and possibly some of the Latin Extended.

That is, the font does not support yet anything non-Latin.

I agree. A toy widget with a simple input and output of the font would've been preferable.

Did you notice the whole page is actually a rich text editor? You can type anything, anywhere, and tweak the style of every letter to your liking using the sticky menu at the top of the page.

The list is in the penultimate part of the main page. There are no anchor links, so here's the full list:

————

Abenaki, Afaan Oromo, Afar, Afrikaans, Albanian, Alsatian, Amis, Anuta, Aragonese, Aranese, Aromanian, Arrernte, Arvanitic (Latin), Asturian, Atayal, Aymara, Azerbaijani, Bashkir (Latin), Basque, Belarusian (Latin), Bemba, Bikol, Bislama, Bosnian, Breton, Cape Verdean Creole, Catalan, Cebuano, Chamorro, Chavacano, Chichewa, Chickasaw, Cimbrian, Cofán, Cornish, Corsican, Creek, Crimean Tatar (Latin), Croatian, Czech, Danish, Dawan, Delaware, Dholuo, Drehu, Dutch, English, Esperanto, Estonian, Faroese, Fijian, Filipino, Finnish, Folkspraak, French, Frisian, Friulian, Gagauz (Latin), Galician, Ganda, Genoese, German, Gikuyu, Gooniyandi, Greenlandic (Kalaallisut), Guadeloupean Creole, Gwich’in, Haitian Creole, Hän, Hawaiian, Hiligaynon, Hopi, Hotcąk (Latin), Hungarian, Icelandic, Ido, Igbo, Ilocano, Indonesian, Interglossa, Interlingua, Irish, Istro-Romanian, Italian, Jamaican, Javanese (Latin), Jèrriais, Kaingang, Kala Lagaw Ya, Kapampangan (Latin), Kaqchikel, Karakalpak (Latin), Karelian (Latin), Kashubian, Kikongo, Kinyarwanda, Kiribati, Kirundi, Klingon, Kurdish (Latin), Ladin, Latin, Latino sine Flexione, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgish, Maasai, Makhuwa, Malay, Maltese, Manx, Māori, Marquesan, Megleno-Romanian, Meriam Mir, Mirandese, Mohawk, Moldovan, Montagnais, Montenegrin, Murrinh-Patha, Nagamese Creole, Nahuatl, Ndebele, Neapolitan, Ngiyambaa, Niuean, Noongar, Norwegian, Novial, Occidental, Occitan, Old Icelandic, Old Norse, Onĕipŏt, Oshiwambo, Ossetian (Latin), Palauan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Q’eqchi’, Quechua, Rarotongan, Romanian, Romansh, Rotokas, Sami (Inari Sami), Sami (Lule Sami), Sami (Northern Sami), Sami (Southern Sami), Samoan, Sango, Saramaccan, Sardinian, Scottish Gaelic, Serbian (Latin), Seri, Seychellois Creole, Shawnee, Shona, Sicilian, Silesian, Slovak, Slovenian, Slovio (Latin), Somali, Sorbian (Lower Sorbian), Sorbian (Upper Sorbian), Sotho (Northern), Sotho (Southern), Spanish, Sranan, Sundanese (Latin), Swahili, Swazi, Swedish, Tagalog, Tahitian, Tetum, Tok Pisin, Tokelauan, Tongan, Tshiluba, Tsonga, Tswana, Tumbuka, Turkish, Turkmen (Latin), Tuvaluan, Tzotzil, Uzbek (Latin), Venetian, Vepsian, Vietnamese, Volapük, Võro, Wallisian, Walloon, Waray-Waray, Warlpiri, Wayuu, Welsh, Wik-Mungkan, Wiradjuri, Wolof, Xavante, Xhosa, Yapese, Yindjibarndi, Zapotec, Zarma, Zazaki, Zulu, Zuni

————

Support for non-English letters makes this more than a tech demo IMO, the whole thing is pretty impressive.

I have seen this list.

Let's search if "Greek" is supported. It is, because I can see "Creek"? Creek is not Greek, it is the language/script of an American Indian tribe. Then, the list is too long to find a specific language.

What should have happened, is to add in the document an extra paragraph that reads like this:

> This font currently supports the Latin-based Unicode character ranges. See below the full list of language support.

You read too fast. Above the list, you'll find this paragraph:

————

To meet the needs of global communication, Recursive supports a wide range of Latin-based languages, including Vietnamese. It also comes with an extended set of currencies, symbols, fractions, and arrows.

It does indeed say that.

I do not think this has been a last-minute addition. I read the paragraph again, and I found it difficult to quickly scan the text that is presented in that font. The letters appear to me (Linux/X11) as too thin and faint.

Does anyone else have this issue?

In case you had doubts, I'm not in any way affiliated with the font (though I find it pretty cool, and appreciate the amount of work that has gone into building it up to this point).

If you also don't know what "single-stroke casual signpainting"-style is, here are some links to help you:

Google image search: https://www.google.com/search?q=single-stroke+casual+signpai...

Nice Youtube video: https://youtu.be/y3WZNSGBsoc?t=35 [skip to 0:35]

Also check out @oliversigns on instagram or this youtube video if you're allergic to social media: https://www.youtube.com/watch?v=DOk4iEOmCL0

Soooo satisfying to watch

I'm a bit disappointed there's no x-height control I can decrease to get longer ascenders and shorter lowercase letters. It's a recurring annoyance I have with almost every font being released nowadays, I find their x-heights consistently too big and ascenders consistently too short for my tastes.

This looks like a very impressive evolution in font tech. Props!

Aside from the technical comments here, "warmly energetic" is an accurate and endearing description.

I really like the idea of variable type fonts, especially when they go beyond the simple weight or spacing. This allows for smooth transitions and innovative patterns in UIs.

If anyone knows more such interesting variable type fonts, please link to them.

I went through v-fonts.com and found few interesting applications of technology:

https://v-fonts.com/fonts/cheee-variable https://v-fonts.com/fonts/this-man-this-monster https://v-fonts.com/fonts/whoa https://v-fonts.com/fonts/kicker-variable https://v-fonts.com/fonts/graduate https://v-fonts.com/fonts/fs-pimlico-glow-vf

Most use it to modify weight, and sadly weight also affects the spacing between characters.

That might just be a great font for casual tech docs, like programming hands-on tutorials, where you want the typography to invite your readers to experimentation, rather than having the text look like set in stone. Unfortunately, it has a double-story "a", and the "fi" ligature spacing to the right looks off in the page's heading.

The cube was fun to play with on my iPad but it took me a while to figure out that there was more content below it and how to scroll down to see it (for those wondering: you can scroll on the little bottom part).

Oddly, the left and right curly braces seem to have different vertical alignments in the "sans" (proportional) variant with medium weight and "linear" style.

I should really have a Serif version as well. Not a huge fan of the "casual" look, but going in the opposite direction to a "stricter" Serif would be nice.

Nice font and all, but the page is unreadable after the demo showing a normal font wrapping, making the page jump, because… well… it makes the page jump around.

What browser/device are you reading this on?

I did not understand much of the copy, the animation was very slow, but I do like the font. Will test tomorrow how well it handles without sub pixel antialias.

I'm on Firefox 70.0.1 on Ubuntu 16.04, and the only thing I can change is the size, and the light/dark. Nothing else makes a difference. Shame.

I have Ubuntu 18.04, Firefox 70.0.1 and every switch/select-box/radio works fine - I can only complain on italics off|auto|on configuration, because it's a bit slow (it does not change immediately, ~2s). I'd try to look into Developer Console first to investigate if all JSes were loaded and they haven't returned any error.

Interesting! Android with Firefox Preview works fine for me.

In Firefox Developer 71.0b7, it works for me on Windows 10, but not Windows 7. So maybe it has something to do with the OS?

Yes, the underlying operating system needs to support the new OpenType spec 1.8 to support variable fonts in a browser.

Interesting concept.

I've gotten used to programming fonts with ligatures. But I'm not every use case. We live in an amazing era of abundance...

I like it but the x is a little unfortunately swastika-shaped at high casual and high slant.

...seriously?

Take a look for yourself.

Is this font supported by out of the box Mac or Windows fonts?

Great font for letters. IMHO, the numbers aren't so good.

Yeah I agree. They look a bit wobbly. But, powerline support out of the box is nice to see.

They look kind of having their weights upside down. Usually the upper side is smaller so for an example 8 looks really weird.

Just needs a condensed axis. Very cool.

This is so sick! [in a good way] I wish it supported ligatures.

It supports => for me. haven't tested any others

<= and => seem to produce two completely different types of ligatures, unfortunately. No cool ligatures for << and >>.

Edit, I see there is a proper greater than or equal to ligature, but it defaults to an arrow when => is typed. Not sure how to key the other.

There are some ligatures already: https://i.vgy.me/Hcg6gj.png (screenshot from fontforge)

This entire page is broken on Firefox 70.

It isn't on my system.

Not only do you need a current browser, you also need an operating system version that supports variable fonts.

For example, even if you have Firefox 70 on a Mac, the operating system version needs to be High Sierra (macOS 10.13) or newer.

Reply on news.ycombinator.com