Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finalize assignments: Chapter 6. Fonts #7

Closed
rviscomi opened this issue May 21, 2019 · 18 comments

Comments

Projects
6 participants
@rviscomi
Copy link
Member

commented May 21, 2019

Section Chapter Coauthors Reviewers
I. Page Content 6. Fonts @davelab6 @zachleat @hyperpress

Due date: To help us stay on schedule, please complete the action items in this issue by June 3.

To do:

  • Assign subject matter experts (coauthors)
  • Finalize peer reviewers
  • Finalize metrics

Current list of metrics:

  • Local vs hosted
  • Popular hosts
  • Font formats
  • Font-Display usage
  • Variable fonts (see below)
    • Latency gains on existing families
    • New modes of typographic expression
    • New ways to make quality text typography
  • how many fonts are loaded but also how many type-faces (families) are used
  • Related, group by weight/style: how many people use italics? those are often left off
  • Font formats (how many people are still using Bulletproof font face syntax?; WOFF2 use specifically)
  • Icon fonts (not sure how to measure this, might show up if we measure popular families?)
  • CSS Font Loading API use?
  • unicode-range use (and range size, perhaps to glean some info on subsetting)
  • uses preconnect for web font cdn? popular preconnect domains?
  • +1 to preload, as Paul said
  • Use of local() in src

Variable fonts:

  • Latency gains on existing families
  • how many pages in the HTTPArchive link to a variable font via @font-face?
    • what percent of total pages use VFs?
    • what is the % growth over some time period (3, 6, 12 months)?
  • of those pages linking to a VF, how many are using the 4 font selectors that select on a variable font family?
  • how many pages link to a VF, but never actually use it?
  • how many pages link to a VF, but never use it beyond old CSS3 values?
  • how many pages use new CSS4 values, like font-weight: 555 and not font-weight: 500?
  • how many pages use @supports to screen for variations capable browsers?
  • is font-stretch usage growing?
  • how often is font-size selecting within opsz axis ranges?
  • which axes are most commonly used today? "top 10 axes"?
  • which axes are used 6-20pt, and which are used 20pt+?
  • which axes are used in concert?

Others:

Top Fonts:

  • top fonts globally
  • top fonts per provider - Google Fonts, AdobeFonts/TypeKit, Cloud.Typography, FontStand, etc
  • top self-hosted fonts
  • what is the bar chart of the number of custom fonts per page?
  • which page uses the most fonts?

Formats:

  • is SVG going away?
  • is EOT going away?
  • is raw TTF going away?
  • how many pages do only WOFF and WOFF2?
  • how many pages do only WOFF?
  • how many pages do only WOFF2?
  • how many pages use color fonts?
  • how many pages use fonts with each of the 4 (SBIX, CBDT, CPAL, SVG) color font formats?

Optimizations:

  • how many pages use each of the font-display properties?
  • how many pages use each of the font preloading properties?
  • how many pages place a single Google Fonts <link> element within <head>?
  • how many pages place a single Google Fonts <link> element as the very first element within <head>?

👉Optional AI (coauthors): Peer reviewers are trusted experts who can support you when brainstorming metrics, interpreting results, and writing the report. Ideally this chapter will have multiple reviewers who can promote a diversity of perspectives. You currently have 1 peer reviewer.

👉 AI (coauthors): Finalize which metrics you might like to include in an annual "state of web fonts" report powered by HTTP Archive. Community contributors have initially sketched out a few ideas to get the ball rolling, but it's up to you, the subject matter experts, to know exactly which metrics we should be looking at. You can use the brainstorming doc to explore ideas.

The metrics should paint a holistic, data-driven picture of the web fonts landscape. The HTTP Archive does have its limitations and blind spots, so if there are metrics out of scope it's still good to identify them now during the brainstorming phase. We can make a note of them in the final report so readers understand why they're not discussed and the HTTP Archive team can make an effort to improve our telemetry for next year's Almanac.

Next steps: Over the next couple of months analysts will write the queries and generate the results, then hand everything off to you to write up your interpretation of the data.

