Roboto but Make It Flex
material.io
material.io
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...
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.
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
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.
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.
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...
Also here's a good font tracking resource where I hope to see these features one day [1] :
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.
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.
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.
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...
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.
Overreacting? Maybe.
Satisfying? Also maybe.
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/
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 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.
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.
Uhh why? Thanks, but no thanks
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?
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.
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.
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.
Whenever I stumble upon a website with great body text, it often happens to be using one of these two typefaces.
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.
It's both completely ubiquitous and invisible.
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.