Variable fonts statistics

[LeaVerou]

• How many websites use variable fonts?
• What variation axes do they declare/use?
• Do they mostly use the low-level font-variation-settings, or the higher level properties (where available)?
• What custom axes do they use?

[LeaVerou]

Suggested algorithm (@svgeesus please review):

• Measure usage of font-variation-settings by axis, both as a descriptor and as a property.
• Measure usage of two-value font-weight, font-style, font-stretch descriptors in @font-face
• Measure usage of font-weight that is non divisible by 100, font-style with oblique <angle>, font-stretch with percentages not divisible by 12.5%, or outside the [50%, 200%] range
• For @font-face and CSS rules with the above, record the font-family (to find most popular variable fonts)

[LeaVerou]

I was about to start working on this, but it looks like there's huge overlap with the Fonts chapter: HTTPArchive/almanac.httparchive.org#902

There is some earlier discussion in there confirming this. I'm about to close this issue, but want to make sure that everything we planned to study is accounted for in Fonts.

cc @rviscomi @AbbyTsai @jpamental @davelab6

[AbbyTsai]

@LeaVerou woo, Happy to work the interaction of css and fonts chapters.
Some of them seem may be combined to existing fonts queries,
others would love to have your warm hands in together,
as I'm just new to the field(js, sql, etc) and couldn't start the journey without samples . Thank you.
1.How many websites use variable fonts? see fonts_04_14, payload, table_sizes.var.axisCount >0
2.What variation axes do they declare/use? see fonts_04_16, font-variation-settings
3.Do they mostly use the low-level font-variation-settings, or the higher level properties (where available)? need sample
4.What custom axes do they use? need sample

[LeaVerou]

Hi @AbbyTsai,

Happy to help! What do you mean by samples? Samples of CSS?

[AbbyTsai]

@LeaVerou , would like to have both. (js+sql) if possible. thank you.

[LeaVerou]

As much as I would love to, I'm afraid I don't have time to write queries for other chapters, since we already have ~40 metrics to calculate here. However, I would be happy to provide help with the algorithm or JS to whomever needs it.
Looking at the content outline it appears that pretty much all of these metrics are planned for the Fonts chapter, so I'm gonna go ahead and close this.