Additional resources:

@rviscomi rviscomi transferred this issue from HTTPArchive/httparchive.org May 21, 2019

@rviscomi rviscomi added this to the Chapter planning complete milestone May 21, 2019

@rviscomi rviscomi added this to TODO in Web Almanac via automation May 21, 2019

@rviscomi rviscomi changed the title [Web Almanac] Finalize assignments: Chapter 6. Fonts Finalize assignments: Chapter 6. Fonts May 21, 2019

@rviscomi rviscomi moved this from TODO to In Progress in Web Almanac May 21, 2019

@obto

This comment has been minimized.

Copy link

commented May 27, 2019

This is a bit of a crossover with #9 but, for sites using Google Fonts... what percentage of them use 1 font, 2?, 3?, 4? Font here meaning a query for family=Roboto:300,400,500,700 would be 4 different fonts.

Would like to see how this relates to overall page speed as well.

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 4, 2019

@davelab6 @zachleat We're hoping to finalize all chapters today. I still need a couple of things from you. Please go to https://github.com/HTTPArchive and accept the invitation to join the Authors team. This ensures that you get author-specific communications, I can assign issues to you, and you can edit issues like this one. Once you've done that, could you edit #7 (comment) and check off the remaining items on the TODO list when you're happy with them? I've updated it with the latest metrics in the brainstorming doc.

@hyperpress

This comment has been minimized.

Copy link
Contributor

commented Jun 4, 2019

@rviscomi - I think we are ready to close this unless we need to wait until invitation accepted. I'm going to close it to stay on schedule, but we can reopen if need be.

@hyperpress hyperpress closed this Jun 4, 2019

Web Almanac automation moved this from In Progress to Done Jun 4, 2019

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 4, 2019

Tentatively reopening this issue for @davelab6 or @zachleat to confirm the metrics. Haven't seen any comments from them so far, so I just want to make sure they're fully on board.

🛎 Dave/Zach, please chime in if there are any other metrics you think we should be looking at. Also please see #7 (comment) for more info about accepting your pending Author team invitations.

@rviscomi rviscomi reopened this Jun 5, 2019

Web Almanac automation moved this from Done to In Progress Jun 5, 2019

@paulcalvano

This comment has been minimized.

Copy link

commented Jun 5, 2019

Would be interesting to show

  • the number of custom fonts per page.
  • Font preloading

@rviscomi rviscomi added the ASAP label Jun 6, 2019

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 6, 2019

@davelab6 @zachleat could you PTAL at your earliest convenience?

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

New modes of typographic expression
New ways to make quality text typography

For these metrics, what exactly is the quantifiable measurement? For example we're hoping to get a list of things that represent the state of fonts: web vs system, top fonts, adoption of optimization techniques, etc.

Hoping to have a list of 10 or so of these kinds of "state of fonts" metrics by the end of today. ❤️

@davelab6

This comment has been minimized.

Copy link

commented Jun 7, 2019

@rviscomi thanks for the pings on this, I've just accepted the invite and will focus on this today.

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

Thanks Dave, I appreciate your time on this!

@zachleat

This comment has been minimized.

Copy link

commented Jun 7, 2019

I’ll just leave my pipe-dream ideas of metrics I wish we could have and y’all can just shoot them down:

I think the ones y’all have above are good.

  • I’d love to know how many fonts are loaded but also how many type-faces (families) are used
    • Related, group by weight/style: how many people use italics? those are often left off
  • Font formats (how many people are still using Bulletproof font face syntax?; WOFF2 use specifically)
  • Icon fonts (not sure how to measure this, might show up if we measure popular families?)
  • CSS Font Loading API use?
  • unicode-range use (and range size, perhaps to glean some info on subsetting)
  • uses preconnect for web font cdn? popular preconnect domains?
  • +1 to preload, as Paul said
  • Use of local() in src

I seriously doubt this is available but I’d love to see info on font file internals too: maybe we can look at OpenType Features from CSS use (though some of these are on by default)? Hinting, kerning, ligature use

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 10, 2019

