diff --git a/src/content/en/2024/fonts.md b/src/content/en/2024/fonts.md index f04433f5094..28e08d2f8bd 100644 --- a/src/content/en/2024/fonts.md +++ b/src/content/en/2024/fonts.md @@ -235,53 +235,53 @@ Digging down even further, we can take a look at the individual table sizes used glyf - 76.55% - 77.92% + 77% + 78% GPOS - 6.38% - 5.80% + 6% + 6% CFF - 5.08% - 4.44% + 5% + 4% hmtx - 2.68% - 2.63% + 3% + 3% post - 2.09% - 2.18% + 2% + 2% name - 1.40% - 1.33% + 1% + 1% cmap - 1.36% - 1.31% + 1% + 1% gvar - 1.14% - 1.14% + 1% + 1% fpgm - 1.07% - 1.13% + 1% + 1% GSUB - 0.66% - 0.62% + 1% + 1% @@ -392,53 +392,53 @@ We think the rise of `block` usage is concerning so we decided to investigate a Font Awesome - 15.49% - 16.12% + 15.5% + 16.1% ETmodules - 1.71% - 1.71% + 1.7% + 1.7% TablePress - 1.12% - 1.06% + 1.1% + 1.1% icomoon - 1.02% - 1.05% + 1.0% + 1.1% vcpb-plugin-icons - 0.77% - 0.74% + 0.8% + 0.7% fl-icons - 0.60% - 0.62% + 0.6% + 0.6% dm-social-font - 0.46% - 0.52% + 0.5% + 0.5% dm-font - 0.46% - 0.52% + 0.5% + 0.5% dm-social-icons 0% - 0.51% + 0.5% dm-common-icons 0% - 0.51% + 0.5% @@ -598,53 +598,53 @@ Looking at foundries, the main surprise is the rise of Adobe Fonts as a foundry. Google Fonts - 33.77% - 18.50% + 34% + 19% Adobe Fonts - 14.39% - 14.71% + 14% + 15% Font Awesome - 14.37% - 18.86% + 14% + 19% Indian Type Foundry - 7.21% - 9.74% + 7% + 10% Łukasz Dziedzic - 4.81% - 6.38% + 5% + 6% Julieta Ulanovsky - 4.75% - 6.14% + 5% + 6% Mark Simonson Studio - 2.03% - 2.23% + 2% + 2% Ascender Corporation - 1.75% - 2.24% + 2% + 2% Paratype - 1.64% - 2.08% + 2% + 2% Linotype - 1.46% - 1.97% + 1% + 2% @@ -858,10 +858,12 @@ To give a sense of where these increases have been most consequential, it helps {{ figure_markup( image="writing-systems.png", caption="Writing systems supported by fonts.", - description="Bar chart showing the writing systems supported by fonts. Cyrillic is at 13% for both desktop and mobile, Greek is at 8% for desktop and 7.5% for mobile, Emoji are at 1.6% for both desktop and mobile, Katakana is at 1.2% for desktop and 0.95% for mobile, Hiragana is at 1.2% for desktop and 0.95% for mobile, Hebrew is at 1.1% for both desktop and mobile, Hangul is at 0.9% for desktop and 0.5% for mobile, Devanagari is at 0.9% for desktop and 0.8% for mobile, Arabic is at 0.7% for desktop and 1% for mobile, Thai is at 0.5% for both desktop and mobile, finally Han is at 0.35% for desktop and 0.3% for mobile. Omitted the Latin script at 47% for desktop and 46% for mobile to give better insight into the support for other scripts.", + description="Bar chart showing the writing systems supported by fonts. Cyrillic is at 13% for both desktop and mobile, Greek is at 8% for desktop and 7.5% for mobile, Emoji are at 1.6% for both desktop and mobile, Katakana is at 1.2% for desktop and 0.9% for mobile, Hiragana is at 1.2% for desktop and 0.95% for mobile, Hebrew is at 1.1% for both desktop and mobile, Hangul is at 0.9% for desktop and 0.5% for mobile, Devanagari is at 0.9% for desktop and 0.8% for mobile, Arabic is at 0.7% for desktop and 1% for mobile, Thai is at 0.5% for both desktop and mobile, finally Han is at 0.4% for desktop and 0.3% for mobile. Omitted the Latin script at 47% for desktop and 46% for mobile to give better insight into the support for other scripts.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1521239630&format=interactive", sheets_gid="1749442653", - sql_file="performance/styles_font_display.sql" + sql_file="performance/styles_font_display.sql", + width=600, + height=486 ) }} @@ -1240,7 +1242,7 @@ This point is driven home if we take a look at the features used in combination {{ figure_markup( image="popular-font-feature-settings-values.png", caption="Most popular `font-feature-settings` values.", - description="Bar chart showing the most popular `font-feature-settings` values. The `kern` feature tag is at 2.6% of desktop and mobile pages, the `liga` feature tag is used on 2.35% of desktop pages and 2.25% of mobile pages, the `tnum` feature tag is used on 0.77% of desktop and 0.67% of mobile pages, the `palt` feature tag is used on 0.66% of desktop pages and 0.6% of mobile pages, the `pnum` feature tag is used on 0.41% of desktop pages and 0.39% of mobile pages, the `lnum` feature tag is used at 0.35% of both mobile and desktop pages, and finally the `calt` feature tag is used at 0.2% of desktop pages and 0.17% of mobile pages.", + description="Bar chart showing the most popular `font-feature-settings` values. The `kern` feature tag is at 2.6% of desktop and mobile pages, the `liga` feature tag is used on 2.3% of desktop pages and 2.2% of mobile pages, the `tnum` feature tag is used on 0.8% of desktop and 0.7% of mobile pages, the `palt` feature tag is used on 0.7% of desktop pages and 0.6% of mobile pages, the `pnum` feature tag is used on 0.41% of desktop pages and 0.39% of mobile pages, the `lnum` feature tag is used at 0.4% of mobile and 0.3% of desktop pages, and finally the `calt` feature tag is used at 0.2% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=133823749&format=interactive", sheets_gid="666056788", sql_file="development/styles_font_feature_settings.sql" @@ -1283,53 +1285,53 @@ As an aside, usage doesn’t necessarily imply that a web developer chose to use Noto Sans JP - 26.80% - 23.37% + 27% + 23% Open Sans - 15.87% - 17.68% + 16% + 18% Montserrat - 9.01% - 10.19% + 9% + 10% Noto Sans KR - 7.29% - 3.79% + 7% + 4% Noto Serif JP - 4.89% - 4.95% + 5% + 5% Raleway - 3.66% - 4.03% + 3% + 4% Inter - 2.69% - 2.81% + 3% + 3% Noto Sans TC - 2.40% - 1.98% + 2% + 2% Google Sans 18pt - 1.69% - 2.31% + 2% + 2% Oswald - 1.66% - 1.90% + 2% + 2% @@ -1349,7 +1351,7 @@ Open Sans was the second most popular variable font this year, being found on 16 {{ figure_markup( image="variable-font-usage-by-service.png", caption="Popular hosts for serving variable fonts over time.", - description="Column chart showing hosts for serving variable fonts over time. In 2022 Google Fonts served 97% of all variable fonts, this decreased only slightly in 2023 (96.8%) and dropped to 92% in 2024. In 2022 variable fonts were self-hosted on 2.8% of pages, 3.1% in 2023, and 8% in 2024.", + description="Column chart showing hosts for serving variable fonts over time. In 2022 Google Fonts served 97% of all variable fonts, this decreased only slightly in 2023 (97%) and dropped to 92% in 2024. In 2022 variable fonts were self-hosted on 3% of pages, 3% in 2023, and 8% in 2024.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=906487759&format=interactive", sheets_gid="1090790567", sql_file="development/fonts_variable_service.sql" @@ -1361,7 +1363,7 @@ In terms of serving variable fonts, the vast majority of users choose between tw Like color fonts, variable fonts also have two competing outline formats: the variable extensions of the `glyf` format and Compact Font Format 2 (`CFF2`). The main technical differences between the `glyf` format and `CFF2` are the types of Bézier curves, more automated hinting, and (perhaps most importantly) the companies backing them. `CFF2` is backed by Adobe and `glyf` by all other major contributors to the OpenType specification (Google, Microsoft, and Apple). {{ figure_markup( - content="99.4%", + content="99%", caption="Variable fonts using the `glyf` outline format.", classes="big-number", sheets_gid="1116222836", @@ -1537,9 +1539,9 @@ Although emoji offered a major impetus for the initial development and support o It’s worth noting a point of complexity in the data gathered on color fonts. Our analysis considers a font with a single color glyph a color font. That is a rather broad definition and also includes many fonts which are primarily used for their non-color glyphs. If we remove fonts with only a small percentage of color glyphs from the equation, the use of color font technology looks very different. For example, the top three fonts using `SVG`, 貂明朝 (Ten Mincho), 貂明朝テキスト (Ten Mincho Text), and Source Code Pro make up a combined 41% of `SVG` total usage, while having only a handful of color glyphs. Removing all “color” fonts with less than 5% of their codepoints mapped to color glyphs from the calculation would reduce the share of `SVG` to roughly 5%! While the `COLR` formats also have some fonts with a low percentage of color glyphs, that percentage is much lower at 3-4%, reducing the `COLRv0` share to 25.1% and 7.2% for `COLRv1`. This would make `COLR` the most popular format by far! {{ figure_markup( - image="color-font-format-usage.png", + image="color-font-formats.png", caption="Most popular color formats after removing fonts with only a handful of color glyphs.", - description="Column chart showing color font usage by color format for fonts with more than 5% of color glyphs. The `COLRv0` format is at 25%, the `sbix` format is at 12%, the `COLRv1` format at 7%, the `SVG` format is at 5%, and the `CBDT` format is at 2.5%.", + description="Column chart showing color font usage by color format for fonts with more than 5% of color glyphs. The `COLRv0` format is at 25%, the `sbix` format is at 12%, the `COLRv1` format at 7%, the `SVG` format is at 5%, and the `CBDT` format is at 3%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=892501065&format=interactive", sheets_gid="463077022", sql_file="development/fonts_color_format_by_family.sql" @@ -1577,7 +1579,7 @@ While system font families are not ideal from a design perspective, as universal {{ figure_markup( image="generic-family-name-usage.png", caption="Usage of generic `font-family` names.", - description="Column chart showing usage of the generic `font-family` names. The `sans-serif` generic family name is used on 89% of desktop and mobile pages, the `monospace` generic family names is used on 65% of desktop pages and 64% of mobile pages, the `serif` generic family name is used on 50% of desktop pages and 51% of mobile pages, the `system-ui` generic family name is used on 7.3% of desktop pages and 7.2% of mobile pages, the `cursive` generic family name is used on 3.4% of desktop pages and 3.5% of mobile pages, the `ui-monospace` generic family name is used on 2.6% of desktop pages and 2.4% of mobile pages, the `ui-sans-serif` generic family name is used on 2.4% of desktop pages and 2.3% of mobile pages.", + description="Column chart showing usage of the generic `font-family` names. The `sans-serif` generic family name is used on 89% of desktop and mobile pages, the `monospace` generic family names is used on 65% of desktop pages and 64% of mobile pages, the `serif` generic family name is used on 50% of desktop pages and 51% of mobile pages, the `system-ui` generic family name is used on 7% of desktop pages and 7% of mobile pages, the `cursive` generic family name is used on 3% of both desktop and mobile pages, the `ui-monospace` generic family name is used on 3% of desktop pages and 2% of mobile pages, the `ui-sans-serif` generic family name is used on 2% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1077237634&format=interactive", sheets_gid="1543061572", sql_file="development/styles_family_system.sql" diff --git a/src/static/images/2024/fonts/color-font-format-usage-over-time.png b/src/static/images/2024/fonts/color-font-format-usage-over-time.png index ed52d931e48..6ed10323b63 100644 Binary files a/src/static/images/2024/fonts/color-font-format-usage-over-time.png and b/src/static/images/2024/fonts/color-font-format-usage-over-time.png differ diff --git a/src/static/images/2024/fonts/color-font-format-usage.png b/src/static/images/2024/fonts/color-font-format-usage.png index eada062f3c5..0dad540cb05 100644 Binary files a/src/static/images/2024/fonts/color-font-format-usage.png and b/src/static/images/2024/fonts/color-font-format-usage.png differ diff --git a/src/static/images/2024/fonts/color-font-formats.png b/src/static/images/2024/fonts/color-font-formats.png new file mode 100644 index 00000000000..f8e347030a4 Binary files /dev/null and b/src/static/images/2024/fonts/color-font-formats.png differ diff --git a/src/static/images/2024/fonts/color-font-usage-over-time.png b/src/static/images/2024/fonts/color-font-usage-over-time.png index a6de7646df6..c29d1b55b19 100644 Binary files a/src/static/images/2024/fonts/color-font-usage-over-time.png and b/src/static/images/2024/fonts/color-font-usage-over-time.png differ diff --git a/src/static/images/2024/fonts/font-display-usage.png b/src/static/images/2024/fonts/font-display-usage.png index 960c5843250..fdf9532619e 100644 Binary files a/src/static/images/2024/fonts/font-display-usage.png and b/src/static/images/2024/fonts/font-display-usage.png differ diff --git a/src/static/images/2024/fonts/font-outline-formats.png b/src/static/images/2024/fonts/font-outline-formats.png index 7f3acd6a2af..b15b0fd1358 100644 Binary files a/src/static/images/2024/fonts/font-outline-formats.png and b/src/static/images/2024/fonts/font-outline-formats.png differ diff --git a/src/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png b/src/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png index 9dc555cec06..61592865451 100644 Binary files a/src/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png and b/src/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png differ diff --git a/src/static/images/2024/fonts/font-outline-glyf-cff-comparison.png b/src/static/images/2024/fonts/font-outline-glyf-cff-comparison.png index 677010f69aa..17222e55c0d 100644 Binary files a/src/static/images/2024/fonts/font-outline-glyf-cff-comparison.png and b/src/static/images/2024/fonts/font-outline-glyf-cff-comparison.png differ diff --git a/src/static/images/2024/fonts/font-resource-hint-usage.png b/src/static/images/2024/fonts/font-resource-hint-usage.png index 101cceb3e33..db85019b6ea 100644 Binary files a/src/static/images/2024/fonts/font-resource-hint-usage.png and b/src/static/images/2024/fonts/font-resource-hint-usage.png differ diff --git a/src/static/images/2024/fonts/font-sizes.png b/src/static/images/2024/fonts/font-sizes.png index ab8ce37b16f..fb6a3a6449f 100644 Binary files a/src/static/images/2024/fonts/font-sizes.png and b/src/static/images/2024/fonts/font-sizes.png differ diff --git a/src/static/images/2024/fonts/font-smoothing-usage.png b/src/static/images/2024/fonts/font-smoothing-usage.png index 0777194892f..6453de4c4eb 100644 Binary files a/src/static/images/2024/fonts/font-smoothing-usage.png and b/src/static/images/2024/fonts/font-smoothing-usage.png differ diff --git a/src/static/images/2024/fonts/font-variation-axes.png b/src/static/images/2024/fonts/font-variation-axes.png index 69d82345afd..1b9db772582 100644 Binary files a/src/static/images/2024/fonts/font-variation-axes.png and b/src/static/images/2024/fonts/font-variation-axes.png differ diff --git a/src/static/images/2024/fonts/generic-family-name-usage.png b/src/static/images/2024/fonts/generic-family-name-usage.png index 0985f24c646..4c63db3999e 100644 Binary files a/src/static/images/2024/fonts/generic-family-name-usage.png and b/src/static/images/2024/fonts/generic-family-name-usage.png differ diff --git a/src/static/images/2024/fonts/hosting-type.png b/src/static/images/2024/fonts/hosting-type.png index cd32dcdaa63..ce71ed785f3 100644 Binary files a/src/static/images/2024/fonts/hosting-type.png and b/src/static/images/2024/fonts/hosting-type.png differ diff --git a/src/static/images/2024/fonts/nabla-color.png b/src/static/images/2024/fonts/nabla-color.png index e6ab81e0080..a07fee97d9c 100644 Binary files a/src/static/images/2024/fonts/nabla-color.png and b/src/static/images/2024/fonts/nabla-color.png differ diff --git a/src/static/images/2024/fonts/opentype-feature-support-fonts.png b/src/static/images/2024/fonts/opentype-feature-support-fonts.png index a25bb5efeb9..503f7404b60 100644 Binary files a/src/static/images/2024/fonts/opentype-feature-support-fonts.png and b/src/static/images/2024/fonts/opentype-feature-support-fonts.png differ diff --git a/src/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png b/src/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png index 2bf36e5c3ec..eab203bbe85 100644 Binary files a/src/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png and b/src/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png differ diff --git a/src/static/images/2024/fonts/popular-font-feature-settings-values.png b/src/static/images/2024/fonts/popular-font-feature-settings-values.png index 87b645b80b1..527e9dc4e76 100644 Binary files a/src/static/images/2024/fonts/popular-font-feature-settings-values.png and b/src/static/images/2024/fonts/popular-font-feature-settings-values.png differ diff --git a/src/static/images/2024/fonts/popular-mime-types-self-hosted.png b/src/static/images/2024/fonts/popular-mime-types-self-hosted.png index 5442c50ad8a..34ba981dc3d 100644 Binary files a/src/static/images/2024/fonts/popular-mime-types-self-hosted.png and b/src/static/images/2024/fonts/popular-mime-types-self-hosted.png differ diff --git a/src/static/images/2024/fonts/popular-mime-types.png b/src/static/images/2024/fonts/popular-mime-types.png index 9e5bf495cd6..6c69ef7c55d 100644 Binary files a/src/static/images/2024/fonts/popular-mime-types.png and b/src/static/images/2024/fonts/popular-mime-types.png differ diff --git a/src/static/images/2024/fonts/ttf-font-sizes.png b/src/static/images/2024/fonts/ttf-font-sizes.png index a3b450aeb7f..cc246851dc4 100644 Binary files a/src/static/images/2024/fonts/ttf-font-sizes.png and b/src/static/images/2024/fonts/ttf-font-sizes.png differ diff --git a/src/static/images/2024/fonts/variable-font-axes.png b/src/static/images/2024/fonts/variable-font-axes.png index 5348f894b99..4f928b587b0 100644 Binary files a/src/static/images/2024/fonts/variable-font-axes.png and b/src/static/images/2024/fonts/variable-font-axes.png differ diff --git a/src/static/images/2024/fonts/variable-font-usage-by-service.png b/src/static/images/2024/fonts/variable-font-usage-by-service.png index 6c684ea8eff..701729e12d8 100644 Binary files a/src/static/images/2024/fonts/variable-font-usage-by-service.png and b/src/static/images/2024/fonts/variable-font-usage-by-service.png differ diff --git a/src/static/images/2024/fonts/variable-font-usage-over-time.png b/src/static/images/2024/fonts/variable-font-usage-over-time.png index f8e5b998692..f74007f253b 100644 Binary files a/src/static/images/2024/fonts/variable-font-usage-over-time.png and b/src/static/images/2024/fonts/variable-font-usage-over-time.png differ diff --git a/src/static/images/2024/fonts/web-font-usage-by-service.png b/src/static/images/2024/fonts/web-font-usage-by-service.png index 93cf705d2ac..dfc58d25260 100644 Binary files a/src/static/images/2024/fonts/web-font-usage-by-service.png and b/src/static/images/2024/fonts/web-font-usage-by-service.png differ diff --git a/src/static/images/2024/fonts/webfont-usage.png b/src/static/images/2024/fonts/webfont-usage.png index 28a353f0c19..a925206a2d9 100644 Binary files a/src/static/images/2024/fonts/webfont-usage.png and b/src/static/images/2024/fonts/webfont-usage.png differ diff --git a/src/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png b/src/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png index ee6efa35e03..cf341b6d5e7 100644 Binary files a/src/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png and b/src/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png differ diff --git a/src/static/images/2024/fonts/woff2-font-sizes.png b/src/static/images/2024/fonts/woff2-font-sizes.png index 3ce3bca1907..afa70b4273d 100644 Binary files a/src/static/images/2024/fonts/woff2-font-sizes.png and b/src/static/images/2024/fonts/woff2-font-sizes.png differ diff --git a/src/static/images/2024/fonts/writing-systems.png b/src/static/images/2024/fonts/writing-systems.png index 26ba2a06b82..5f503f9d078 100644 Binary files a/src/static/images/2024/fonts/writing-systems.png and b/src/static/images/2024/fonts/writing-systems.png differ