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

Peter Constable
Peter Constable Posts: 210
in Font Technology
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???
Tagged:
«134

Comments

  • Simon Cozens
    Simon Cozens Posts: 752
    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.
  • Mark Simonson
    Mark Simonson Posts: 1,739
    edited November 2021
    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.
  • Florian Pircher
    Florian Pircher Posts: 176
    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.
  • Peter Constable
    Peter Constable Posts: 210
    Florian Pircher said:
    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.
  • Florian Pircher
    Florian Pircher Posts: 176
    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 Shinn
    Nick Shinn Posts: 2,216
    edited November 2021
    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.

  • jeremy tribby
    jeremy tribby Posts: 251
    Simon Cozens said:
    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!

  • jeremy tribby
    jeremy tribby Posts: 251

    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 Puckett
    James Puckett Posts: 1,998
    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.
  • Peter Constable
    Peter Constable Posts: 210
    James Puckett said:
    ...

    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.
  • Marc Foley
    Marc Foley Posts: 16
    > 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. 
  • Oliver Weiss (Walden Font Co.)
    Oliver Weiss (Walden Font Co.) Posts: 213
    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.
  • Cory Maylett
    Cory Maylett Posts: 248
    Around 42 percent of websites run out of WordPress. The majority of the others run out of other CMS's, such as Joomla or Drupal. A growing number are built with online drop-and-drag site builders, such as Wix and Squarespace.

    Website development agencies account for some sites. But they're generally the mid-and-higher-budget and trafficked sites that call for custom scripting and where various tasks are divided among specialists. The designers at these agencies are the primary users of Figma, but in addition to Figma, there is Adobe XD and Sketch, among others.

    Despite this lack of support from the apps they use, adding variable fonts during coding is a simple task. Designers can easily communicate it to the coders and developers, but they seldom do. The lack of variable font support in applications like Figma undoubtedly contributes to the general scarcity of variable font in use, but I suspect it's a small part.

    As for WordPress and the other common CMS platforms, most of those sites are built from templates in various frameworks — modified with downloaded add-ons and to whatever degree the templates easily make possible.

    Do-it-yourselfers build many of these websites. Others are put together and coded to some degree by the designers using them. Sometimes, a team might be involved using something like Figma, but more often, that's not the case. At least I know it hasn't been on many of the sites I've designed and coded.

    These off-the-shelf templates typically have typographical options, but few include variable font support in the admin interface. Again, it's a simple matter to code them directly into the template or an override. However, most users of these CMS platforms — especially WordPress — aren't coders and steer away from even the simple stuff.

    The growing number of sites constructed with online drag-and-drop web builders are put together mainly by amateurs who want quick and cheap brochure websites. Most people using them have never heard of variable fonts — they just choose from the options presented.

    Website functionality and goal-achieving metrics are typically the measures of success, so that's where the effort is placed. The options in CSS and JavaScript for eye candy are many, but they take a backseat to functionality. Variable fonts get lost in what's possible vs. what's important.

    I'm a graphic designer/art director who's been building websites since about 1993. I regularly talk to other designers who look at typography from a considerably different perspective than type designers.

    They're great at using typography to achieve the right look, personality, and emotional quality in their layouts. However, if you ask them about font technology, such as OpenType features and variable fonts, you'll typically get a deer-in-the-headlights response.
     
    They'll say they've heard of these things but don't know much about them. As @Mark Simonson alluded to earlier in this thread, variable fonts, like MM and GX before it, don't appear to grab their attention enough to take the time to delve into it. Maybe that will change as variable fonts become more common. Then again, perhaps it won't.
  • Nick Shinn
    Nick Shinn Posts: 2,216
    At the intersection of Thomas’ comment about Adobe Fonts non-support, and Cory’s about Wordpress dominance, note that Wordpress promotes Google Fonts and Adobe Fonts as the main go-to for fonts.
  • jeremy tribby
    jeremy tribby Posts: 251
    Is the implementation of a VF on a Wordpress site much different a static font? It’s been a while since I’ve used Wordpress, but I remember a lot of templates in that sort of environment involved the inclusion of a meta tag somewhere to include some CSS on a CDN hosted by e.g. Google?
    Could this account for some of the “invisible” use Marc mentioned? E.g., no tweaking feature variations, just one font file providing both the regular and bold

  • Cory Maylett
    Cory Maylett Posts: 248
    Without going into detail, the style sheets (in WordPress or anything else) are written a little differently when using variable fonts. Most off-the-shelf WordPress themes assume users will use static fonts, so the CSS gets built around that assumption. Using variable fonts in WordPress or any content management system (CMS) isn't difficult, but the CSS needs to account for the multiple axes in variable fonts.

    There's also the backend admin panel where users enter content. The WYSIWYG admins of most content management systems (including WordPress) try to remove the need for user-entered coding as much as possible. Instead, the interfaces rely on buttons for the various <H> elements plus bold and italic. Styling those elements with variable fonts is doable, but the end result will look mostly the same as if static fonts were used.

    For example, take the Typedrawers forum, which is run out of a CMS. Would it make a difference to most people whether the bold is called in from a static bold font or defined via CSS as the 700-weight of a variable font axis? They'd look the same.

    In addition, there's the issue of backward compatibility with older browsers. I don't have the figures in front of me, but last I checked, around 10 percent of total browsers in use on the web don't support variable fonts. Mitigating that problem alone is enough to dissuade most web developers.

    A variable font being a smaller download than an equivalent set of static fonts has merit. However, saving, say, 64KB of download space on an average web page of 3MB isn't necessarily large enough to offset the downsides I've mentioned — at least for most websites.

    To summarize, I don't think the scarcity of variable font use in websites is due to one or two main reasons. Instead, it's at least a dozen different smaller reasons that add up.
  • Scott-Martin Kosofsky
    Scott-Martin Kosofsky Posts: 422

    If you do a Google search for “Which browsers support variable fonts?” you will find it difficult to determine which sites have the current information. That’s the dilemma faced by web designers who have to decide whether it’s worth subjecting their clients to complaints from users with older systems. Most will decide that it’s simply not worth it. A similar suspicion is held by those who wonder about support for some of the more exotic OT features. Type developers like to keep busy and some seem to have become addicted to complexity, but users of type reject the idea of the ground shifting under their feet. We like our type to be safe and dependable. At the moment, there’s just not enough to be gained by using variable fonts, promising though they may be. Many of those currently available (according to v-fonts.com) seem to be more interesting than useful, and many are sadly underdeveloped.

    For print designers like me, who consider themselves to be serious typographers and who work with extended texts, variable fonts have the promise to bring back aspects of Multiple Master fonts that I found advantageous: a way to adjust optical sizes, weights, and widths to produce more harmonious designs. But there are now static font families that have size-specific variants that, if imperfect, are quite good enough. It’s been a real pleasure to see fonts that I admired and used in metal but avoided ever after, such as Futura or Walbaum, appear in recent new versions that perform well on the page in many sizes and weights, even if my idea of the “perfect” weight for a particular situation is almost, but not quite, there. 

    Back in the mid-1990s, I made a very elaborate museum catalog using MM Minion throughout. As it was produced just before the advent of PDF print workflow, the files can no longer be retrieved, and even if they could be, they couldn't be edited. I’m loathe to take that chance again. I think Adobe made a major mistake by abandoning MM as a commercial product, if only because it discouraged people from taking chances. I do, however, understand their frustration when they found that many people who claimed to be interested and excited by MM proved to be too lazy to work with it. (I found it to be much easier than many claimed it to be.)

    Shopping for fonts is like venturing into a category 5 hurricane, with debris flying all around as you search for a diamond. Adding the complication of variable fonts might just be more trouble than it’s worth, at least for now. Yet, I wouldn’t discourage anyone from making more of them, because eventually it might succeed. 

  • Adam Jagosz
    Adam Jagosz Posts: 689
    edited November 2021
    Actually, you do not need to google "Which browsers support X and Y" and sift through various sources, you google "Caniuse X and Y". And then, in 90% of situations, you decide (or find out) whether you need to support Opera Mini, all those weird Chinese browsers, and in general, users in developing countries where prices of fast Internet are prohibitive who use those browsers.
    Those browsers save bandwidth by not downloading any font at all, which is why they don't need variable font support.
  • Peter Constable
    Peter Constable Posts: 210
    @James Puckett
    >They promoted two use cases that don’t resonate with most designers.
    > The first use case was bandwidth savings...
    > The other use case the big four promoted was novelty fonts....

    I was just reviewing what it was we actually said wrt benefits and use cases at the announcement at ATypI in 2016. A few things we mentioned
    • integration with other parts the OT format
    • interoperability across platforms and with CSS
    • familiarity for type designers that have worked with design tools that use interpolation
    But the bigger things we touched on had to do with motivations that came from the emergence of Web fonts and responsive design. So, we called out two things in particular:

    - size/bandwidth savings
    - the continuous-variation capabilities that could provide new typgraphic opportunities  in applications

    The latter could involve "novelty fonts", though we didn't call that out as a key use case. Behdad did give a brief demo using the Buffalo Gals font, but it was only to call out that custom axes could be used, and that there would be something proposed in CSS to allow use of custom axes.

    What we did call out as examples of possible typographic capabilities in apps were

    •Responsive design
    •Small width adjustments for column size / display form factor
    •“grade” adjustments for print medium, display properties
    •…

    (See the video of the announcment, starting around 6:45.)

    In hindsight, I think we could have called out novelty fonts, but emphasizing things that might be done for motion graphics or virtual reality environments.
  • Thomas Phinney
    Thomas Phinney Posts: 2,896
    My main use cases as a designer/typesetter are related to weight and width adjustment to make things match from one line to another.

    I just designed a couple of headstones. Used optical size (for serif fonts) and weight (for sans serif) variations to make different sizes look “right” together. I did this without the benefit of actual variable fonts, so it isn’t perfect, but it will have to do.  :neutral:
  • Scott-Martin Kosofsky
    Scott-Martin Kosofsky Posts: 422

    When compact audio disc players first became available in the early 1980s, the audiophiles with money to burn (the early players cost around $2000 = ±$5500 in today’s dollars) bought any disc they could get their hands on: train whistles, bird songs, Kenny G—anything. Not many players were sold at first. It wasn’t until the big labels started releasing their vast backlists of LP recordings in the new format did the whole thing take off, thereby driving down the cost of the player units. I’m thinking that a similar situation exists with VF fonts. 

    If there were VF versions of the fonts I use and depend on, I’d buy them in a flash (my previously stated concerns notwithstanding). But that’s not what’s happening. What have been published so far (according to Nick Sherman’s site) are largely new fonts, with only rare exceptions. The world can barely absorb more new fonts in any format and professional designers, who are the target market for VF, want the fonts they already depend on before they consider new ones. Until the largest founders step up with VF versions of their most used types, I fear that the format will languish.

  • John Hudson
    John Hudson Posts: 3,225
    edited December 2021
    In addition to what @Scott-Martin Kosofsky wrote:

    Other than some specialised or ‘novelty’ projects in which variation is the principal feature of the design, I have seen very few variable-only releases. Variable fonts are still mostly being offered as a packaging option alongside static font families, whether as a separate product or bundled with the static fonts. Since users are familiar with working with static families, there may be little impetus for them to switch to using variable fonts, especially if they are only using a couple of styles. 

    Until the largest founders step up with VF versions of their most used types, I fear that the format will languish.
    Making a variable version of a font family that was not originally designed to be variable is not a trivial or significantly automatable task (unlike, say, Type 1 to OpenType library conversion, which wasn’t trivial but was significatly automatable, as Adobe demonstated). Depending on the nature of the design and the sources, the glyph set management, outline interpolability, design space design and management can all require a lot of work, especially if one wants to achieve compatibility with existing static fonts in the variable named instances. [In the case of Microsoft’s Sitka, we also had to contend with the static fonts not all having the same UPM.]

  • Thomas Phinney
    Thomas Phinney Posts: 2,896
    Although I mostly agree with John, there are a decent number of cases where the design was created using/for multiple master or equivalent tech, and is not so far away from being a variable font to start with.

    Certainly there are a bunch of Adobe Originals  in this situation, where it is more an issue of data management and tweaking than it is of design problems: Kepler, Trajan, many others (including my Hypatia Sans). Not that the production work would be trivial, but for some of these it is “just” production work.
  • Cory Maylett
    Cory Maylett Posts: 248
    Just two or three speculations on the subject of commercial variable fonts (not limited to websites)...

    One obstacle with purchasing (and subsequently using) variable fonts is that doing so essentially means buying the entire type family. Most display fonts, however, are sold as one-offs for a particular purpose. In those situations, the extra expense for the variable fonts isn't justified when all that's needed are one or two weights.

    Something that might keep variable fonts from drifting into obscurity, like multiple masters, is that they're essentially by-products of designing a larger type family. Since the most efficient way to create a type family is to interpolate the mid-ranges, saving out the variable font becomes something of a no-brainer. This alone might put time on the side of their ultimate widespread use.

    Since variable fonts involve designing only the end-of-the-range masters, the efficiency should eventually bring down variable font prices (that and competition with growing numbers of free-to-use variables). These lower-cost, full-family variables could, in turn, make buying the equivalent higher-priced static font families uneconomical. At that point, foundries would need to release their mainstay older fonts as variables to stay competitive.

  • Craig Eliason
    Craig Eliason Posts: 1,440
    Would it work to have a foundry or reseller site on which the customer could dial up the exact setting they wanted and then download a corresponding static font? Would foundries see such a download as fairly priced if it were at the same price point as current static single fonts? 

Categories