@davelab6 anything else to add to Zach's list? if not we can close this out.

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 11, 2019

I've added Zach's suggestion to the official list in the top comment. Closing this out.

@rviscomi rviscomi closed this Jun 11, 2019

Web Almanac automation moved this from In Progress to Done Jun 11, 2019

@davelab6

This comment has been minimized.

Copy link

commented Jun 12, 2019

Thanks again for your patience with me on this @rviscomi - hope the below is the kind of thoughts you were seeking.

So, the list at the top was as of this comment:

  • Local vs hosted
  • Popular hosts
  • Font formats
  • Font-Display usage
  • Variable fonts
    • Latency gains on existing families
    • New modes of typographic expression
    • New ways to make quality text typography

For measuring latency gains on existing families, we'd need historical data. We'd then need to start with the list of sites that are using a variable font with a wght axis, and note their latency profile, then look back at historical data and see when the VF was introduced, and what the latency profile was before that.

For measuring an increase in "typographic expression" and "new ways to make quality text typography", I have some proposals for quantifiable measurement. We'd need to know what font-variations-settings properties are in use on the pages that HTTPArchive indexes, as well as the higher level font selectors font-weight, font-stretch and font-size which, when associated with a @font-face variable font, call the VF wght, wdth and opsz axes.

First, we need a list of how many pages in the HTTPArchive link to a variable font via @font-face, and then we get a metric of percent of pages using VFs. This is probably very low as a total percentage, but with historical data we could make a count today and X months ago and then show a % growth over time, which might seem larger ;)

Second, we need to know, of those pages linking to a VF, how many are using the 4 font selectors that select on a variable font family, per page, and per domain. There's likely to be a certain margin of sites linking and not using VFs for styles outside what was available before. It might be interesting to find out, of pages linking to a VF, how many pages use @supports to screen for variations capable browsers and presumably provide fallback typography. To quantify the use of styles newly available, we'd want to know who is using new CSS4 values like font-weight: 555. I also expect font-stretch to have had very little historical usage, and for its use to be climbing rapidly. For font-size, we would need to resolve them all to points, then load the font binaries to read their fvar table data to find out the range of the opsz axis, and then see for each font-size associated with a VF font-family if that size is within the opsz range. If it is then the type designer has designed the font for that usage - "quality text typography" - and if it outside the range, then the type is being scaled without optical adjustment.

Third, if we segment that list of all the font-variations-settings properties into axis:value pairs, and order them by count, we'd know which axes are most commonly used today, and could offer a "top 10 axes" list (or 20, 50, etc.) My guess is that this is going to be a short list, though - less than 100. In that case, we can then take a pass by hand to classify each axis as relevant to 3 sets: expressive typography, text typography, or both. Then, for each set, and for each axis, we can get the parent page URLs, rank by overall site traffic, and take a look at how the axis is being used in practice. We could also segment by font-size if that data is available, so that we know which axes are used 6-20pt, and which are used 20pt+.

Forth, the list of all the font-variations-settings properties can be ranked by number of axes used in concert, and we could chart the ratios of expressive:informative:both axes used together; again, perhaps segmented by size.

For example we're hoping to get a list of things that represent the state of fonts:

  • web vs system

I think "web vs system" and "local vs hosted" are the same concept?

  • top fonts

Just having a rank of the web's most popularly used fonts is interesting; I'd also be interested to see the list segmented by providers - top fonts chosen from the libraries of Google Fonts, AdobeFonts/TypeKit, Cloud.Typography, FontStand, etc - and also the top self-hosted fonts (so subtracting all the mentioned services.)

  • adoption of optimization techniques

I guess this is the next 2 points:

  • Font formats

There hasn't been any new "web font" formats in a long time. What I think may be interesting to see is that SVG and even EOT and raw TTF are going away, replaced with sites only supplying WOFF and WOFF2 formats.

