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

124»

Comments

  • Dave Crossland
    Dave Crossland Posts: 1,429
    https://2021.stateofcss.com/en-US/features/typography/#variable_fonts

    20% of surveyed CSS developers said they've used VFs

    40% heard of it but not yet used it

    40% never heard of it
  • Peter Constable
    Peter Constable Posts: 208
    Dave Crossland said:
    https://2021.stateofcss.com/en-US/features/typography/#variable_fonts

    20% of surveyed CSS developers said they've used VFs

    40% heard of it but not yet used it

    40% never heard of it
    The presentation of information on that page is... interesting—as in, not clear. There are bars (equivalent to pie charts) for 2019, 2020 and 2021, but the "Never heard of it" bar gets longer for each year moving forward. Huh?? 

    Apparently the confusion is because fewer survey respondents answered that question in 2021 than in 2020, and fewer in 2020 than in 2019; but of those that responded, the proportion was shifting to those saying "Never heard of it".
  • Dave Crossland
    Dave Crossland Posts: 1,429
    Makes sense to me, as the survey population grows away from the network of people close to the people running the survey, who are a savvy bunch of early adopters, the population becomes less familiar with the latest stuff
  • Saurabh Sharma
    Saurabh Sharma Posts: 23
    20% of surveyed CSS developers said they've used VFs

    40% heard of it but not yet used it

    40% never heard of it

    They should have also mentioned the number of people participated in the survey. I am surprised, 40% of CSS developers (among the participants) have not heard of variable fonts in 2021. May be because of the evolution of web site builders, page builders and HTML/CSS frameworks, web designers are less interested in checking out new CSS properties and techniques.
  • John Hudson
    John Hudson Posts: 3,186
    Makes sense to me, as the survey population grows away from the network of people close to the people running the survey, who are a savvy bunch of early adopters, the population becomes less familiar with the latest stuff
    There is also the phenomenon by which a technology may actually become less well known as one gets further away from the initial introduction if that technology has not become a common component in the intervening period. When variable fonts were announced in 2016, there was a good amount of information disseminated about them and a lot of it consumed by potential users. As just one example, I was tracking the number of visotors and readers of the introductory article I wrote, and for the first couple of years after the announcement the readership remained high. It has since tapered off almost to nil, and I think variable fonts are probably less on the radar for newcomers to web design than they were three years ago.

    I think we should not underestimate the impact of web design and development education. My guess is that few students are getting exposed to using variable fonts. Twenty-plus years on from OpenType, it is still possible to talk to graduates of typography classes in design schools and find that they have zero knowledge of OpenType Layout, so it wouldn’t surprise me to find that teaching of web typography is stuck at @font-face static fonts.
  • Dan Reynolds
    Dan Reynolds Posts: 176
    John Hudson said:
    Twenty-plus years on from OpenType, it is still possible to talk to graduates of typography classes in design schools and find that they have zero knowledge of OpenType Layout, so it wouldn’t surprise me to find that teaching of web typography is stuck at @font-face static fonts.
    I know a lot of teachers who spend quite a bit of time explaining why OpenType features are important. And this is not a small part of what I teach students, too. But, in the grand scheme of a design education, the proper use of OpenType features and the use variable fonts instead of @font-face static fonts is not all that high up among the things I hope graduates take away from their design degree programs.
  • Peter Constable
    Peter Constable Posts: 208
    @Dan Reynolds But, hopefully, the students go away remembering that they have, at least, heard of these things and would respond to that effect in a survey.
  • jeremy tribby
    jeremy tribby Posts: 246
    nice find dave! I'm going to run that by a motion buddy

    I'd wager a number of forum members already saw this RE: figma

    I assume the context is that this is a leak of feature in beta testing?
  • Dave Crossland
    Dave Crossland Posts: 1,429
    Nima and others have a hobby to use decompilation tools to find eg translation strings, UI layout data, etc, that are included in apps but not accessible as active features. 
  • Andreas Stötzner
    Andreas Stötzner Posts: 792
    This is all very interesting.

    To the day, I can’t see why VF may be of any interest to me as a font designer, font provider.
    We enjoyed the Multiple Master adventure back in the 90ies, is was a delight but it vanished soon – no tears. We have OT since ~20 years and it has still not yet arrived in the brains of a majority of font users.
    – Of course there are different kinds of font users and hence different product models to pursue.

    What really puzzles me: I can’t grasp a feel that further advancing sophistication in the font’s internal technology does any good to the big majority of font users in this world. For 9 of 10 people all these fancy programming niceties are just too nitpicky or simply uninteresting. No one actually needs that.
    I’d rather think about to reform our means of character input. That seems to me a much bigger problem of today’s typographic practice in a globalized world, that is the Achilles’ heel no one seems to touch so far.
    But that is, admittedly, another thread.
  • Nick Shinn
    Nick Shinn Posts: 2,207
    There is some potential for emergent, unanticipated uses of new technologies.

    For instance, “pseudo randomness” was not a planned feature of the OpenType spec. 

    Similarly, there are certain areas of typography, notably animation/time-based, where VF fonts may prove to be instrumental in creating smooth new effects.
  • Peter Constable
    Peter Constable Posts: 208
    Andreas Stötzner said:
    I’d rather think about to reform our means of character input. That seems to me a much bigger problem of today’s typographic practice in a globalized world, that is the Achilles’ heel no one seems to touch so far.
    But that is, admittedly, another thread.
    Yes, admittedly a different thread, and perhaps out of scope for this forum.

    But I will say I'm surprised you'd say "no one seems to touch so far" since I think there has been a lot of change in the past ten years in how text is input. Perhaps there haven't been some kinds of changes you have in mind. But text prediction is just one example of major innovation that has occurred and where there is continuing innovation happening. 
  • Andreas Stötzner
    Andreas Stötzner Posts: 792
    Peter Constable said:
    … text prediction is just one example of major innovation …
    yes there has been some development. But not ‘major innovations’, I can’t see any. Text prediction is hardly an innovation, its a desease. As auto-correction is. Its one of those techy things no one ever asked for and which is above all good for patronizing people and drag them in some prescribed direction. Whenever I type something on my phone it seems to know better than I what I am about to say, and it is always wrong of course. – Ey??

    The other thread I mentioned actually would belong into this forum. Because it is about keyboards, about that 1800-something good old Remington with ~50 keys which users get for to access the 400 or 2000 characters we put in our fonts for them.
  • Nick Shinn
    Nick Shinn Posts: 2,207
    Further to my post of Feb. 5:
    Stretchy
  • Dave Crossland
    Dave Crossland Posts: 1,429
    https://www.monotype.com/resources/case-studies/evri

    Excellent case study on variable fonts for branding, from Monotype!
  • Igor Petrovic
    Igor Petrovic Posts: 297
    Is there a special web format for variable font or classic variable TTF is used on the web?
  • Erwin Denissen
    Erwin Denissen Posts: 300
    No. Similar to non-variable fonts, there are two flavours (quadratic versus cubic bezier curves), but that is taken care of internally in the font resource.

    Variable fonts with quadratic based outlines have extended the common glyf data with several additional tables, but the glyf table remains as default. This way older software (and operating systems) still show the default glyph outlines. The file extension should not matter, but can be either .ttf or .otf (and even .ttc or .otc for collections).

    Variable fonts with cubic based outlines make use of a newly introduced CFF2 table, and there is no backward compatibility. That is one of the main reasons why this format is not popular right now. Such font resources must have a .otf (or .otc) file extension.


    It is good to know that you can't tell the font flavour based on the file extension. font.otf can hold quadratic or cubic bezier curves (or even both, but that is highly discouraged).

    For web fonts, the extension (.woff or .woff2) indicates the specific woff version, and has nothing to-do with the internal outline format.


  • Igor Petrovic
    Igor Petrovic Posts: 297
    Thanks Erwin. If I get it right, classic (static) OTF is for desktop, and it has a corresponding web format (.woff or .woff2) to make it usable on the web.

    But variable font, let's say it's TTF is used as it is on the web (not converted or exported as     .woff or .woff2)?
  • Matthew Smith
    Matthew Smith Posts: 89
    edited November 2022
    Igor Petrovic said:
    But variable font, let's say it's TTF is used as it is on the web (not converted or exported as .woff or .woff2)?
    If you are exporting your variable fonts as TTFs, I would recommend then converting them to woff or woff2 (both for added compression and to slightly deter direct downloads).

    Some type design software (like Glyphs) only has a TTF (quadratic) export option for variable fonts at the moment, so you need to do the woff/woff2 conversion “manually” (with a command line tool for example).
  • Johannes Neumeier
    Johannes Neumeier Posts: 377
    The biggest issue with commercial adaptation of variable fonts is still pricing. I've recently been contemplating if VF pricing should separate between desktop and web use. The desktop version ought to approximate the family price, but the web version could be a factor of the base style price times "a common number of styles in use on a website", let's say ~4. The reasoning being:
    • Desktop users get "all styles" in their menus, so the rationale of paying for an amount equal to the full family seems reasonable
    • Paying for the "full family" for using a couple of web styles seems uneconomical
    • Web developers will prefer one file over x files, and will see the value in performance savings VFs provide
    • Web sites quite often use no more than a couple of different styles of the same typeface
    • Web designs may omit using "intermediary" styles, or optical sizes, etc. if it means buying and loading another font, and instead limit use to a few main styles
    • Average users will not be decompressing VFs for desktop use, so even though they have the full range available in their webfonts, effectively they will be using "select styles" only most of the times
    The purchasing flow for such a distinction is, of course, challenging, but imo this is a more reasonable pricing rationale that would be mutually beneficial.

  • jeremy tribby
    jeremy tribby Posts: 246

    Matthew Smith said:
    If you are exporting your variable fonts as TTFs, I would recommend then converting them to woff or woff2 (both for added compression and to slightly deter direct downloads).

    Some type design software (like Glyphs) only has a TTF (quadratic) export option for variable fonts at the moment, so you need to do the woff/woff2 conversion “manually” (with a command line tool for example).
    Glyphs 3 has supported woff or woff2 compression in variable fonts for a while - but it will result in a binary that is about 5% slightly larger than running `woff2_compress` directly on a TTF. Not sure what it's doing under the hood.
  • Nick Shinn
    Nick Shinn Posts: 2,207
    • Web designs may omit using "intermediary" styles, or optical sizes, etc. if it means buying and loading another font, and instead limit use to a few main styles
    There should therefore be a means of licensing a custom-weights version of a VF for web use. An app on the distributor site could do that, and generate the VF with only the weight instances requested.
  • Erwin Denissen
    Erwin Denissen Posts: 300
    Igor Petrovic said:
    Thanks Erwin. If I get it right, classic (static) OTF is for desktop, and it has a corresponding web format (.woff or .woff2) to make it usable on the web.

    But variable font, let's say it's TTF is used as it is on the web (not converted or exported as     .woff or .woff2)?
    No, I recommend to provide all OpenType fonts (both non-variable and variable) for web use as both .woff and .woff2. You could argue if .woff is still needed, but it won't harm to provide it as well.

    FontCreator supports all (except CFF2) font formats with excellent compression. It even allows you to export subsets of variable fonts.

  • Igor Petrovic
    Igor Petrovic Posts: 297
    edited January 2023
    So I finally have a variable TTF font and would like to compress it to .woff and .woff2 as suggested above. I know that FontSquireel has a Webfont generator.

    Since I am not an expert in this particular matter, I would like to check if is it fine to just pick the "Optimal" option and go with it? I am aiming at the default, most usual scenario.

    I see significant file size compression (120kb TTF / 41kb .woff / 32kb .woff2) so thought is good to ask :)
  • Jens Kutilek
    Jens Kutilek Posts: 361
    FontSquirrel doesn't seem to understand variable fonts and strips out all variability, leaving only the default master in the font. In "optimal" mode it also subsets the font aggressively and just keeps something like a Windows-1252 character set, which may not be what you expect. And it scales the font to 2048 upm and applies autohinting.

    I'd just use woff2_compress from the woff2 repo. Or if you have the Python FontTools installed, you open the font in a Python script, set the "flavor" to woff2 and save it again under a new name.
  • John Butler
    John Butler Posts: 290
    font.otf can hold quadratic or cubic bezier curves (or even both, but that is highly discouraged).
    That sounds like a dare!

Categories