I came across this great episode discussing the impact that variable font technology will have on web design in 2018 and beyond. Some very interesting perspectives are discussed:
https://shoptalkshow.com/episodes/296-variable-fonts-jason-pamental/Discussion starts around the 2 minute mark.
Link to the book featured, "Reponsive Typography: Using Type well on the Web", Jason Pamental (O'Reilly)
http://rwt.io/resources/books/responsive-typography-using-type-well-web
Comments
The two are closely interconnected: the performance gains are dependent on what the type designer does in the design space.
@Cory Maylett How do you determine when to drop fonts for mobile?
There might be one typeface that's critical for maintaining this brand identity, so I'll tend to keep that one while reverting to system fonts for those instances of lesser importance at smartphone resolutions.
A nicer solution might be the CSS font-display property when it gets better support, where you show the page immediately in a limited set of fonts, and load the rest of the fonts in the background so they can be used on the next page. Your content will be available a.s.a.p. and nice webfonts only on subsequent pageviews.
But at this rate variable fonts will get support just as soon, and I personally much prefer an ideal solution for the majority (lots of variants with variable fonts), and a good fallback solution for the rest (single regular webfont or even "system fonts").
Ideally we want a "is this user on a slow connection", or a "is this user on a small screen device" media query, because that's the real question we want answered. But because we don't know, I think the whole "serve small, modern variable fonts to those who can use them, and a limited amount of small, old-fashioned fonts to the rest" philosophy best deals with these unknowns.
(I guess I belong to the fanatical half!)
I typically keep the content and layout more or less the same for widths over 750 pixels. When the display widths decrease below that, I'll make significant changes to the layout and downloaded resources with the assumption that it's likely a smart phone requesting the page. For those coming in on mobile devices with a higher pixel count, well, it might not be ideal, but they're at least used to dealing with both the pros and cons of their higher-end equipment since so many websites are built using the same philosophy.
We're probably heading off on a tangent unrelated to either typography or variable fonts, so my apologies for that.
I agree with Roel on the difficulty of finding a sensible metric for deciding when to serve web fonts. All the more, variable fonts help out with this, because once you make the decision to load a web font, you get the benefit of the entire interpolation range at less impact compared to downloading each and every one separate. And in terms of optimization it is not just the size of the fonts, though. Reducing the file requests in total is a common optimization metric, because both the browser and the server need to handle transferring many files at the same time, and a negative impact can start to surmount the actual download impact - which is why many sites ship all CSS or all Javascript as one file.
The hypothetical point has been made when Variable Fonts were first announced that would this not result in "one master font" for all the fonts there is - obviously that is unfeasible. What I wonder though, could you not package several even vastly different fonts into the same Variable Font by supplementing the glyphs with extraneous points where needed and subdividing the interpolation ranges between the included families? I would not be surprised if somebody tried hacking this already.
You also need the fonts to share the same character set and OpenType features and so forth. Yet... you aren't likely going to save that much space over an OTC/TTC collection if the designs are so different.
Not sharing the same charset or OT features is probably a good pragmatic reason never to even try this. There also is a point to be made against added complexity, of course, but optimization has a track record of weird and unintuitive solutions.
Still, an imperfect solution that considers and weights the variables then uses that information to produce a design optimized for audience dynamics is still a better solution than one that does not.
Regarding your phone pulling in a new set of fonts when you tipped it to landscape mode, I don't know the site, so I don't have opinions on how it was done or whether it should have even been done. What I will says is that many people think the ability to tip a phone on its side to get a more full-featured experience is actually a good thing — at least if the developer handled it the right way.
By the way, I'm not meaning to come across as argumentative or be pedantic either. It's just a good discussion and sharing opinions.
I suppose that's where it gets interesting for type designers: how will web developers bring twelve variants down? Or will they just fetch those twelve separate fonts? Do they want to generate a few very specific variants from the variable font? Use the default "old fashioned" fonts that came with the variable font? What's allowed by the license? Will developers even care? Or will the ubiquitous, out-dated "bulletproof @font-face" continue to reign, making variable fonts a novelty for the small niche of webdevelopers who also care about typography?
For example, an average user on a mobile phone visiting a page with lots of information is typically less likely to spend as much time on the page as someone sitting in front of a desktop display. So you might want to design a simpler, straight-to-the-point layout for mobile and a more involved page with additional content for desktop users.
I spend a good deal of time doing A|B testing for client marketing purposes, and I've repeatedly found that using different content and layout approaches for mobile and larger displays almost always yields higher levels of engagement than when I use a similar approach for both. This is especially apparent on e-commerce sites where results can be measured in sales figures.
Aesthetics and emotional impact play a role in reader engagement. A small handheld device is a very different canvas than a 27-inch desktop monitor. A design that takes the pros and cons of each into consideration can be more effective at communicating with the target audience.
I could go on, but my point is mobile and desktop users are different enough that what might be seen as essential and/or beneficial for one can be a hindrance for the other.