Google’s Latest Roboto Variant Is A Customizable Font At Its Core

As someone who really loves fonts, I know most people don’t share my passion — but I honestly think anyone who cares about typography will have some interest in what Google announced on Thursday. If you’ve ever used anything made by Google, you’ve seen Roboto. Now Google is introducing something called Roboto Flex. As the name suggests, this is a version of his famous font that you can modify and customize in many ways.

I can feel like I’m about to lose a lot of people, so let’s try this: here’s a gif showing all of Roboto Flex’s customizable settings. There’s no trickery going on – I’m not changing a raster image with Photoshop or anything. Everything you see is built into the font itself and can be changed as easily as the font size.



Of course, you can combine as many of these changes as you want.

Pretty cool, right? (If you just said “no” to your computer screen, you have my permission to leave now. It’s not going to get any more interesting for you.)

Basically what happens is that Roboto Flex is a “variable font”, which means you don’t have to manually upload separate files to change its weight, tilt or other variables. Flex goes beyond the basic changes, however; Google says there are 12 different ways to modify it, including changing its width, stroke thickness, and even the heights of the ascending and descending stems (as found on the letters ‘d’ and ‘p’ , respectively).

unknown 2

It’s the same font.
Picture: Google

These types of fonts have been around for a while – even Roboto Flex has been publicly in the works for about a year, but it’s cool to see that Google is making it readily available to anyone who wants to use it.

Roboto Flex also has a few other cool features that aren’t directly related to making it look cool. In their blog post, Google says they’ve put a lot of balancing into the font to make sure it looks right at specific sizes, so text will look appropriately bold or thin. , whether it takes up an entire page or is just a tiny footnote. Google’s announcement also touches on how the designers of the typeface (a studio called Font Bureau) made sure the fine details were correct. Apparently the circles used in the percent symbol are proportionally the same as the number 0. This is hardcore font nerdiness, and I love it.

What all of this means in practice is that designers have a lot of control over how their text ends up looking without having to do a lot of work (assuming the application they’re working with supports them). variable fonts). It’s also great for web designers who want a standard-looking font that they can tweak to make sure their headings and titles stand out, both from the rest of the text on the page and from the rest of the text. other websites. It doesn’t hurt either, since it’s a Google font, you can add it to your site with a line or two of code.

Screen Shot 2022 05 06 at 12.40.09

It’s easy to import Roboto Flex to use on your website (although I think it would take someone with more advanced knowledge of the Google Font API than me to navigate the settings).

More… Look, this might be going out on a limb here, but I couldn’t help but think of all the fun UI things you could do if it was the font on , say, a phone with a foldable screen. You know, like that one Google is supposed to be working on? It’s easy to imagine visual tricks like the font stretching as you open your phone or where the text maintains the same proportions as you move from the small front screen to the larger interior screen. This sort of thing would be much easier to implement if you’re working with a flexible font and would be really fun to see in practice (and Google’s all about fun in Android now, right?)

This isn’t the only interesting font Google has made recently. It also announced a serifed version of Roboto, which would sound like heresy if it didn’t actually look really good, and it even brought back the beloved blobs in its Noto Emoji font. It’s not the only one to play with variable fonts either – Apple SF Pro, which is used as the default font on just about all of its devices, supports variable optical sizes and Microsoft’s Cascadia Code programmer supports support variable weights.

Leave a Comment