Saturday, July 2, 2022

Google’s latest Roboto variant is a font that can be customized to the core

Must read

Shreya Christina
Shreya has been with for 3 years, writing copy for client websites, blog posts, EDMs and other mediums to engage readers and encourage action. By collaborating with clients, our SEO manager and the wider team, Shreya seeks to understand an audience before creating memorable, persuasive copy.

As someone who really likes fonts, I know that most people don’t share my passion – but I honestly think anyone who cares at all about typography will have some interest in what Google announced on Thursday† If you’ve ever used anything from Google, you’ve seen Roboto. Now Google is introducing something called Roboto Flex. As the name implies, it is a version of the famous font that you can tweak and customize in countless ways.

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

You can of course 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. This doesn’t get any more interesting for you.)

What actually happens is that Roboto Flex is a “variable font”, meaning you don’t have to manually load individual files to make changes to weight, slope, or other variables. Flex goes beyond just the basic changes, however; Google says there are 12 different ways you can adjust it, including changing the width, line width, and even the heights of ascending and descending stems (as found on the letters “d” and “p” respectively).

This is all the same font.
Image: Google

These types of fonts have been around for a while – even Roboto Flex has already been a year or so public in the makingbut it’s cool to see Google making it readily available to anyone who wants to use it.

Roboto Flex also has a few other interesting features that aren’t directly related to making it look cool. In his blog postGoogle says it has put a lot of balance into the font to make sure it looks good at specific sizes so that text looks bold or thin, whether it’s an entire page or just a small footnote. Google’s announcement also takes a look at how the font’s designers (a studio called Font Bureau) made sure little details were right. Apparently the circles used in the percent symbol are proportionally the same as the number 0. That’s some hardcore font nerdery, and I love it.

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

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

Plus…look, this might be going wrong here, but I couldn’t help but think of all the fun UI stuff you could do if this was the font on, say, a phone with a foldable screen. You know, like what Google is supposedly working on? It’s easy to imagine visual tricks like stretching the font as you unfold your phone or where the text maintains the same proportions as you move from the small front screen to the larger inner screen. That sort of thing would be much easier to implement if you were working with a flexible font and would be really nice to see in practice (and Google is all about having fun in Android right now, right?)

This isn’t the only interesting font Google has recently created. It also announced a serifed version of Roboto, which would seem heresy if it didn’t actually look pretty, and it’s even brought back the beloved blobs in his Noto Emoji font. It’s not the only one playing with variable fonts, either – Apple’s SF Proused as the default font on virtually all of its devices, supports variable optical formats and Microsoft’s programmer-oriented program Cascadia Code supports variable weights.

More articles


Please enter your comment!
Please enter your name here

Latest article