Variable fonts statistics

LeaVerou / css-almanac

Repo for planning & voting on which stats to study

https://projects.verou.me/mavoice/?repo=leaverou/css-almanac&labels=proposed%20stat

34 stars 3 forks source link

Variable fonts statistics #2

Closed LeaVerou closed 3 years ago

LeaVerou commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

I was about to start working on this, but it looks like there's huge overlap with the Fonts chapter: https://github.com/HTTPArchive/almanac.httparchive.org/issues/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 commented 3 years ago

@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 commented 3 years ago

Hi @AbbyTsai,

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

AbbyTsai commented 3 years ago

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

LeaVerou commented 3 years ago

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.