There's a wonderful, interactive playground of variable fonts up at https://v-fonts.com. Most variable fonts let you interpolate font weight, width, or slant, but some go much further. See for instance, http://variableemojis.com

FWIW - I worked on Google Fonts for the last 18 months. Happy to answer any questions.

In short: rather than having a single font file for every weight, variable fonts take in a variable (ie. weight, width, optical size, etc) and can render the fonts glyph at a specific design space. This means instead of having three files for thin, normal and bold, you can have one slightly large file that can render thin, bold, and everything better.

Is it good for web usage? 400,400i,700,700i fonts' file sizes combined is still less than one variable fonts'size. Isn't that true?

Its great for web usage but the context matters. It's not so black or white.

The font file that displays a weight is using a "master". Often an extreme expression of a font (thin/bold) is based on a master. The in between weights (normal/medium) can be interpolated without an explicit master. So you can get now just Roboto 200, but also Roboto 220, 250, 300, 315.

When the variable font file has many masters, then it has the possibility to be bigger than having individual fonts. This is why its not so straight forward.

In the case that you have an italic font, for example, you might need a specific master for the italic and the normal size.

The cases where it is smaller to use a variable font is when you have multiple weights that can be interpolated from less masters in the font file, than you would need font files. For example, having 300, 400, 600 font weight used in a variable file could be smaller if the 300/400/600 weights are all interpolated from the 400 weight master. This way the fonts thin/bold masters could be removed from the font.

Google Fonts team does some really cool stuff around this, where they minimize the size of the file being sent down the wire based on your browsers capability.

TLDR: Variable fonts can be faster. When it is, it's a lot faster. But its not black and white, so there isn't a straight forward way to know.

It baffles me so few programs support these.

Adobe Illustrator does and I use the heck out of it, particularly with the Adobe Variable Acumin font. So useful.

I know the Adpbe suite does support them, but what about Microsoft Word or Apple Pages? I would say variable fonts are the future.

I just tested it out with MS Word and the variable fonts do not show up in the list of available fonts within Word.

Boo.

They should show up with their individual styles, but you can't variate them. They need to contain a STAT table to work on Windows though.

Hmm. Although it shows up in Illustrator, Photoshop and InDesign, it does not make an appearance in the MS Word font list, either as a master or as individual styles.

Adobe apps don't need a STAT afaik, Microsoft apps do.