I rarely notice anyone using variable fonts in real-world scenarios in any obvious way—setting aside variable font marketing animations. It's hard to tell if a variable font is used in a static way. For all I know, I'm looking at variable fonts on websites all the time without realizing it.
But I noticed a very obvious use of variable fonts when I recently upgraded to an iPhone 15 Pro. One of the features that was new to me is the "always on" display. On my previous iPhone, when it was showing the lock screen, after a few seconds it would turn off the display, fading to black. With the "always on" display, the screen dims instead, and you can still read the time and other information while it's on standby.
What I noticed was that the weight of the large text for the time changes as it dims or lights up, between a thinner weight for standby and a bolder weight for when it's lit up. The weight animates—like all those VF marketing animations—between these two states. I also recently got a new Apple Watch, and it does the same thing with its "always on" display.
Apple has been using variable fonts in its UI for a while, ever since they started using San Francisco on their devices. But this is the first time I've seen it used in a way that is only possible with a variable font.
Has anyone else noticed this, or seen any similar uses of variable fonts?
5
Comments
https://www.youtube.com/watch?v=GnX_cLpuHjU
Back in January, Google Design published this article explaining the use of weight and width axes to "fit text to box" - I believe a very common "finesse" value proposition of vf tech - and I think it's even more subtle than your AOD lock screen example (which has been seen in Google Pixel phones for a while already.)
https://design.google/library/fun-stickers-with-dynapuff
However, I think as the capabilities of text engines increase to make motion typography with gvars less computationally intensive, we will see more commonplace tweening of text along axes as responsive or interactive details.
For example, if you click on the Google Material 3 site buttons or titles, you'll see a very subtle vf tween to transition from default to active state.
https://m3.material.io
The site at https://m3.material.io uses a smooth transition to a bolder weight when one hovers on an icon in the left sidebar. Same with https://fonts.google.com/
The Material Symbols font (internal Google version: Google Symbols) is a 4-axis variable font, which also has a “Fill” axis. One can just use either the hollow or filled state, as preferred... but the point of having it on an axis is not that anybody would ever want to use an intermediate state, but to allow for an animated effect to go from hollow to filled, or vice versa. When we first implemented the fill axis, I think I found that between half a second and one second made for a nice transition time. Say 0.6s or 0.75s.
On the other hand, there are at least two third-party plugins that let you animate variable fonts in AE in a much easier and straightforward way. I would say that is more likely how it was done.
But you're right. No way to know for sure just from looking at it.
As it stands, I feel like variable fonts' main selling point is that they save memory, which is a pity if you consider the artistic possibilities.
Going on a bit of tangent here, but I am still waiting for HOI variable fonts to become normalised (i.e., implemented in type design software). That could really take 'variable' to a whole new level.
I had an animated gif for my web site logo 20 years ago, as did Mark.
But not any more.
I found it too distracting.
But then, I’m no fan of hyper-stimulation in the media, with fast-cutting, “sludge” and video feeds on screens all over public space, restaurants and waiting rooms.
Is that just my old age, or is their any youthful rebellion against this arms-race of the attention economy?
When used in an interface (e.g. when hovering over a button), moving type becomes much less distracting, because presumably your attention was already at the thing you were hovering over.
https://www.itsnicethat.com/news/and-form-tokyo-dome-city-graphic-design-171023
In that respect, it’s like having a constant baseline position, or x-height.
IIRC, there has been some readability speed research in which rather than the eye scanning across text, the text changes in the same position—no doubt with “typewriter” fonts.
Perhaps you are thinking of use of Rapid Serial Visual Presentation (RSVP) of text, in which words are flashed sequentially. It isn’t dependent on monospaced fonts, because each word is centred on a fixation location.
For short pieces of text, it has been shown to increase reading speed, so could be a useful tool for presenting e.g. emergency information. I think for longer texts it can be tiring and of course there is no easy possibility of regression, as in normal reading, if you miss or mis-read something.
I found it very tiring and had difficulty imagining that it would be sustainable for the person reading—at least for me. Too much effort making my eyes behave exactly the way the reading model wanted them to do.