search

HTTPArchive / almanac.httparchive.org

HTTP Archive's annual "State of the Web" report made by the web community
https://almanac.httparchive.org
Apache License 2.0
610 stars 168 forks source link

Fonts 2020 #902

Closed foxdavidj closed 3 years ago

foxdavidj commented 4 years ago

Part I Chapter 4: Fonts

Content team

Authors Reviewers Analysts Draft Queries Results
@raphlinus @malchata @RoelN @notwaldorf @mandymichael @svgeesus @rsheeter @jpamental @davelab6 @AbbyTsai Doc *.sql Sheet

Content team lead: @jpamental

Welcome chapter contributors! You'll be using this issue throughout the chapter lifecycle to coordinate on the content planning, analysis, and writing stages.

The content team is made up of the following contributors:

New contributors: If you're interested in joining the content team for this chapter, just leave a comment below and the content team lead will loop you in.

Note: To ensure that you get notifications when tagged, you must be "watching" this repository.

Milestones

0. Form the content team

1. Plan content

2. Gather data

3. Validate results

4. Draft content

5. Publication

zachleat commented 4 years ago

If @RoelN has bandwidth he would be an excellent author here

rviscomi commented 4 years ago

Thanks @zachleat! Would you also be interested in being a peer reviewer this year?

@RoelN any interest in taking on this chapter or recommendations for other good candidates?

tunetheweb commented 4 years ago

@mandymichael and @jpamental do great things in the variable fonts space and would love to have either (or both) of them contribute if interested.

malchata commented 4 years ago

I'd be happy to work on this in a review or even author capacity, depending on the need. There's a lot of talent already teed up for this space, but let me know if I can help.

RoelN commented 4 years ago

Thanks very much for considering me! 💖 I'd love to, but I'd also be happy to give up (or share) my seat if this means a more diverse mix of authors. :-)

jpamental commented 4 years ago

I'll say the same as @malchata & @RoelN - I'd love to contribute in any way, as long as it doesn't preclude more diverse voices from being heard!

rviscomi commented 4 years ago

@mandymichael @notwaldorf would either of you have any interest in authoring this chapter?

rviscomi commented 4 years ago

@malchata @RoelN @jpamental thanks for your consideration. I'll put you all down as reviewers for now and we can change it to authors as needed.

notwaldorf commented 4 years ago

I haven't authored anything in a while, so I would love to do a co-authoring adventure (or, if someone tells me specifically what to write about, i can try that too). I wouldn't want to take anything about variable fonts away from @mandymichael though :)

rviscomi commented 4 years ago

Great, thanks @notwaldorf! I've added you as an author for this chapter. Can I also put you down as the content team lead? You'd be the point person for keeping the chapter on schedule. You're also free to add people as coauthors as needed.

A few resources to get you started:

notwaldorf commented 4 years ago

Ooooh that sounds like a lot of responsibility and self-organization that I'm not really sure I can be successful at (I proposed a co-authoring adventure with structure and unless I copy paste last year's, it feels like a solo-authoring adventure and chaos 😅 )

rviscomi commented 4 years ago

No worries! It's great to have you on board in a coauthor capacity.

📟 @malchata @RoelN @jpamental @mandymichael would any of you like to step into the content lead role and coauthor with Monica?

LeaVerou commented 4 years ago

I'm the content lead for the CSS chapter and we were wondering if we can study variable fonts usage or it would be more suitable here. Seemed like a good idea to ask you folks so we can coordinate.

I would also nominate @svgeesus as a co-author or reviewer, if nominations are not closed!

paulcalvano commented 4 years ago

Hi @LeaVerou. You should be able to study variable fonts. There was a section on it in the 2019 Fonts chapter, so there are some existing queries we can work with. https://almanac.httparchive.org/en/2019/fonts#variable-fonts-are-the-future

Example queries:

RoelN commented 4 years ago

This is so exciting :-)

