Copyedit of Fonts 2020 chapter #1816

tunetheweb · 2020-12-20T23:30:30Z

Makes progress on #1432 and #902

Made the following changes:

Renamed "local" to "self-hosted" to avoid confusion with local()
Corrected variable font usage query - had mobile and desktop mixed up so desktop and mobile much more inline. Also query looked wrong anyway (though must results correct except for FCP/LCP so suspect query saved wasn't the one run)
Added featured quote and stats - picked ones I thought were interesting but feel free to change
Move part of intro to Conclusion as seemed to be summing up rather than introducing
Added a couple of big numbers (for Google Fonts and Variable Fonts)
Added charts for font hosting options
Renamed and reworded local section as this actually refers to self-hosted
Added small paragraph on local
Corrected "last content pain" to "Largest Contentful Paint"
Sorted font-display charts by performance
Changed font labels to san-serif
Other standard edits
Removed "Unedited" tag

Latest version staged here: https://20201220t232911-dot-webalmanac.uk.r.appspot.com/en/2020/fonts

Also have some comments/TODOs for authors to look over that I'll raise separately.

tunetheweb · 2020-12-20T23:31:25Z

src/content/en/2020/fonts.md

 There's a great thread on [web font usage by country](https://discuss.httparchive.org/t/how-does-web-font-usage-vary-by-country/1649) on the HTTP Archive discussion forum.

+{# TODO (authors) - this sentence is a bit hanging our there. What's great about this thread compared to what we are covering here? Is it that you're wanting to credit that thread as the basis for the queries used by this chapter (if so say so), or you believe they have more insights than you have here (again in which case say so, but reading through the thread doesn't seem that much more, and even if there was could it not be summarised more here?), or is it you're wanting to direct people to there for further discussions? #}
+


@raphlinus / @jpamental thoughts?

tunetheweb · 2020-12-20T23:31:46Z

src/content/en/2020/fonts.md

+When viewing commercial services such as Adobe (`use.typekit.net`) or Monotype (`fast.fonts.com`) it is interesting to note that on desktop they tend to be as fast or slightly faster than Google Fonts, but are noticeably slower on mobile. Conventional wisdom has generally held that the tracking scripts used by those services substantially slow them down, but that is apparently less an issue today than it has been in years past.

-The use of local is [controversial](https://bramstein.com/writing/web-font-anti-patterns-local-fonts.html), as it can save bytes, but it can also yield bad results if the locally installed version of the font is outdated. As of [November 2020](https://twitter.com/googlefonts/status/1328761547041148929?s=19), Google Fonts has moved to using local only for Roboto on mobile platforms, otherwise the font is always fetched over the network.
+{# TODO authors - Do we want to add a note to say that we are measuring site performance and not necessarily font hoster performance? It could be that Adobe sites are all just pooor on mobile and it's nothing to do with their hosting platform #}


@raphlinus / @jpamental thoughts?

I think there is still some confusion about what was mean in the data and in the writing about 'local'. If I understand @AbbyTsai 's response when I asked, I think that the data analyisis was looking at local() pointers in the @font-face declaration, indicating a reference to a locally installed font on the user's system, versus 'self-hosted' web fonts that are on the same domain as the website (as opposed to coming from Google Fonts or Monotype/Adobe/etc).

I think that @raphlinus interpreted this to mean locally installed fonts on the user's system, but I had originally thought it was about self-hosting. So cleaning this question up is important to know which way to clean up the writing.

I would really like to make sure we're looking at self-hosted fonts (or at least ones served from the same TLD as the site itself) versus services. That's the more pertinent question in my mind, and looking at the FCP/LCP data around which is better for overall performance is relevant to many developers, especially since the local() reference to installed fonts is generally going away.

I looked at the query and confirmed it was looking at fonts hosted on this domain (note - not necessarily same TLD). I updated the query text as part of this PR to make this clearer. I've basically replaced all references to "local" in this chapter, in the queries, and in the graphs with either "self-hosted" or "local()".

So yes the current text in production is incorrect as it assumes it's talking about "local()" when in fact it's referencing data about self-hosted. This has been cleared up in this edit.

Great. I'll look at it again this weekend, as more of what I had written in the original draft is relevant in that case. (Especially the comparison of service performance: that's long been a bit of a contentious topic, as it's often tied to performance impact of page-view tracking scripts used by services like Adobe and Monotype)

I'm actually about to do a release now so if you're happy with the other edits are you OK merging this as is, and then coming back to it this weekend?

That way we at least fix the current issue where we are presenting incorrect data due to the local issue. Also the data on variable fonts also looks incorrect as looks like a mix up between desktop and mobile when calculating the percentage. This has also been fixed in this PR.

I will leave the TODOs in place to be addressed later, so they can easily be found.

Can either leave the unedited tag on there, or I'm also comfortable removing it, since it has been edited now – even if there is some more additional text to follow.

WDYT?

I'm OK with it going out, but let's leave the 'unedited' tag until next week if that's ok. I want to have a chance to read over it all more closely, and we're moving tomorrow (!!!) so I don't have time to really look at it today. (only going one street over, but still... BOXES!)

Done. Will merge this when the tests complete.

BTW, FYI I did keep your text - just moved it to it's own local() section: https://20201220t232911-dot-webalmanac.uk.r.appspot.com/en/2020/fonts#local-isnt-always-better. The changes in GitHub don't make that entirely clear!

tunetheweb · 2020-12-20T23:32:38Z

src/content/en/2020/fonts.md

+It wouldn't be sound to infer causality between hosting strategy from the above data, as there are other variables that may confound the relationship. But, putting that aside, we find that adding the self-hosting fonts doesn't always lead to better performance. Hosted font solutions often perform a number of optimizations that may not always be replicated when self-hosting.
+
+{# TODO Authors - Review above alterations #}


@raphlinus / @jpamental I added a last sentence here. Let me know if not OK with that.

tunetheweb · 2020-12-20T23:33:10Z

src/content/en/2020/fonts.md

+Variable fonts are certainly one of the biggest stories this year. They're seen in 10.54% of desktop pages, and 11.00% of mobile. That's up from an average of 1.8% last year, a huge growth factor. It is not hard to see why their popularity is increasing – they offer more design flexibility, and also potentially smaller binary font sizes, especially if multiple styles of the same font are used on the same page.
+
+{# That's huge usage! Any ideas what's driven it? It would appear no variable font has any where near that usage so how come total usage is so high? Has any particular service or platform turned this on by default? #}


@raphlinus / @jpamental thoughts?

The usage is largely driven by Google Fonts: they've started serving variable versions of a number of fonts where appropriate, without the web authors every knowing or having to do anything! (Which is a fantastic proof of the viability of the technology in my opinion)

Any time a site has enough different weights in use, GF will serve the variable version instead of static ones. They started doing that with Oswald in 2019, and it's grown to about 8-10 others now as well.

Nice! Heard you talk in Paris at DotCSS (I think!) on the experiments on Oswald but wasn't aware they'd moved beyond this.

I think this is worth noting in the chapter. WDYT?

I think that would be totally worth it. Maybe @davelab6 could jog my memory about which fonts they're serving now? (I can't remember where that conversation happened... too many message platforms!)

tunetheweb · 2020-12-20T23:33:15Z

src/content/en/2020/fonts.md

+
+{# That's huge usage! Any ideas what's driven it? It would appear no variable font has any where near that usage so how come total usage is so high? Has any particular service or platform turned this on by default? #}
+
+{# TODO - authors Should we add a paragraph or bullet list explaing the common font axis and what they mean before launching into their usage? What is difference between wght and wdth? And between slnt and ital? Web Almanac readers may come here from pother chapters and not be familiar with these terms. Plus I am a little familair and don't know these answers! #}


@raphlinus / @jpamental thoughts?

I'm always keen to add more education about that, though I wonder if it might be better to introduce it lightly and just direct them here: https://variablefonts.io/about-variable-fonts/
(I explain all the axes and have little working examples of each)

That works for me. Can you replace this comment text with a short paragraph about that? Feel free to either submit directly to this branch or just use the "Insert a suggestion" button above to replace this line.

tunetheweb · 2020-12-20T23:33:35Z

src/content/en/2020/fonts.md

+Self-hosting fonts on the same domain as the website can be faster, as [we discovered for this very website](https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/), however this is not always the case as the data shows.
+
+{# TODO Authors - Suggested different wording here, and moved `local` down to below. Let me knwo your thoughts. Particularly as I inserted a reference to my own site here which is a bit presumptious of me :-) but it is about the Web Almanac so think it fits. #}


@raphlinus / @jpamental thoughts?

Same concern as above about 'are we really talking about self-hosted fonts or locally installed ones?'

As per above this paragraph is all about self-hosted (so current production is wrong). I updated all text to self-hosted, but also kept the text about local() and moved it below to it's own paragraph (without any data as it was not analysed as part of this).

tunetheweb · 2021-01-06T16:41:36Z

@jpamental hope the house move went well. Appreciate that's probably taken up a lot of your time, but have you had any further thoughts on the final 6 TODOs here? Would love to remove the Unedited flag. Shall I open a new branch and highlight them again in a draft PR to allow you to add suggested text?

@raphlinus not sure if you saw this PR over the holidays but hope you are OK with the edits here and let us know if you've any comments or anything further to add.

jpamental · 2021-01-06T16:42:55Z

A new branch with that focus would be awesome Barry. I can definitely look at it this week. Jason

…

On Jan 6, 2021, at 11:41 AM, Barry Pollard ***@***.***> wrote: @jpamental <https://github.com/jpamental> hope the house move went well. Appreciate that's probably taken up a lot of your time, but have you had any further thoughts on the final 6 TODOs here? Would love to remove the Unedited flag. Shall I open a new branch and highlight them again in a draft PR to allow you to add suggested text? @raphlinus <https://github.com/raphlinus> not sure if you saw this PR over the holidays but hope you are OK with the edits her and let us know if you've any comments or anything further to add. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1816 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEDGRM3R433OA7DK2GS4H3SYSHE7ANCNFSM4VDPAZZA>.

tunetheweb added 2 commits December 20, 2020 22:14

Icopyedit of Fonts 2020 Chapter

711c8e9

Further edits

453e929

tunetheweb added the editing Content excellence label Dec 20, 2020

tunetheweb added this to the 2020 Content Writing milestone Dec 20, 2020

tunetheweb requested review from raphlinus and jpamental December 20, 2020 23:30

tunetheweb commented Dec 20, 2020

View reviewed changes

tunetheweb mentioned this pull request Dec 20, 2020

Edit 2020 Chapters #1432

Closed

22 tasks

tunetheweb added 4 commits December 22, 2020 12:39

Merge branch 'main' into fonts-2020-chapter-edit

0c32cc9

Add editor

be38f77

Merge branch 'main' into fonts-2020-chapter-edit

5438b60

Add back unedited flag for now

47bc977

tunetheweb merged commit 0f56105 into main Dec 22, 2020

tunetheweb deleted the fonts-2020-chapter-edit branch December 22, 2020 13:45

tunetheweb mentioned this pull request Jan 6, 2021

Close out final 2020 Fonts Chapter TODOs #1868

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Copyedit of Fonts 2020 chapter #1816

Copyedit of Fonts 2020 chapter #1816

tunetheweb commented Dec 20, 2020

tunetheweb Dec 20, 2020

tunetheweb Dec 20, 2020

jpamental Dec 22, 2020

tunetheweb Dec 22, 2020

jpamental Dec 22, 2020

tunetheweb Dec 22, 2020

jpamental Dec 22, 2020

tunetheweb Dec 22, 2020

tunetheweb Dec 20, 2020

tunetheweb Dec 20, 2020

jpamental Dec 22, 2020

tunetheweb Dec 22, 2020

jpamental Dec 22, 2020

tunetheweb Dec 20, 2020

jpamental Dec 22, 2020

tunetheweb Dec 22, 2020

tunetheweb Dec 20, 2020

jpamental Dec 22, 2020

tunetheweb Dec 22, 2020 •

edited

Loading

tunetheweb commented Jan 6, 2021 •

edited

Loading

jpamental commented Jan 6, 2021 via email

		There's a great thread on [web font usage by country](https://discuss.httparchive.org/t/how-does-web-font-usage-vary-by-country/1649) on the HTTP Archive discussion forum.

		{# TODO (authors) - this sentence is a bit hanging our there. What's great about this thread compared to what we are covering here? Is it that you're wanting to credit that thread as the basis for the queries used by this chapter (if so say so), or you believe they have more insights than you have here (again in which case say so, but reading through the thread doesn't seem that much more, and even if there was could it not be summarised more here?), or is it you're wanting to direct people to there for further discussions? #}

		It wouldn't be sound to infer causality between hosting strategy from the above data, as there are other variables that may confound the relationship. But, putting that aside, we find that adding the self-hosting fonts doesn't always lead to better performance. Hosted font solutions often perform a number of optimizations that may not always be replicated when self-hosting.

		{# TODO Authors - Review above alterations #}

		Variable fonts are certainly one of the biggest stories this year. They're seen in 10.54% of desktop pages, and 11.00% of mobile. That's up from an average of 1.8% last year, a huge growth factor. It is not hard to see why their popularity is increasing – they offer more design flexibility, and also potentially smaller binary font sizes, especially if multiple styles of the same font are used on the same page.

		{# That's huge usage! Any ideas what's driven it? It would appear no variable font has any where near that usage so how come total usage is so high? Has any particular service or platform turned this on by default? #}


		{# That's huge usage! Any ideas what's driven it? It would appear no variable font has any where near that usage so how come total usage is so high? Has any particular service or platform turned this on by default? #}

		{# TODO - authors Should we add a paragraph or bullet list explaing the common font axis and what they mean before launching into their usage? What is difference between wght and wdth? And between slnt and ital? Web Almanac readers may come here from pother chapters and not be familiar with these terms. Plus I am a little familair and don't know these answers! #}

		Self-hosting fonts on the same domain as the website can be faster, as [we discovered for this very website](https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/), however this is not always the case as the data shows.

		{# TODO Authors - Suggested different wording here, and moved `local` down to below. Let me knwo your thoughts. Particularly as I inserted a reference to my own site here which is a bit presumptious of me :-) but it is about the Web Almanac so think it fits. #}

Copyedit of Fonts 2020 chapter #1816

Copyedit of Fonts 2020 chapter #1816

Conversation

tunetheweb commented Dec 20, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tunetheweb Dec 22, 2020 • edited Loading

Choose a reason for hiding this comment

tunetheweb commented Jan 6, 2021 • edited Loading

jpamental commented Jan 6, 2021 via email

tunetheweb Dec 22, 2020 •

edited

Loading

tunetheweb commented Jan 6, 2021 •

edited

Loading