Roboto but Make It Flex(material.io)
material.io
Roboto but Make It Flex
https://material.io/blog/roboto-flex
89 comments
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
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
https://en.m.wikipedia.org/wiki/Metafont
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.
I think Noto: https://fonts.google.com/noto
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.
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.
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.
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...
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...
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
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
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.
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.
Thanks for mentioning this. I was confused by the seeming irrelevancy of all the sliders. Trying it on Chromium was illuminating.
Hmm, I'm seeing the same thing.
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/
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
https://glyphsapp.com/learn/creating-a-variable-font
[deleted]
All designed by hand.
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).
Top two thirds on smaller screened devices!
And to use thin gray borderline unreadable font in the article itself
Not to mention that the page doesn't works without JS enabled
I also noticed that disabling HTML rendering breaks a lot of websites.
it's an Angular site, so no that surprising, but still, it'd be great if they used server side rendering
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.
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.
For me it's covering half my screen!
On landscape mode it’s just the whole screen heh
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.
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.)
So probably the actual font is mighty fine...
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.)
So probably the actual font is mighty fine...
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.
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.
On my phone I can see "Roboto... but".
The rest of the page is top banner, top nav and cookie-ok text. It is quite strange choice.
100% agree, and it’s ironic given that the blog is for/about design …
Don't forget the cookie consent banner
I literally just threw my phone across the room because of this.
Overreacting? Maybe.
Satisfying? Also maybe.
Overreacting? Maybe.
Satisfying? Also maybe.
[deleted]
It is great to see more variable fonts landing. They really feel like the next evolution of typography.
The much beloved Inter comes to mind as well, which also has a variable version and is IMHO a little more elegant : https://rsms.me/inter/
The much beloved Inter comes to mind as well, which also has a variable version and is IMHO a little more elegant : https://rsms.me/inter/
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.
>Moreover, there’s only a subtle difference in curvature between a zero and English letter O
I disagree, "zero" being an oval while "capital o" being a circle is a big difference. I don't undestand how can people not see it...
I disagree, "zero" being an oval while "capital o" being a circle is a big difference. I don't undestand how can people not see it...
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.
[0] https://github.com/rsms/inter/issues/89
[1] https://github.com/rsms/inter/issues/1
[0] https://github.com/rsms/inter/issues/89
[1] https://github.com/rsms/inter/issues/1
I should have added “free” and “variable”. Of course there are better fonts with respect to various details or simply taste.
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.
Perhaps you might even say... robotic?
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 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.
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.
This doesn't match what I've seen
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.
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.
you nailed it, its the material UI that plays a big role. It feels like the new old.
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.
Same with architecture. This is the minimalist dream: never ever allow a single decorative element to exist.
> 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...
Uhh why? Thanks, but no thanks
Uhh why? Thanks, but no thanks
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?
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.
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.
[deleted]
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.”
[0] https://www.w3.org/TR/IFT/
[0] https://www.w3.org/TR/IFT/
Here is an image from the article: https://lh3.googleusercontent.com/fBNygQoshN-VrK1f_Dxwy5bjTk...
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.
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).
Yes that is right, I was commenting on the particular choice in the article.
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?
If you can pay, Helvetica is considered the gold standard.
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.
True. I take it back.
Noto Sans, Inter and San Francisco are the top class of modern display fonts.
These are great choices. I was going to mention Inter and San Francisco.
Whenever I stumble upon a website with great body text, it often happens to be using one of these two typefaces.
Whenever I stumble upon a website with great body text, it often happens to be using one of these two typefaces.
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.
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.
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.
Here's the github repo for the font: https://github.com/googlefonts/roboto-flex
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.
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.
I don't think I'll ever be able to understand what makes so many people care so much about fonts. Maybe I have font-blindness or something?
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.
It's both completely ubiquitous and invisible.
It's both completely ubiquitous and invisible.
This is so cool!
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.
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.
Here's a tool to play with all the options. SO. MANY. SLIDERS! https://v-fonts.com/fonts/roboto-flex
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...