Why don't we hear about more use of variable fonts on the Web?

I'm wondering why we don't hear much about more use of variable fonts on the Web?

I don't mean people talking about what benefits variable fonts can offer for the Web. I mean hearing about sites that are choosing to incorporate variable fonts to take advantage of benefits in regard to performance, richer / responsive typography, text effects, etc.

Is it that use of variable fonts on Web sites is growing but that's just not getting talked about?

Or is it that there are things hindering adoption on the Web? And, if that's the case, what are those hindrances?

There's been support for variable fonts across browsers since 2018, and people like Jason Pamental and Mandy Michael have been promoting the benefits. But what might be hindering adoption?
  • Not enough Web designers have heard about variable fonts?
  • The benefits that have been talked about aren't compelling enough for Web designers/developers?
  • Web designers have been hearing about it, but are leery of trying something still relatively new, or just haven't had opportunity to learn?
  • Even small differences in CSS coding (e.g., specifying ranges in @font-face rules, like font-weight: 125 750) is too much of a learning curve?
  • Limitations / issues in current CSS that hinder usefulness of variable fonts?
  • Limitations in frameworks/tools (Wordpress, SASS, ...) that Web developers and Web content authors use?
  • Costs of licensing variable fonts, or confusion around licensing of variable fonts?
  • Not enough availability of variable fonts as Web fonts?
  • Other???

