Hacker News Reader

Comment by jonpalmisc | Hacker News Reader

If you are unfamiliar with font technology/design, it is hard to emphasize just how much work must have went into producing this font. Take a look at all the different variable axes Roboto Flex supports [1]. I have never seen so many axes in a variable font.

I cannot imagine how much effort went into developing and testing this font; this is incredible work by Font Bureau.

[1] https://fonts.google.com/specimen/Roboto+Flex?query=roboto#t...

View on HN

I can totally attest. I worked on a typeface (Berkeley Mono [1]) for better half a decade. Have 1 variable axis (wght) and only 4 fixed cuts, approx 450 glyphs.

It’s one of those things that I can only continue to work on because of an internal drive and personal passion/enjoyment; otherwise it requires a lot of time and funding. Google and Apple can do that.

For those who haven’t delved into typography, changes that you make to a single glyph often has cascading and recursive effects to the entire 450 set of glyphs. Change the shoulder of ‘n’? Now, you must go and update similar glyphs for cohesiveness u, h, o, p, q, m, etc. Now the fitting is messed up. So change 100 more glyphs. Oh wait, the entire cut looks off. Should I proceed and move on, hope for optical satisfaction in future? Or is this the wrong hill to die on and undo everything? There is a lot of automation involved and wrote a ton of code, use components, plugins, etc. to automate as much as possible. The problem with typeface design is the toxic (or magical!) mix of subjectivity and objectivity. Some things just has to be optically evaluated and have to trust what your eyes lie.

Needless to say, Roboto is one of a kind project and insane amount of work. Variable axes require a tremendous amount of testing, often non-linear interpolation and endless adjustments.

[1] https://berkeleymono.com

Would it be fair to say that Roboto (all typefaces) is the most complex/comprehensive typeface ever created?

I'm not sure how, exactly, the term typeface is defined, but I think metafont has to be in the running for that title.

https://en.m.wikipedia.org/wiki/Metafont

I think Noto: https://fonts.google.com/noto

There are also fonts that exist just to show off variable fonts, like Amstelvar and Decovar. There's another crazy one that starts with an R: Recombinant or something.

Since the only thing that even renders in Firefox is Normal 400, something somewhere maybe could have used some more testing

https://i.imgur.com/dPrjDZZ.png

edit:

@googlefonts says they do not currently support Variable Fonts for Windows Firefox users

https://twitter.com/googlefonts/status/1522775267852181504

> Currently our API doesn't serve any VFs to Windows Firefox users due to a bug in windows DirectWrite mishandling the MVAR table. We are investigating what % of API Windows Firefox users now experience the bug, as it has been fixed in newer versions of Windows 10.

Hmm, I'm seeing the same thing.

Roboto Flex appears to work correctly in Firefox 100 on macOS.

caniuse reports that Firefox has supported variable fonts since 2018: https://caniuse.com/variable-fonts

EDIT: Firefox's variable fonts support depends on OS support, and so requires at least Windows 10 or macOS 10.13 on the desktop. Apparently, variable fonts support on Linux is "complicated". https://v-fonts.com/support

I'm on Windows 11 and only Normal 400 is working in Firefox 100 Stable, Firefox 101.0b3 Developer Edition, Tor 11.0.10 (FF 91.8.0esr), and Tor 11.0.11 (FF 91.9.0esr)

It does work in both Chrome and Edge, so I don't think it's a general OS issue

Chrome renders text differently to Firefox. Chrome uses Skia: https://www.chromium.org/developers/design-documents/graphic...

Firefox uses the Windows DirectWrite APIs. This means that Firefox leans into the support that Windows has for variable fonts, and that was dicey until a few releases ago.

I’m on Ubuntu 21.10 and I know firefox supports at least the weight, slant, condense and italic axis (although there is some weird interoperability issues between the three browsers on how the italic axis)

It's Windows Firefox only

Thanks for mentioning this. I was confused by the seeming irrelevancy of all the sliders. Trying it on Chromium was illuminating.

This seems to be an issue with the Google Fonts API, not Firefox itself.

For me (Firefox 100, Arch Linux) all the options work fine on https://v-fonts.com/fonts/roboto-flex (all of them have _some_ effect, have smooth transitions, and look roughly the same as in Chromium), but on https://fonts.google.com/specimen/Roboto+Flex?query=roboto#t... the only option that does anything is Weight, and that one only snaps into one of three broad categories.

It's a Windows Directwrite bug - https://twitter.com/googlefonts/status/1522775267852181504?s...

No, it's a GFonts bug that they're overly eager to work around a DW bug, even if the system doesn't even have DW installed.

I recently incorporated a variable font into a web app at $WORK (as in less then 6 months ago). And I remember seeing some issues like that Using google hosted variable fonts just didn’t seem to work in firefox. There was something about defining the range in the @font-face rule which google font omits (or does differently), or how variable fonts are consumed (font-weight vs font-variation-settings).

My conclusion was—if my memory is accurate—that there was no way we could use google hosted fonts (you should always self host your fonts anyway if you can) and you needed split files for italics (the italic axis simply doesn’t work consistently across browsers).

EDIT: Here is an article describing the current state of the italics axis in browsers: https://rwt.io/typography-tips/getting-bent-current-state-it...

Axes are what make variable fonts so interesting and I hope to see this include proper depth and outline slider effects and such that are useful in 3D use cases.

Also here's a good font tracking resource where I hope to see these features one day [1] :

[1] https://v-fonts.com/

Are they generating these parametrically with linear algebra transforms or are they all designed by hand?

In general, variable fonts work by defining multiple "masters" that can be interpolated between. While I'm not sure if Glyphs was used to create this font in particular, this page from Glyphs' documentation summarizes how the process works:

https://glyphsapp.com/learn/creating-a-variable-font

All designed by hand.

Reply on news.ycombinator.com