@LeaVerou I think there will be some overlap between CSS and Fonts if you look at the typography side of fonts (as opposed to tech/performance), but I think that'd eventually might feel better at home in the Fonts chapter. Because it'll be a mix of what the browser automatically does, based on the font, and what the CSS authors enable/disable on top of that.

For instance, you could take a look at how many OpenType features are present in fonts (this query implies we can look into that, I hope!), and which ones will be enabled by browser by default, and which ones are actively turned on in CSS.

Not sure this is the place, but here's some initial notes I took, maybe this helps with brainstorming:

- How many optional OpenType features are enabled in CSS?
  - Gives insights in how much enhanced/fancy/non-standard typographic features are used, e.g. tabular figures
  - And how much of it is actually used, and how much is served unused?
  - How many OpenType features are in the fonts anyway?
  - Are "intelligent" fonts being used, that adapt to the screen via mandatory OT features? E.g. `locl`
- How many variable fonts with `opsz` axes are being used?
  - This axes gets used by the browser automatically, making the overall type nicer.
- How many variable fonts are out there
  - And how much of their potential is used? E.g. full width range, or still "regular and bold"?

Edit: I'd be more than happy in a role as reviewer or what-to-write-about-helperouter.

notwaldorf commented 4 years ago

Then, since it's looking like this might be of interest to the CSS folks, i'm 100% ok with bailing and/or just reviewing, and giving my spot to @svgeesus!

jpamental commented 4 years ago

I'd love to be part of the team (content lead if that's needed), ideally co-authoring with you @notwaldorf and maybe @mandymichael ? I think with input from @LeaVerou and @svgeesus it would be a really well-rounded group including perspectives from fonts, design, development, and CSS. It would be wonderful to work with you and Mandy.

rviscomi commented 4 years ago

Ok thanks everyone, I've set @jpamental as the team lead and coauthor along with @notwaldorf, supported by @malchata and @RoelN as reviewers. This is totally flexible, so feel free to reassign as needed, but it's good to have something firmed up to get started on content planning.

@mandymichael @svgeesus @LeaVerou let us know if you're interested in contributing, either as coauthors or reviewers, it'd be great to have you!

Here's your draft doc where you should do all of the planning/writing. I don't have everyone's email address, so click "request edit access" to be able to edit/comment, and write your name/email in the Content Team section so people can @ your email in the comments to notify you.

LeaVerou commented 4 years ago

Thank you for the invitation @rviscomi! I don't think I have enough expertise on fonts to contribute, and I have my hands very full with the CSS chapter.

foxdavidj commented 4 years ago

Hey @jpamental, just checking in:

  1. How is the the chapter coming along? We're tying to have the outline and metrics settled on by the end of the week so we have time to configure the Web Crawler to track everything you need.
  2. Anything you need from me to keep things moving forward?
mandymichael commented 4 years ago

Yikes, I just saw this, happy to help, however, but looks like you are all good! Apologies I haven't been checking github much.

rviscomi commented 4 years ago

@mandymichael glad to hear you're interested! I'm sure there's still room for you to contribute. We you thinking of coauthoring or reviewing?

davelab6 commented 4 years ago

I'd like to volunteer as a coauthor :)

mandymichael commented 4 years ago

@mandymichael glad to hear you're interested! I'm sure there's still room for you to contribute. We you thinking of coauthoring or reviewing?

I have never coauthored before so I'd be happy to review :)

svgeesus commented 4 years ago

I somewhat have my hands full as co-author on the CSS chapter, but there is of course a fair bit of overlap between CSS and Fonts and I am interested in both. How about as reviewer?

svgeesus commented 4 years ago

I would be interested to see what percentage of websites use webfonts, (yes, super high globally) sorted by either language, or country. This is because CJK languages (Chinese, Japanese, Korean) need much larger webfonts. But I have not seen good data on whether this means they are not using webfonts at all, or are using them a little, or what.

rviscomi commented 4 years ago

