Google’s latest variation of Roboto is a font that can be customized to the core itself

As someone who’s really into fonts, I know most people don’t share my passion – but I really think anyone with an interest in typography at all will be interested in what Google announced 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 the famous font that can be modified and customized in many ways.

I feel like I can lose a lot of people so let’s try this: here’s a gif showing all the configurable parameters of the Roboto Flex. There are no gimmicks – I don’t change the 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 changes as you want.

Pretty cool, right? (If you just said no to your computer screen, you now have my permission to leave. It won’t be more interesting to you.)

Basically, Roboto Flex is a “variable font” meaning you don’t have to manually load separate files to make changes to its thickness, slope, or other variables. The Flex goes further than just basic changes, however; Google says there are 12 different ways you can customize it, including changing its width, stroke thickness, and even the height of the rising and falling trunks (such as the letters “d” and “p” respectively).

This is the same font.
Image: Google

These types of fonts have been around for a while – even Roboto Flex has been publicly underway for about a year, but it’s fun to see Google make it available to anyone who wants to use it.

Roboto Flex also has some other interesting features that are not directly related to giving it a cool look. In its blog post, Google says it places a lot of importance on the font to make sure it looks correct in the sizes you specify so that your text will appear appropriately bold or thin, whether it’s a full page or just a small a footnote. . Google’s announcement is also about how the font designers (a studio called Font Bureau) took care of the fine details. Apparently the circles used in the percentage symbol are proportionally the same as the number 0. This is some hardcore font and I love it.

In practice, this means that designers have a lot of control over what their text looks like without having to do a lot of work (assuming the application they are working with actually supports variable fonts). It is also great for web designers who need a standard looking font that they can customize to make their headers and titles stand out, both from the rest of the text on the page and from other websites. It doesn’t hurt either, as it’s a Google font that you can add to your website with a line or two of code.

It’s easy to import Roboto Flex for use on your website (although I think navigating the settings would require someone with more advanced knowledge of the Google Font API than I am).

Plus… look, it might be here, but I couldn’t help but think about all the fun UI stuff you could do if it was a font on, say, a fold-up phone. You know like the one that Google is allegedly working on? It’s easy to imagine visual gimmicks like stretching the font while folding the phone or the text keeping the same aspect ratio as you move from the small front screen to the larger inside screen. These kinds of things would be much easier to implement if you work with a flexible font, and it would be really fun to see in practice (and Google is now all about having fun with Android, right?)

This isn’t the only interesting font that Google has created recently. A sheriff version of Roboto was also announced, which would have seemed heresy if it hadn’t looked really nice, and even brought back beloved stains in the Noto Emoji font. It’s also not the only one to play with variable fonts – Apple’s SF Pro, which is used as the default font on almost all devices, supports variable optical sizes, and Microsoft’s developer-focused Cascadia code supports variable weights.

Leave a Reply