Comments

  • jeremy tribbyjeremy tribby Posts: 76
    edited November 26
    My perspective is that it’s actually very simple. It’s because Figma doesn’t support variable fonts. And some aspect of what you’re saying about licensing.


    • Limitations in frameworks/tools (Wordpress, SASS, ...) that Web developers and Web content authors use?


    IMO this is asking about the wrong kind of tooling.

    The issue is that most people who work with fonts are designers, not engineers. If you can’t use a variable font in Figma, you can’t hand it off to a UI engineer to implement.

    Where I work, there’s nothing preventing a bundler like webpack from loading a VF for our websites. Nothing preventing our Swift (iOS) or Kotlin (Android) setups either. Engineers have been warm to the idea as I’ve presented it; serving one network request for multiple styles is intriguing.

    But our designers use Figma, mostly, as well as Principle, After Effects, Illustrator, and so on. 

    One out of four of those apps supports variable fonts. 

    It’s not  feasible for a design org our size to use a mix of static and variable fonts to accommodate the majority of apps that don’t support variable fonts. Not because it’s not possible, but because it’s not worth the effort of keeping all these fonts and settings in sync. so I recommend that we don’t use them, and I’m the one who wants to use them the most!

    I really can’t overstate Figma’s influence in enterprise UI design today. It’s akin to asking why people in 1998 wouldn’t use variable fonts if Photoshop didn’t support them. 

    60 years after Karl Gerstner wrote “Designing programmes,” there are now entire teams of designers and technologists doing this type of work at large enterprises, whose discipline falls roughly under “design systems.” They would be the first movers on VF, but they can’t. Figma (and interoperability with other tools) hasn’t made it plausible yet.

    Like you, I really only see variable fonts in what I might call “boutique” settings, where maybe it is one person doing the design and implementation. And even then they probably have less control than if they were running a Wordpress site. These days it’s Shopify, Squarespace, etc. The designer-implementer on the web feels less common these days, with increased specialization and separation of concerns at tech companies. 

    Stripe, which I believe is using a variable version of Söhne from Klim, is one of the  exceptions I’m aware of.

  • I'm not sure that can be true; Figma, AIUI, doesn't create websites or export HTML. So the people who are putting web fonts into CSS and onto web sites aren't using Figma to do so.
  • John HudsonJohn Hudson Posts: 2,200
    Simon, website implementers are very often following design specifications developed in Figma. They may interpret those specifications in ways that would include choosing how to handle the font stack to include variable fonts, but they are at least as likely to follow the design specification in terms of using specific web fonts identified in the Figma files.

    Further to Jeremy’s point, even if the static font styles specified in the Figma files could be and are deployed via variable fonts, the more interesting dynamic aspects of variable fonts are not utilised because they are not spec’d.
  • Mark SimonsonMark Simonson Posts: 1,376
    edited November 26
    As a type designer, I can see the benefits of variable fonts, but I sometimes wonder if this format is "overdelivering". In other words, providing benefits that are not significant enough to get most web designers to change their habits.

    I'm reminded of the story Matthew Carter tells of the creation of his typeface Charter. Memory in early PostScript printers was scarce. He had the idea to create a typeface with as few nodes and handles as possible to address this. When he presented his solution, he was told that it wasn't a problem anymore. They had figured out a way to compress font data. (This is from memory, so forgive me if any details are wrong.) 

    Given that this idea has been tried twice now (first with MM and GX in the nineties) I worry that it might be a bit like 3D movies, where every few decades it's the next big thing, but then it turns out not to be.

    Or maybe we just need to wait for Figma to get onboard.
  • I assume that most designer pick fonts for their aesthetics, not for technical capabilities. Most fonts on the market are not variable, so most fonts that happen to fit the aesthetics of a project or are well-known are not variable.
  • Most fonts on the market are not variable...
    Ten years ago, most fonts used on the Web were "web-safe" fonts in local OS platforms; Web font usage was near zero. Today, web-font usage is over 80%. (Source: Web Almanac.) So, where we're at today isn't necessarily where we're stuck.

    Btw, the Web Almanac report for 2020 reports that variable font usage on the Web increased from 1.8% of pages in 2019 to over 10% in 2020. That's significant, but it's still limited, and even that much I don't hear talked about much.
  • The transition from web-safe fonts to webfonts has more tangible benefits than the transition from static webfonts to variable webfonts. That should not diminish the benefits that variable webfonts do provide. Still, if a designer wants to use a few weights of a specific family and there is no variable version of that family, they will probably forgo the file saving and load the weights separately instead of searching for a variable replacement and loading that.
  • Nick ShinnNick Shinn Posts: 1,764
    edited November 26
    There is an ontological issue.
    Being infinitely variable is fundamentally different than having a discrete number of axis states to choose from. 
    It may well be for the user that it is the more practical design tool which offers a limited number of discrete options, rather than unlimited choice.
    You known what they say about constraints, how they focus design.
    Slider controls which indicate “static” named values such as “Medium” are important.
    That’s more difficult for axes other than weight.

    **

    Another issue: when making a traditional font family of weights, one avoids a particular point on the axis, at which the vertical stem thickness equals the space between stems (most apparent in words such as millennium)—too much dazzle/sparkle—yet such pitfalls lie in wait for variable font users. 

    So, the type designer’s determination of a set of weights is a useful and sophisticated thing, part of what makes a typeface what it is, its personality—handles by which font perusers may grasp a type’s identity. The more axes are added to a “typeface”, the more diluted its personality becomes, as the particulars of the font in play migrate from type designer to typographer.

    Certainly, it’s interesting to have new qualities such as fonts that bleed, but ultimately I imagine layout applications in which a very few comprehensive metafonts are embedded, and a multitude of type styles are provided by plug-ins which curate specific combinations of axis “pre-sets” such as “Bodoni”. A challenge for type designers.

  • I'm not sure that can be true; Figma, AIUI, doesn't create websites or export HTML. So the people who are putting web fonts into CSS and onto web sites aren't using Figma to do so.
    Your understanding of Figma is correct, this is the “boutique” case I’m describing, though. I think it’s a very different story at medium and larger sized enterprises.
    It may seem silly that having to communicate the difference between a font used in a Figma file and one that should be implemented would cause so much trouble but the various points of friction really add up across multiple tools when you’re talking about hundreds or thousands of people trying to stay in sync.

    RE keeping design spec and implementation in sync I’m keeping my eye on the nascent Design Token W3 community group. They haven’t addressed typography yet, and I’d like to be in the room when the get to that module: https://www.w3.org/community/design-tokens/
    Design tokens are meant to help the design/engineering relationship as it pertains to passing along specs and having a source of truth for them. The concept has been around a few years (longer under different names I’m sure) but there hasn’t really been a formal spec for it, which I think the community group is working toward. Tokens are essentially platform agnostic variables of design metadata that are universal to a brand’s design language - the border radius of buttons, color, font styles and so on. This abstraction allows design teams to have one spec that can power multiple platforms - iOS and Android and web based tooling can consume these tokens  to convert to variables in native code (or maybe they’ve already been converted to CSS/Swift/etc by Amazon Style Dictionary or Salesforce Theo or another such tool) without needing any platform specific information as an input.
    The reason I mention this is that design systems teams are very invested in this idea. Simultaneously, I am not aware of much thinking on font feature variations in this arena so far.
    Peter, if you have an easy way to get in touch with Microsoft’s design systems team(s), it might be worth it to engage them on this. I know they are Figma users as well, and though they may have a different outlook than me on all this, it looks like they’re already involved in the design token community group (https://github.com/design-tokens/community-group#companies-and-open-source-projects-represented-on-the-dtcg) and I bet they’d have a lot of insight on how modern “design plumbing” works at large orgs, are probably actively figuring it out, and would certainly benefit from your input.
    Oh how I miss the days of the webmaster!

  • @Kris Sowersby I’d argue that your lack of VF requests may also be due to you not really publicly engaging with the tech, as far as I can tell. I don’t have any formal data on it but would say it’s a pretty rare week by now that Grilli doesn’t get a request or question about VF in our inbox. 

    From my POV:
    – Designers like the animation potential and (in some cases) the ability to fine-tune axes. Design apps will catch up, including Figma. They said they’d launch VF support at some point, hopefully sooner than later. We design our minisites in Figma and I’d really love to finally be able to use them in the app.
    – Developers like the idea of having a single file to deal with for all (or often, half) of their website’s type. Smaller font sizes is a thing, sure, but it’s really mostly the aspect of having to deal with only single file that’s super nice for them.
    – The above is especially true for mobile apps where the file size doesn’t matter as much.
    – Foundries will always have to deal with the lack of feature support by certain apps. For example, I’d love it for Excel to just support this incredibly novel typographic feature that is tabular numerals. VF will not change that one bit, and will surely increase the complexity. On the other hand, let’s be honest, VF fit pretty nicely in most production processes already.

    Overall: give it another year or two. It’s quite possible that some large websites are going to upgrade to variable fonts in that time frame—don’t forget how long production cycles are for larger changes for sites like that. It can easily take 12 or even 18 months to make it to the end user.

  • My guess to why Figma doesn’t support VF? There’s next to zero demand

    This is probably not be the most reliable measure, but it's the 11th most requested feature on their forum, sorted by votes:
    I don't know how that adds up in the grand scheme, but it's not nothing

    Even if designers did want to use 20 styles on a site, they’re not going to be from the same VF superfamily.

    If more variable fonts had optical axes, I could actually see this happening. Not because you'd see all 20 styles at once, but because responsive websites that are supposed to be viewed on both 4" and 40" screens of varying resolutions could do a better job of serving the right fonts in the right context.

    Still, I agree with the beta feeling of the tech. To Thierry's point about animation, this is why the lack of After Effects support feels like such a big deal. The (design) ecosystem isn't there yet.

  • James PuckettJames Puckett Posts: 1,792
    IMHO variable fonts failed to find a market because the big four failed to make the right use cases. They promoted two use cases that don’t resonate with most designers.

    The first use case was bandwidth savings. Variable fonts could save lots of bandwidth. When you get ten million hits a day bandwidth costs are a big deal. But most web sites do not get millions of hits a day. The vast majority of businesses are small businesses. They are businesses like the plumber that cleans out my mainline once a year so sewage doesn’t flood my basement. That company probably only gets a few hundred hits a month. To these small businesses bandwidth costs are immaterial. They’re paying less than $20 US a month to host their web sites. They don’t need variable fonts.

    The other use case the big four promoted was novelty fonts. Fonts could grow serifs! The serifs could be bifurcated! The capitals could grow extended art deco strokes on the left! Designers don’t give two tugs of a dead dog’s dick about that shit. They want to just pick a display face and be done.

    Variable fonts could still catch on. Make use cases that matter to lots of designers. IIRC Nick Sherman did a great demo of a site with headlines that condensed as screens got smaller. Everybody works with headlines unless they’re one of those designers who only does logos. Show them what a weight & width axis font can really do and they’ll start to care about variable fonts. And UX designers would love to implement fine tuned optical sizes as an accesibility device. The markets are out there if the indie type studios reach out the right way.
  • I think there are several reasons for slow uptake on variable fonts:

    1) Adobe Fonts web service (the former Typekit) not supporting them (the former . This is pretty big.

    2) Figma not supporting them, as noted, is also important.

    I am a bit surprised by the lack of interest in the trend here. If we went from 2% to 10% of web sites using variable fonts between 2019 vs 2020, I think it will be VERY interesting to see the 2021 percentage when those stats are in.
  • ...

    The other use case the big four promoted was novelty fonts. Fonts could grow serifs! The serifs could be bifurcated! ....
    Not sure how you got that impression. Sure, Decovar was commissioned by Google Fonts and is a novelty font. But I wouldn't say it's representative of a main use case that was promoted by "the big four". Certainly for those of us at Microsoft working on the variable font technology, automatic selection of optical size variants (e.g, CSS font-optical-sizing), adjustment of width to fit headings or use of grade to adapt for colour contrast were much more representative of a second use case: smart layout algorithms that can provide better typography.
  • > Is it that use of variable fonts on Web sites is growing but that's just not getting talked about?

    I guess many web users/developers are seeing/using them without even realising. Open Sans was recently upgraded to a VF and it has around 40 billion requests a week.

    From 2018-2020, Google Fonts spent a significant amount of time with Type Network and others to upgrade the classic families to variable fonts. Out of the 1,321 families served, 197 are VFs, https://fonts.google.com/?vfonly=true
  • To a lot of folks, variable fonts are typographic haute couture. Looks great on the catwalk, can't take it out in public. A lot of my customers haven't even warmed to stylistic sets yet.
Sign In or Register to comment.