@notwaldorf @mandymichael @svgeesus thank you all for your interest, I've added you three as reviewers. @davelab6 it's great to have you as a coauthor!

@svgeesus your last question sounds similar to some research I did last year, which might be useful for this chapter: https://discuss.httparchive.org/t/how-does-web-font-usage-vary-by-country/1649. Also font related: https://discuss.httparchive.org/t/what-are-the-most-and-least-popular-numeric-font-weight-values/1732.

@tjmonsi would you be interested in joining the Fonts chapter team as an analyst again this year?

tunetheweb commented 4 years ago

Hey all! Another stat to consider: We were chatting recently on the Web Performance slack about the use of the likes of Google Fonts and the 2019 chapter doesn't make it exactly clear what percentage of sites actually use that. It says that 75% of web fonts are Google Fonts for example, but no indication if that also means 75% of web sites use that, or if some sites use 10 different web fonts and some none, so the % of sites is much smaller. Would be nice to include that stat this year.

foxdavidj commented 4 years ago

@jpamental A lot of great conversation going on here which is awesome, but the official chapter doc could use some love. Think we can have the outline wrapped up by the end of the week so we have time to set up our Web Crawler?

jpamental commented 4 years ago

Hi @obto - I'll do my best! I've been a bit swamped this week but will dig into what's there and what was done last year as soon as I can. It might spill into the weekend, but after this week it will be easier to schedule more regular time.

Really excited to have this crew on board. I'm totally going to keep asking @notwaldorf and @mandymichael to contribute along with @davelab6 !

svgeesus commented 4 years ago

if CJK fonts are so huge, how does the median number of font KB compare across countries? We should expect to see Chinese, Japanese, and Korean websites have more font bytes, right?

Not necessarily; I would expect that most sites don't use webfonts (because a single one is huge) and the ones that absolutely have to, use them and take the page weight hit. So the distribution of page weight hit would be different to non-CJK sites. The median is not a good measure of that.

By the way, the typical work-around for "web fonts are prohibitively huge" is "get everyone to install a font locally, put that in the font stack". Which used to be fine, but Safari recently stopped loading locally installed fonts that aren't on the default OS install, and there is an open issue on whether other browsers should do the same. So it is timely to get some hard data on that.

svgeesus commented 4 years ago

Having now read Fonts 2019 it does seem that the 75% use of Google Fonts swamps analysis. I suspect that for 2020, dividing each analysis into "Google Fonts"and "non-Google Fonts" would give an interesting compare and contrast.

It doesn't surprise me that color font usage was so low; not because color fonts aren't good, but because browsers have been very slow to implement CSS restyling of font colors and thus, changing the colors means editing the font itself: a significant barrier to use, and also a fragmentation of cache consistency. Still, it would be useful to see if the usage has changed from 2019.

foxdavidj commented 4 years ago

@jpamental No worries. The main reason we have this week set as the deadline is because sometimes we come across metrics that require custom code (custom metrics) to be written and added to the Web Crawler -- which starts running on August 1st.

So if getting the chapter outline looks tough to complete... putting together a list of new metrics we didn't look at last year, that you're considering looking at this year, would be a big help.

svgeesus commented 4 years ago

An older report, perhaps 2015 or 2016, had a cumulative graph showing web font usage rising from 1% in the end of 2010 to 50% across all sites in the beginning of 2015. The link no longer works.

http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Feb+15+2015#perFonts

Five years on, and with the 10th anniversary of the first WOFF 1.0 working draft this year, it would be great to recompute that and find what the usage is now.

rviscomi commented 4 years ago

@HTTPArchive/analysts this chapter needs your help!

AbbyTsai commented 4 years ago

If there is still a fun seat availabe to newbie in sql, then I'd love to jump in as analyst. ^y^

rviscomi commented 4 years ago

Yes please, thanks for stepping up @AbbyTsai!

