2020 Fonts chapter #1643
2020 Fonts chapter #1643
Conversation
This adds a first draft of text, as well as images, for the fonts chapter. There's quite a bit more text, including some written by Jason, that hasn't been folded into this text. But I think it makes sense to get this in and then propose refinements on top of it. Closes #902
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 37.5%, saving 438.00 KB.
476 images did not require optimisation. Update required: Update image-actions configuration to the latest version before 1/1/21. See README for instructions. |
|
Re the images, I plan to run image optimization as soon as we're confident on the images. Please review the content of the images now (a handy link is https://github.com/HTTPArchive/almanac.httparchive.org/tree/fonts/src/static/images/2020/fonts), as I think they're mostly final except for 04_11a, which is in the process of being redone. |
Calibre does a decent enough job of optimising and has already done that for you, though I find tinypng.com does a better job. Any chance you could rename the images to be of the format fonts-web-fonts-usage.png? Having the figure number at the beginning can be confusing if we prefer it or move about, we’ve been trying to put chapter name at the beginning rather than number, and try to use dash instead of underscore as easier to read in a URL bar. |
This is mostly renaming as requested. This also uses the new "popular typefaces" data as generated by rick.
|
Ok, I think that latest commit renames the fonts successfully, and updates "popular fonts" and "top countries". |
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 41%, saving 78.22 KB.
489 images did not require optimisation. Update required: Update image-actions configuration to the latest version before 1/1/21. See README for instructions. |
src/content/en/2020/fonts.md
Outdated
| ) | ||
| }} | ||
|
|
||
| The single top country is South Korea, which is not all that surprising given their consistently high internet speeds and the fact that Korean (Hangul) fonts are almost an order of magnitude larger than Latin. As we'll see in the "popular typefaces" chapter, Korean fonts are two of the top 14 most popular, further evidence they really like web fonts. Web font usage in Japan and Chinese-speaking countries is considerably lower, likely because CJK fonts are even larger and connections are not as fast. |
There was a problem hiding this comment.
High speeds and low latency (the latter being more important as speeds drop).
There was a problem hiding this comment.
"because CJK fonts are even larger" can't really say that Chinese, Japanese and Korean fonts are even larger than Korean :)
Suggest instead "because Chinese and Japanese fonts are vastly larger (the median font size being 10,000 times larger than the median Latin size).
There was a problem hiding this comment.
Suggest adding "This means web font usage in Japan is very low, and usage in China is effectively zero. Although recent developments may make web fonts usable in both countries, within a couple of years."
There was a problem hiding this comment.
10,000 times larger? I don't see how that can be. I'm going to put "over 100" in as a placeholder for now, but can refine it based on data.
There was a problem hiding this comment.
@raphlinus I think 1,000x is safely on the mark (at least): I've seen many CJK web fonts in the 20MB+ range for a single instance. Might be reasonable to say 'on average several hundred times larger' to emphasize the scale of the difference.
There was a problem hiding this comment.
How do we feel about "the median font size can be 1000 times or more larger than the median Latin size"?
There was a problem hiding this comment.
10,000 times larger? I don't see how that can be. I'm going to put "over 100" in as a placeholder for now, but can refine it based on data.
Good catch, the figure was indeed based on data but I was calculating a percentage. 1,834,496 * 100 / 17,660 = 10,388 %
"The TrueType or OpenType fonts used for alphabetic languages had a median size of 17,660 bytes, with a spread from 15,784 bytes (5th percentile) to 184,152 bytes (95th percentile). The median size once WOFF2 compressed was 8,360 bytes"
"The TrueType or OpenType fonts used for CJK languages had a median size of 1,834,496 bytes, with a spread from 16,832 bytes (5th percentile) to 5,524,2080 bytes (95th percentile). The median size once WOFF2 compressed was 768,492 bytes."
https://www.w3.org/TR/2020/NOTE-PFE-evaluation-20201015/#font-langtype
|
Figures updated (including descriptions (except last 1.5 figures as ran out of time) and fallback images). [Details here])https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Figures-Guide#google-sheets) on how to add more in the correct format (the video is a good guide). Latest version staged here: https://20201206t121332-dot-webalmanac.uk.r.appspot.com/en/2020/fonts |
|
I think maybe I misunderstood the terminology of 'local' vs 'external'—I took that to mean font resources hosted on the same domain (self-hosted) versus with an external service. If that is the case, then I think we can definitely include more from the data about self-hosting versus services, and what the differences are (around page 5 in the Google doc draft) @AbbyTsai or @rviscomi can you confirm if 'local' refers to 'self-hosted on the same domain' or the actual use if 'local(...)' in the @font-face declaration? |
There was a problem hiding this comment.
Left some comments, a few of them about the language being used. Sometimes things sounded weird or stuffy to me as a non-native speaker. If the sentence works and you feel differently, feel free to ignore these comments :-)
Very excited to see this article, great work @raphlinus et al!
src/content/en/2020/fonts.md
Outdated
|
|
||
| ### Serving with a service | ||
|
|
||
| It likely comes as no surprise that Google Fonts remains by far the most popular platform, but the percentage use has actually dropped almost 5% from 2019 to about 70%. Adobe Fonts (formerly Typekit) has dropped about 3% as well, but Bootstrap usage has grown from about 3% to over 6% (in aggregate from several providers). It’s worth noting that the largest provider for Bootstrap (BootstrapCDN) also provides icon fonts from FontAwesome, so it may be that it’s not Bootstrap itself but rather older versions also referencing icon font files that is behind the rise in that source data. |
There was a problem hiding this comment.
It feels as if Bootstrap is presented as a service similar to Google/Adobe Fonts, which is not the case. Also I wonder about this, as newest versions of Bootstrap focus on having a "system fonts" font stack, and are pushing SVG icons over icon fonts. So if anything, I would've expected a drop in font usage, certainly not doubling usage. I don't think FontAwesome is pointing to Bootstrap's CDN to download their font (they use their own CDN in examples, but do offer a "CDN picker" for customers which I haven't tried). Either way, Bootstrap's rise seems suspicious?
Indeed FontAwesome can use the Bootstrap CDN: https://www.bootstrapcdn.com/fontawesome/
There was a problem hiding this comment.
I'm curious about it too, but after seeing that icon fonts were being served from the same domain, my hunch is that it's related to those somehow, either from older versions of Bootstrap or just some other common theme system referencing those icon fonts.
src/content/en/2020/fonts.md
Outdated
|
|
||
| There are two other interesting inferences from this data. One might expect the `block` setting to have a significant impact on FCP, especially on mobile, but in practice the effect is not that large. That suggests that waiting for font assets is seldom the "long pole in the tent" for the webpage as a whole, though it would certainly be a major. The `auto` setting (which is also what you get if you don't specify it) looks a lot like `block`; though it's technically up to the browser, [the default seems to be blocking](https://nooshu.github.io/blog/2020/02/23/improving-perceived-performance-with-the-css-font-display-property/). | ||
|
|
||
| Finally, the data do not support the use of the `fallback` setting, as there is no actual empirical performance gain compared with `swap`. Fortunately, it only is used by about 1% of pages. |
There was a problem hiding this comment.
Finally, the data do not support the use of the
fallbacksetting, as there is no actual empirical performance gain compared withswap.
I'm having trouble parsing that sentence 😅 Our data doesn't see use of fallback? (Why not?) Or are we deducting usage based on the performance, and swap is too similar to tell them apart?
There was a problem hiding this comment.
Again, I'll just rewrite this to be clearer.
I've done my best to respond to feedback from @RoelN
|
@jpamental just to give you advanced warning regarding your commit to change quote marks, the Web Almanac style guide actually enforces straight quotes for everything for consistency. I know I know they're inferior, please see the discussion in #1485 if you'd like to add your two cents. |
|
Understood @rviscomi - Just pushed a commit reverting them all back to straight (and have commented on the issue you linked - thanks!) |
A few improvements to the text, trying to accommodate all feedback.
I didn't get feedback on this from the PR, but think it's an improvement.
Adopt Roel's suggestion on EOT Co-authored-by: Roel Nieskens <RoelN@users.noreply.github.com>
I also find this confusing. On the one hand, people use local to mean "fonts hosted on the same server as the content", as opposed to a font hsting CDN. On the other hand, CSS Fonts talks about local in the sense of locally installed on the client machine, as opposed to downloaded. |
I would personally use "self-hosted" and "local" and think we should use this to avoid ambiguity. do we need @AbbyTsai to confirm any stats here? |
| It likely comes as no surprise that Google Fonts remains by far the most popular platform, but the percentage use has actually dropped almost 5% from 2019 to about 70%. Adobe Fonts (formerly Typekit) has dropped about 3% as well, but Bootstrap usage has grown from about 3% to over 6% (in aggregate from several providers). It's worth noting that the largest provider for Bootstrap (BootstrapCDN) also provides icon fonts from FontAwesome, so it may be that it's not Bootstrap itself but rather older versions also referencing icon font files that is behind the rise in that source data. | ||
|
|
||
| Another surprise in the data is the rise in fonts being served by Shopify. Growing from roughly 1.1% in 2019 to about 4% in 2020, there has clearly been a significant uptick in usage of web fonts by sites hosted on that platform. It's unclear if that is due to that service offering more fonts that they host on their CDN, if it's growth in use of their platform, or both. However, the increase in usage of both Shopify and Bootstrap represent the largest amount of growth other than Google Fonts, making it a very noticeable data point. |
There was a problem hiding this comment.
Found somewhere on which comparison between 2020 and 2019 is on a different assumption. 2020 is based by the percent of pages, while 2019 is the percent of requests (refer to 2019. figure2. top 20 font hosts). I then re-run the font host ranking by percent of pages as of 2019. Here's the update sheet, as it may not see a significant variance greater than 1%, only Bootstrap decreased and Shopify increased roughly 1%. PR#1669
I would certainly appreciate verifying that in this case 'local' is referring to 'specifying locally installed fonts' rather than as @svgeesus put it 'fonts hosted on the same domain' (self-hosted). Ideally I would love to see stats on both. It's often seemed true that self-hosting ends up being faster than using a service (and is called out as 'better' for best page loading performance). Seeing some data on a larger scale that would help uncover the truth of that maxim would be interesting: does the data show if there is a significant difference in FCP and LCP times for self-hosted fonts vs using a service (Google Fonts, BootstrapCDN, Fonts.com, etc). I realize it may not be possible to do this year, but I think it's very worth exploring if we can. |
Saying that, for example, a page requesting local fonts only within the domain itself would be in the “local” category, while a page only requesting fonts from outside domain would then be put in the “external” category. Otherwise, it would be placed in the “both” category, in which a page requesting fonts locally and outside domain as well. Moreover, How would you measure these services (Google Fonts, BootstrapCDN, Fonts.com, etc) to those categories? |
Co-authored-by: AbbyTsai <44442451+AbbyTsai@users.noreply.github.com>
Co-authored-by: AbbyTsai <44442451+AbbyTsai@users.noreply.github.com>
Co-authored-by: AbbyTsai <44442451+AbbyTsai@users.noreply.github.com>
|
Ok, I believe I'm up to date on the suggestions and discussions, these are fairly minor tweaks. I don't see a clear action item for the "local" discussion, it seems like this might just be an internal confusion and the text is good enough, but I'm open to suggestions otherwise. Is there anything else that's on my plate here? |
|
OK I'm gonna merge this when the tests complete and copy edit it. Will have another look at local thing then. Thanks all for the progress so far - nearly there now! If you could keep an eye out for a Copy Edit pull request to review that would be great. Hopefully will get it done this evening before launch but got a lot to do so not promising anything! |
This adds a first draft of text, as well as images, for the fonts
chapter.
There's quite a bit more text, including some written by Jason, that
hasn't been folded into this text. But I think it makes sense to get
this in and then propose refinements on top of it.
Closes #902