GithubHelp home page GithubHelp logo

Variable fonts statistics about css-almanac HOT 6 CLOSED

leaverou avatar leaverou commented on August 25, 2024 9
Variable fonts statistics

from css-almanac.

Comments (6)

LeaVerou avatar LeaVerou commented on August 25, 2024

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)

from css-almanac.

LeaVerou avatar LeaVerou commented on August 25, 2024

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

from css-almanac.

AbbyTsai avatar AbbyTsai commented on August 25, 2024

@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

from css-almanac.

LeaVerou avatar LeaVerou commented on August 25, 2024

Hi @AbbyTsai,

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

from css-almanac.

AbbyTsai avatar AbbyTsai commented on August 25, 2024

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

from css-almanac.

LeaVerou avatar LeaVerou commented on August 25, 2024

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.

from css-almanac.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.