11 ms·
Roboto but Make It Flex
- hysan 4y agoThe 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.
- kayson 4y agoAgreed. 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.
- zaps 4y agoI literally just threw my phone across the room because of this. Overreacting? Maybe. Satisfying? Also maybe.
- packetslave 4y agoNo, you didn’t.
- zaps 4y agoYou can’t teach rage
- barbarbar 4y agoOn 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.
- deleted 4y ago[deleted]
- asimilator 4y ago100% agree, and it’s ironic given that the blog is for/about design …
- mderazon 4y agoDon't forget the cookie consent banner
- airstrike 4y ago> 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
- readbeard 4y agoI 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.
- zestyping 4y agoI'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.
- jonpalmisc 4y agoIf 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#type-tester https://fonts.google.com/specimen/Roboto+Flex?query=roboto#t...
- melony 4y agoAre they generating these parametrically with linear algebra transforms or are they all designed by hand?
- deleted 4y ago[deleted]
- jonpalmisc 4y agoIn 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
- davelab6 4y agoAll designed by hand.
- fooey 4y agoSince 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 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 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.
- tomatowurst 4y agoI 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.
- inopinatus 4y agoPerhaps you might even say... robotic?
- steve_adams_86 4y agoIt’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.
- laserbeam 4y agoMost 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.
- wildrhythms 4y agoI 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.
- pfortuny 4y agoSame with architecture. This is the minimalist dream: never ever allow a single decorative element to exist.
- kbd 4y agoAs 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?
- SonOfLilit 4y agoIf you can pay, Helvetica is considered the gold standard.
- sph 4y agoHelvetica 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.
- SonOfLilit 4y agoTrue. I take it back.
- sph 4y agoNoto Sans, Inter and San Francisco are the top class of modern display fonts.
- runarberg 4y agoDejaVu 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.
- kbd 4y agoI 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.
- FractalHQ 4y agoThis 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?
- SonOfLilit 4y agoGoogle 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.
- deleted 4y ago[deleted]
- davelab6 4y agoSee thread @ https://twitter.com/googlefonts/status/1522778639305101312?t=qkUk48YBvoNw9SCzecrMBw&s=19 https://twitter.com/googlefonts/status/1522778639305101312?t...
- FractalHQ 4y agoOh 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/ https://www.w3.org/TR/IFT/
- halotrope 4y agoIt 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/ https://rsms.me/inter/
- akagr 4y agoIMHO 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.
- halotrope 4y agoI should have added “free” and “variable”. Of course there are better fonts with respect to various details or simply taste.
- rs_rs_rs_rs_rs 4y ago>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...
- mikedc 4y agoTo 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 https://github.com/rsms/inter/issues/89 [1] https://github.com/rsms/inter/issues/1 https://github.com/rsms/inter/issues/1
- petters 4y agoHere is an image from the article: https://lh3.googleusercontent.com/fBNygQoshN-VrK1f_Dxwy5bjTkaAgcFk6pcUts-9_R5Uhh3nmnrxVUX2JgOKKQ0ATgx8rIi6ggxiMBsCPiwZlrbPL6Nt9-gNuJ2jmz5_KU6VlH-MQg=w1064-v0 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.
- BHSPitMonkey 4y agoThe 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).
- petters 4y agoYes that is right, I was commenting on the particular choice in the article.
- davelab6 4y agoThe 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.
- colordrops 4y agoIt'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).
- testingwaters4 4y agoFor me it's covering half my screen!
- ddoice 4y agoNot to mention that the page doesn't works without JS enabled
- pas 4y agoit's an Angular site, so no that surprising, but still, it'd be great if they used server side rendering
- speedgoose 4y agoI also noticed that disabling HTML rendering breaks a lot of websites.
- cpcallen 4y agoTop two thirds on smaller screened devices!
- dmitriid 4y agoAnd to use thin gray borderline unreadable font in the article itself
- ChrisKnott 4y agoInfuriating. 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.
- matthberg 4y agoHere's the github repo for the font: https://github.com/googlefonts/roboto-flex 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.
- bloopernova 4y agoThis 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.
- eins1234 4y agoMy 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.
- valtism 4y agoAgreed. 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.
- fleaaa 4y agoOh 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.
- creativeembassy 4y agoHere's a tool to play with all the options. SO. MANY. SLIDERS! https://v-fonts.com/fonts/roboto-flex https://v-fonts.com/fonts/roboto-flex
- JohnBerea 4y agoWhy is google serving it as a ttf? Is woff2 no longer the best format?
- davelab6 4y agoThe Google Fonts API serves different formats based on user agent. Woff2 is still the best, until Incremental Font Transfer arrives
- foreigner 4y agoI 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?
- davelab6 4y agoIt'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.