News for hackers. Stuff that matters.
Re:Roboto but Make It Flex by jonpalmisc on Friday May 06, 2022 @10:27PM (#31291664)
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...

Re:Roboto but Make It Flex by neilpanchal on Saturday May 07, 2022 @03:38AM (#31292827)
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

Re:Roboto but Make It Flex by _fat_santa on Saturday May 07, 2022 @09:23AM (#31294251)
Would it be fair to say that Roboto (all typefaces) is the most complex/comprehensive typeface ever created?
Re:Roboto but Make It Flex by alanbernstein on Saturday May 07, 2022 @09:30AM (#31294291)
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

Re:Roboto but Make It Flex by bsimpson on Saturday May 07, 2022 @12:56PM (#31296333)
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.
Re:Roboto but Make It Flex by neilpanchal on Saturday May 07, 2022 @12:53PM (#31296306)
Re:Roboto but Make It Flex by fooey on Friday May 06, 2022 @10:49PM (#31291748)
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.

Re:Roboto but Make It Flex by Nullabillity on Saturday May 07, 2022 @07:26AM (#31293689)
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.

Re:Roboto but Make It Flex by wildrhythms on Saturday May 07, 2022 @07:53AM (#31293812)
Re:Roboto but Make It Flex by Nullabillity on Saturday May 07, 2022 @07:26PM (#31299632)
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.
Re:Roboto but Make It Flex by runarberg on Saturday May 07, 2022 @11:59AM (#31295666)
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...

Re:Roboto but Make It Flex by CharlesW on Friday May 06, 2022 @11:40PM (#31291971)
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

Re:Roboto but Make It Flex by fooey on Saturday May 07, 2022 @12:04AM (#31292075)
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

Re:Roboto but Make It Flex by tim-- on Saturday May 07, 2022 @06:13AM (#31293380)
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.

Re:Roboto but Make It Flex by runarberg on Saturday May 07, 2022 @01:37AM (#31292392)
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)
Re:Roboto but Make It Flex by davelab6 on Sunday May 08, 2022 @01:32PM (#31306150)
It's Windows Firefox only
Re:Roboto but Make It Flex by tux1968 on Saturday May 07, 2022 @05:12AM (#31293142)
Thanks for mentioning this. I was confused by the seeming irrelevancy of all the sliders. Trying it on Chromium was illuminating.
Re:Roboto but Make It Flex by beart on Friday May 06, 2022 @11:37PM (#31291958)
Hmm, I'm seeing the same thing.
Re:Roboto but Make It Flex by jimmySixDOF on Friday May 06, 2022 @11:28PM (#31291918)
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/

Re:Roboto but Make It Flex by melony on Friday May 06, 2022 @11:33PM (#31291942)
Are they generating these parametrically with linear algebra transforms or are they all designed by hand?
Re:Roboto but Make It Flex by jonpalmisc on Saturday May 07, 2022 @11:22AM (#31295251)
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

Re:Roboto but Make It Flex by davelab6 on Saturday May 07, 2022 @09:50PM (#31300482)
All designed by hand.