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.
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.
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.
> 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.
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: 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
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)
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] :
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:
It's so jarring to read an article about the excrutiating effort put into design minutiae, and then see this garrish undismissable dialog cover the top third of the screen every time you scroll up (at least on mobile).
Every time with Google. Amazing announcement (look how well put together this material design thing is!!!!) and then it crashes and burns when you actually want to use it.
There seems to be a gigantic disconnect between well-intentioned design people and those who actually have to implement it and are incentivized to not care about the resulting quality (close the ticket, take the new one, go, go, go!!!).
Apple is the only big company I can think of that avoids this mostly successfully.
I wouldn't be surprised to find out that Roboto Flex is actually entirely unusable in practice.
Google is a tools company. Their tool-like offerings are all (used to be) great. Search, GMail, Maps, Android.
But their products are simply bad, because while they realized that they can't really offer the same generality (customizability, flexibility) as tool usually offer in concrete products (eg GCP, GMail Workspaces, AdWords, Play store), they failed at product-market fit. (Yes, I know the numbers say that everyone and their dog uses Android/Play, and Ads, but neither is exactly a healthy market. For example when it comes to cloud infrastructure GCP is struggling ... because Google simply doesn't understand that overarching branding is made and unmade exactly through these fucking "small" things, like a bad call to action dynamic visual component.)
Infuriating. Particularly as the contents of the article encourage you to refer back to the images to notice the things they are talking about.
These hidden hover popups should never impose themselves more than the amount you scroll back. They are much less annoying when they stalk you just above the scroll line and sit still.
My dream is to have a single nice variable font available pre-installed across all major desktop and mobile platforms that I can use without downloading custom fonts and suffering through additional font loading latency or layout shift.
In the mean time, I'm using the system font stack popularized by Bootstrap's reboot.css reset. It works great for eliminating font loading latency and layout shift, but AFAIK none of the fonts in there are variable, and they all render slightly differently in terms of font weight specified vs actual visual weight, which has been making life difficult.
This is a step in the right direction though, at least soon we'll have a variable font for one mobile platform in the system font stack, though I'm unsure yet how to take advantage of this since I'm not sure if there's a way to determine if the font we end up loading in the stack is actually variable.
Agreed. I love font and typography, but the sheer size of fonts can make it hard to justify while caring about serving content to people with low bandwidth.
The design of the header (slides down if you scroll up) combined with the banner above it makes for a terrible UX on a phone. It takes up so much space that you can barely read the article. The dropdown on scroll behavior is also so sensitive that it makes it really hard to stop it and read.
Agreed. It's absolutely awful. Even a slight scroll up makes it show up again which is horribly inconvenient when you're trying to go back and forth between the graphics and the text describing them.
IMHO there are better fonts for easy legibility. Inter’s uppercase I (eye) looks exactly same as lowercase l (el). Moreover, there’s only a subtle difference in curvature between a zero and English letter O. Ideally every single letter and number irrespective of case should look unique.
To be fair, the serifed "I" is included as an alternate[0], along with a stylistic set for other disambiguations[1] including 0/O. This requires OpenType support and some user intervention, but if you're typesetting something it's not impossible.
I don't know but I always found Google's font choice, airy cold, disconnected and vapid. Not sure why I get that response but something just feels incredibly stale and impersonal.
It’s not just the font choice for me but the entirety of Material UI. Something about it seems void.
I don’t mean that to seem unkind or critical of the people behind the design; they’re clearly very talented and far more than I am where design is concerned. It isn’t meant to be disparaging. People clearly like it, but for me personally it has always felt like it lacks any kind of soul or energy.
I think this is the point. Material is the perfect "default" UI. It's boring, unoffensive, consistent, easy to use/implement, compatible with both mobile & desktop use-patterns, and low enough complexity that it should be able to run everywhere.
Material UI is the safe choice that you can pick up and implement while assuming users will be able to figure it out and won't really have ground to complain too much about it. Material is becoming the universal "good-enough" UI and work like that being discussed in this post are efforts to fill in those last few gaps where you have to break out of the standard Material UI model because your use case isn't covered.
MD1 told designers to embrace unconventional, bright, saturated colors and contrasting pairings. They even had a blog article reassuring that, yes, your brand can survive the material redesign.
MD2 embraced brand specific designs with custom fonts, button shapes and, again, waay too many colors. There where "Material Studies" [1], in which they show how a brand could adopt the design system. For the Google flavor of MD2 they threw away all of that and went with white.
MD3 shifts again, to pastel colors and user customization. It corrects many mistakes, but I believe third party apps won't like having to account for all the possible background colors.
To me, the first two versions are a failure [2]. They were amazing to read, but the real world turned out different.
Compare this to the Human Interface Guidelines which have stayed far more stable and neutral.
[1]: https://material.io/design/introduction#theming
[2]: In the sense that what they set out to achieve led to completely different results in the real world. I'm not saying that all Android design since Lollipop is terrible.
Most UI design templates feel void to me by default. I take it that's intentional, such that people making apps using them can add personality without going into conflict with the core design.
I work in UX and I always wonder what the 'end goal' is to these UI systems... in a perfect world where every 1st and 3rd party developer on a platform builds with the same UI system, won't we eventually have every app looking nearly indistinguishable from one another? Is that really what folks want? Where is the creativity? People laughed off Apple's attempts at skeumorphism, but I predict in a few years people will be craving unique looking apps.
> Font Bureau’s house standards for quality show up in a few subtle updates to Roboto’s neo-grotesque sans design, including switching the default numeral style from tabular lining to proportional...
I think most proportional fonts work this way by default? At any rate, enabling tabular figures is a step I expect to need to take when I want rows of numbers to align when using an otherwise proportional font.
I'm with you there. I've never wanted numerals to be random widths. They should be tabular by default. If you really want them to be random you can set the option to make them so.
This is awesome and opens up a lot of doors for creative expression!
But it's 1.7 MB
Is there no way to reduce that?
It would be great if you could "compile" a pre-defined combinations of Axes values to only bundle what's needed for a design. I suppose flattening to SVG could help provided the text had captions for screen readers?
Google Fonts compiles specific given sizes and weights into a simpler and smaller file, I think.
It would maybe be harder to give values to some variables while keeping others, but I don't think it should be and anyway just instantiating all variables solves most use cases. It's like SVGs except smaller (binary format) and in a format that text rendering systems know how to work with.
Oh wow- the thread shares a new spec that does exactly this. Incremental Font Transfer[0] which “…allows clients to load only the portions of the font they actually need which speeds up font loads and reduces data transfer needed to load the fonts.”
Left is old, right is the new design. Yes, it maybe looks "cleaner", but now it is virtually impossible to distinguish the different levels of headings.
> Left: The original Material Design type ramp using Roboto. Right: The same ramp made simple and smoother with Roboto Flex’s regular weight with automatic optical size variations.
From what I know of typography, you want the different levels to be much more different than that.
The typeface itself doesn't dictate how you style the different heading levels in your document/stylesheet. Particularly with such a parametrized font like this one, there are many opportunities to creatively differentiate the treatments (and the smoother ramp makes that easier to do).
The ramp isn't meant to be different weights. The left is the original Material Design 1 ramp that uses tracking and static font weight tweaks to try to approximate an even color. The right is an actual even color.
As a programmer I have strong opinions about my monospace font, but if I want to make a UI or display very readable sans text what’s the best option? Roboto Flex? Inter?
I had thought of mentioning San Francisco. I didn’t because it’s an Apple-only choice but your comment makes me appreciate it more. Noto looks great. It seems like with these configurable fonts you can use the same face for body text and have it still look good in headings at a different weight.
For some reason the lack of distinction between open an close quote marks in Noto Sans really bothers me, they look almost identical unless you look real close. It is a fine font face but I have a hard time appreciating it because I can’t look past this—in my opinion ugly—design choice.
DejaVu Sans is also fine, so is Fira Sans, or Railway if you want to add some style in addition to readability.
Honestly if you don’t care about style your system’s sans serifs is probably fine (or DejaVu if it isn’t). And if you care about style go with a font that matches your design.
Helvetica is a fantastic print font, as display font.. not so much. It starts becoming decent at high DPI and mid+ sizes, which disqualifies it from being a good all-arounder display font. Something designers tend to forget. A display font needs to be readable on many devices and screen conditions.
I always find it interesting to track the updates for google fonts on their repos (when possible), since you can see fixed bugs and also sometimes find people who've forked it to add features.
Oh my god that header design is such a obnoxious one. I feel like being solicitated physically and constantly. I have nothing bad for material design/roboto family but now I hate it.
It's the nexus of visual culture, history, politics, linguistics, technology, business... as a visual artist, type has a purity of form that has a Zen quality.
Now if something similar was available for a monospace font that Emacs and Visual Studio Code could use, I'd be very happy. I like using a condensed-width monospace font for explorer side panels like Treemacs. I currently use "M+ 1m" in Emacs.
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...