You can join the #web-almanac-analysts channel in Slack and reach out to @paulcalvano or myself if you have any questions.

rsheeter commented 4 years ago

Happy to help out if I can.

@svgeesus, for web font usage it looks to me like 76% of pages load (though not necessarily use) fonts based on the % of pages with 0 font requests having an upper bound of 24% in the requests/page histogram on https://almanac.httparchive.org/en/2019/fonts#how-many-web-fonts-are-too-many. That doesn't tell you % sites (how do we define site? can/should we care about size/popularity?) but perhaps the underlying dataset has something that could reasonably be used to represent "site"

rsheeter commented 4 years ago

On a per-page basis I got this from the bigquery tables (ty @rviscomi for fixing my original query)

Web font usage

The data and query can be seen in https://docs.google.com/spreadsheets/d/1N5oaO5Sgod70VSplx521E7lkiPww97cOxd7iBD7GLkc/edit?usp=sharing.

rviscomi commented 4 years ago

📟 @jpamental @davelab6 @malchata @RoelN @notwaldorf @mandymichael @svgeesus @rsheeter @AbbyTsai sorry to ping everyone. This chapter is still missing an outline. If anyone has any ideas, please drop them in the doc to get it moving. We were hoping to have it completed by July 20 😬. The most important thing is getting any needed custom metrics implemented by July 27 before the August crawl begins, and it's blocked on the outline setting the scope of the chapter.

@AbbyTsai @RoelN @mandymichael I don't have your email addresses so please "request edit access" to be able to comment/edit.

Thanks everyone for helping to keep us on schedule!

jpamental commented 4 years ago

I've spent some time on the outline, which has started surfacing some questions that would be good to investigate. I'll get those questions more complete later today for proposed new metrics.

AbbyTsai commented 4 years ago

Hi, Everyone, It's happy to join fonts family. First, a little bit about me, My practice journey just start here with all your warm support. I hope you don't mind if find me fresh like a paper. I have drawn some rough metrics to invite all your interesting thoughts together in. Feel free to add or revise it. Thank you.

davelab6 commented 4 years ago

I was on vacation last week, I've blocked out time tomorrow to work on this :)

davelab6 commented 4 years ago

Jason and I met today briefly to sync up, and will meet again this Friday at 2pm EST. Abby and everyone, you are welcome to join!

foxdavidj commented 4 years ago

@jpamental @AbbyTsai for the two milestones overdue on July 27 could you check the boxes if:

Keeping the milestone checklist up to date helps us to see at a glance how all of the chapters are progressing. Thanks for helping us to stay on schedule!

RoelN commented 4 years ago

Hi all, apologies for my absence, I had a much needed vacation. Added some comments to the doc, hope it's not too late.

mandymichael commented 4 years ago

Is there anything that would be helpful for me to look into for this? I'm unsure how to best help out here?

AbbyTsai commented 4 years ago

Hi, everyone, here might love to have your thoughts in the roadmap on how to scan the following specific fonts with stylesheet or html page: font subsetting, icon_fonts, VF+animation. (Special thanks Rod, Dave, Rick for helping collection & clarficiation dataset) 

RoelN commented 4 years ago

Re: icon fonts, for Type-X we look at classnames to guess if an icon font is used there. These classnames were gathered from popular icon font libraries (e.g. FontAwesome). This is hardly foolproof though, and you'd probably catch a lot of noise if you use this method.

Looking at font name metadata might be more reliable, but that involves looking at popular icon fonts and see which metadata they use.

Re: VF animation: looking for font-variation-settings inside @keyframes at-rules, and looking for transition: font-variation-settings. Much harder probably is looking for JavaScript that directly animates font-variation-settings.

AbbyTsai commented 4 years ago

Thanks Roel for the nice explanation. May I then say that FontAwesome hosts merely icon service which means gathering its metadata might catch them all.

Moreover, those topics still look forward to anyone of folks adding your voice into. font subsetting, icon fonts, VF+animation.