OpenType 1.7 introduced 4 different color font formats, and the colorfonts.wtf site is a great explainer on the details. Seeing a graph of how many sites are using fonts with each of these color tables inside could be interesting - it would mean similarly loading the font binaries to read their table data, although in this case just seeing if certain tables exist.

  • Font-Display usage

Font-Display is great, and it would be very interesting to see which values are being set for that property over time :)

Are there other optimization techniques? Perhaps, placing a single Google Fonts <link> element as the very first element with <head>, as demonstrated but not explicitly recommended on the Google Fonts Getting Started page?

@paulcalvano,

  • the number of custom fonts per page

That also could be quite interesting - especially the tip of the head of that graph... The web's most fontastic page :D

  • Font preloading

This would also be great to include in the survey of the state of optimization techniques adoption.

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Jun 12, 2019

Epic. Thanks @davelab6!

@davelab6

This comment has been minimized.

Copy link

commented Jun 12, 2019

I see @rviscomi added a few more ideas from @zachleat to the top list of metrics. Some comments :)

  • how many fonts are loaded but also how many type-faces (families) are used

Yes, I think that will be interesting; I suspect a lot of people link to fonts in their HTML, but don't actually use them in their CSS (as it were.) However, I believe that only old bad MSIE versions would actually download unused font data, lol

  • Related, group by weight/style: how many people use italics? those are often left off

I suspect that sadly the number of people who do not use any Italics, when they are available, is rather high - perhaps on latency concerns - or perhaps because they see <i> (and even <b>) working "as expected" but actually getting auto-slanted and auto-bolded versions of their regular roman style.

  • Font formats (how many people are still using Bulletproof font face syntax?; WOFF2 use specifically)

There were so many versions of Bulletproof syntax; I wonder that perhaps it might be interesting to catalog a few styles of Bulletproof that are out there; the one with the smiley unicode and such.

As I mentioned, I know nowadays that some people like to just do WOFF and WOFF2 only.

  • Icon fonts (not sure how to measure this, might show up if we measure popular families?)

I'm pretty some FontAwesome has AWESOME popularity and will show up that way. I expect Material Design Icons may also rank high enough to show up that way. A whitelist of known icon font family names would not be to hard to come up with; I'm happy to run down a sheet of even a few thousand @font-face font-family property values and categorize them by hand.

  • CSS Font Loading API use?

Yes, would be great to see how font preloading is being adopted.

  • unicode-range use (and range size, perhaps to glean some info on subsetting)

YES! Range size would be very interesting.

I would be very keen to see some kind of heatmap of how often unicode characters are included in unicode-ranges; the size of unicode can be quite challenging to get one's head around - eg, https://ian-albert.com/unicode_chart/ has a "complete" Unicode chart as a 100mb TIFF (22,017 × 42,807 pixels :)

unichart-printed

  • uses preconnect for web font cdn? popular preconnect domains?

Very interesting!

  • Use of local() in src

Also very interesting!

Again, I think for all these, segmenting the web fonts services from self-hosted folks doing their own thing would be interesting. Google Fonts has been using unicode-range extensively for years and its the underlying/enabling technology for Google Fonts' CJK web fonts, and I am very curious what other people do; whereas the nature of Google Fonts's architecture, with the API on googleapis.com and the TTFs on gstatic.com, means preconnect isn't possible.

@davelab6

This comment has been minimized.

Copy link

commented Jun 12, 2019

@rviscomi I've combed through what I posted and added a more succinct list of the metrics I proposed to the top of this issue. Please edit further as needed :)

@davelab6

This comment has been minimized.

Copy link

commented Jun 12, 2019

For font-size, we would need to resolve them all to points

I actually don't think I've ever seen that stat anywhere - a bar chart showing the most popular pt sizes on the web. That maybe belongs in another chapter?

@davelab6

This comment has been minimized.

Copy link

commented Jun 12, 2019

@zachleat thanks for those ideas! Sorry I initially missed you were the author of the points Rick added to the top comment =)

@rviscomi rviscomi removed the ASAP label Jun 19, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.