@bram_stein

Author of the Webfont Handbook: https://xitter.cf/t.co/goF51MSiS7 Tweets on web typography and front-end development.

 Copenhagen, Denmark
Joined September 2009
  • Tweets2.1K
  • Following312
  • Followers2.6K
55Media
It’s here! Go buy the Webfont Handbook and learn about rendering, licensing & optimising your webfont loading! abookapart.com/products/webf…
8
42
4
124
For the first time since 2007, you can buy fonts directly from my website again. Also, live, editable font previews. At last! marksimonson.com/fonts

Fonts

Popular fonts from Mark Simonson Studio

marksimonson.com
4
1
31
3,922
My latest typeface release is Dreamboat, based on the classic early twentieth century "bold script" style of lettering, still seen on logos for baseball teams, car companies, beer and soft drink brands. More info: marksimonson.com/notebook/vi… marksimonson.com/fonts/view/…
6
20
3
212
20,301
Slightly over half of web fonts support (a significant subset of) the Latin writing system. Unfortunately, other writing systems are underrepresented on the web compared to their use in the world. almanac.httparchive.org/en/2…
Bar chart showing Latin is used on 57.6% of desktop pages and 53.6% of mobile pages, Cyrillic on 6.1% and 6.2% respectively, Greek on 3.4% and 3.4%, Katakana on 0.9% and 1.0%, Hiragana on 0.9% and 0.9%, Hebrew on 0.5% and 0.5%, Arabic on 0.3% and 0.4%, Thai on 0.2% and 0.3%, Hangul on 0.5% and 0.3%, Devanagari on 0.2% and 0.3%, and finally Han is on 0.2% of desktop and mobile pages.

ALT Bar chart showing Latin is used on 57.6% of desktop pages and 53.6% of mobile pages, Cyrillic on 6.1% and 6.2% respectively, Greek on 3.4% and 3.4%, Katakana on 0.9% and 1.0%, Hiragana on 0.9% and 0.9%, Hebrew on 0.5% and 0.5%, Arabic on 0.3% and 0.4%, Thai on 0.2% and 0.3%, Hangul on 0.5% and 0.3%, Devanagari on 0.2% and 0.3%, and finally Han is on 0.2% of desktop and mobile pages.

3
8
1
22
A whopping 73% of sites set -webkit-font-smoothing: antialiased to change how text is rasterized on MacOS. Do people really dislike the default way MacOS rasterizes text, or are lots of people including CSS libraries that set it by default?
Bar chart showing -webkit-font-smoothing: antialiased is used on 74% of desktop and 73% of mobile pages, -moz-osx-font-smoothing: grayscale on 67% and 66%, -webkit-font-smoothing: auto on 13% and 12%, and finally -webkit-font-smoothing: subpixel-antialiased is used on 13% of desktop and 13% of mobile pages.

ALT Bar chart showing -webkit-font-smoothing: antialiased is used on 74% of desktop and 73% of mobile pages, -moz-osx-font-smoothing: grayscale on 67% and 66%, -webkit-font-smoothing: auto on 13% and 12%, and finally -webkit-font-smoothing: subpixel-antialiased is used on 13% of desktop and 13% of mobile pages.

13
10
1
43
I didn't check the numbers, but this might also make it the most used non-standard CSS property!
1
Slightly over 99.99% of variable fonts use TrueType glyph outlines. Not a good look for the CFF2 format six years after it was standardized. Perhaps time to deprecate it? almanac.httparchive.org/en/2…
An image showing 99.99% of variable fonts used TrueType outlines.

ALT An image showing 99.99% of variable fonts used TrueType outlines.

2
12
Nearly 91% of web fonts use TrueType glyph outlines while only 9% use CFF glyph outlines. After compression TrueType and CFF based fonts have nearly identical file sizes (and for larger fonts TrueType outlines produce smaller compressed file sizes). almanac.httparchive.org/en/2…
Column chart showing at the 25th percentile both CFF and glyf font sizes are 6 KB, at the 50th percentile they start to diverge with CFF 15 KB and glyf 17 KB, at the 75th percentile it’s 32 and 39 KB respectively, and finally at the 90th percentile it’s CFF is 86 KB and glyf is only 56 KB.

ALT Column chart showing at the 25th percentile both CFF and glyf font sizes are 6 KB, at the 50th percentile they start to diverge with CFF 15 KB and glyf 17 KB, at the 75th percentile it’s 32 and 39 KB respectively, and finally at the 90th percentile it’s CFF is 86 KB and glyf is only 56 KB.

3
Roboto, Font Awesome, Noto Sans, Open Sans, and Lato are the most popular typefaces used on the web. Most of the top 20 are libre (thanks @GoogleFonts) or free fonts, with one notable exception: Proxima Nova by @marksimonson which is used on 1% of sites. almanac.httparchive.org/en/2…
A table of the top 10 most used fonts: Roboto, Font Awesome, Noto Sans, Open Sans, Lato, Poppins, Montserrat, Source Sans Pro, IcoMoon, and Proxima Nova.

ALT A table of the top 10 most used fonts: Roboto, Font Awesome, Noto Sans, Open Sans, Lato, Poppins, Montserrat, Source Sans Pro, IcoMoon, and Proxima Nova.

2
1
13
Another remarkable fact is that icon fonts are used on nearly 18% of websites! Most of this can be attributed to @FontAwesome (12.8%) and @_vect_ (IcoMoon; 1.5%).
1
2
The median font size is 20 KiB for all fonts. Looking only at self-hosted fonts the median font sizes doubles to 40 KiB. There is also much less use of WOFF2 for self-hosted fonts (46%) versus overall (75%). Lots of file size savings left on the table! almanac.httparchive.org/en/2…
Column chart showing the size of self-hosted font sizes at various percentiles. At the 10th percentile self-hosted fonts are 7 KB on desktop and 7 KB on mobile, at the 25th percentile they are 17 KB and 17 KB respectively, at the 50th percentile 37 KB on both, at the 75th percentile they are 75 KB on both and finally at the 90th percentile they are 96 KB on desktop and 91 KB on mobile.

ALT Column chart showing the size of self-hosted font sizes at various percentiles. At the 10th percentile self-hosted fonts are 7 KB on desktop and 7 KB on mobile, at the 25th percentile they are 17 KB and 17 KB respectively, at the 50th percentile 37 KB on both, at the 75th percentile they are 75 KB on both and finally at the 90th percentile they are 96 KB on desktop and 91 KB on mobile.

At the 10th percentile 10 KB of fonts are used on desktop and 8 KB on mobile, the 25th percentile it’s 15 KB and 13 KB respectively, the 50th percentile it’s 20 KB and 20 KB, the 75th percentile it’s 44 KB and 43 KB, and finally at the 90th percentile it’s 75 KB on both desktop and mobile.

ALT At the 10th percentile 10 KB of fonts are used on desktop and 8 KB on mobile, the 25th percentile it’s 15 KB and 13 KB respectively, the 50th percentile it’s 20 KB and 20 KB, the 75th percentile it’s 44 KB and 43 KB, and finally at the 90th percentile it’s 75 KB on both desktop and mobile.

3
10
Some, but not a lot, of growth in color font use. Likely causes are the ongoing disagreements over color font formats & (until recently) lack of browser support. OT-SVG is still the most popular color font format, but COLR is catching up fast. almanac.httparchive.org/en/2…
Pie chart showing SVG is the color font used on 74.2% of the time on mobile, COLRv0 is 22.8%, CBDT 2.5%, sbix 0.2% and finally COLRv1 also 0.2%.

ALT Pie chart showing SVG is the color font used on 74.2% of the time on mobile, COLRv0 is 22.8%, CBDT 2.5%, sbix 0.2% and finally COLRv1 also 0.2%.

5
Variable font usage has grown to an impressive 29% (up from 13%). About 97% of variable font usage is from @GoogleFonts; only 3% from self-hosting and other services. Most people use variable fonts for performance and not for their typographic potential. almanac.httparchive.org/en/2…

Fonts | 2022 | The Web Almanac by HTTP Archive

Fonts chapter of the 2022 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts, and color fonts.

almanac.httparchive.org
3
16
2
63
Overall web font usage now at 84%! About 67% use a service _and_ self-host, while exclusive self-hosting is at 19%: almanac.httparchive.org/en/2… @GoogleFonts use has declined slightly for the first time, while @FontAwesome grew by 86% and @AdobeFonts grew by 24% over the last 3 years
Column chart showing Google Fonts was used on 59.4% of pages in 2019, 63.9% in 2020, 65.2% in 2021, and 64.5% in 2022, Font Awesome on 3.7%, 5.4%, 6.3%, and 6.9% respectively, Adobe Fonts on 3.4%, 3.6%, 3.9%, and 4.2%, Fonts.com on 0.4%, 0.3%, 0.3%, and 0.2%, and finally Cloud.Typography on 0.3% in 2019, 0.2% in 2020, 0.2% in 2021, and 0.2% in 2022.

ALT Column chart showing Google Fonts was used on 59.4% of pages in 2019, 63.9% in 2020, 65.2% in 2021, and 64.5% in 2022, Font Awesome on 3.7%, 5.4%, 6.3%, and 6.9% respectively, Adobe Fonts on 3.4%, 3.6%, 3.9%, and 4.2%, Fonts.com on 0.4%, 0.3%, 0.3%, and 0.2%, and finally Cloud.Typography on 0.3% in 2019, 0.2% in 2020, 0.2% in 2021, and 0.2% in 2022.

5
18
I had the pleasure to write the HTTP Archive Web Almanac Fonts chapter this year, which is available now: almanac.httparchive.org/en/2…

Fonts | 2022 | The Web Almanac by HTTP Archive

Fonts chapter of the 2022 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts, and color fonts.

almanac.httparchive.org
2
13
4
49
Thanks to @4x13, @svgeesus, @PixelAmbacht, and @jmsoleb for their amazing reviews, @TheGreenGreek for keeping things on track, Shaina Hantsis for editing and @kanmiobasa for help with the analysis. Finally, a big shoutout to the @HTTPArchive team for making all of this possible.
1
8
Powerful, passionate address from Zelensky tonight. Switching from Ukrainian to Russian he addresses mothers of soldiers who committed horrific war crimes in Bucha, Irpin, Hostomel, asking how they raised “butchers,” and he tells Moscow to see how it’s orders are being fulfilled.
490
6,511
564
20,727
Bram Stein retweeted
wentin@DesignJokes29 Mar 2022
🚨 Launch Alert 🚨 Today is a huge milestone for me and @HuaTweets 🙂 We are launching the preorder for @typogramco! Typogram is an easy to use logo design tool for founders. We are on PH, would appreciate ur vote! producthunt.com/posts/typogr… Pls RT, thank you! #buildinpublic

Typogram: Typography-first design tool | Product Hunt

Typogram Studio is a typography design tool! Create stunning graphic design with premium fonts, variable font gradients, AI powered vector icons, ligatures, stylistic alternate glyphs and more, then...

producthunt.com
5
5
13
Say hello to Google Fonts Knowledge! Today we launch a library of original guides to the world of typography, created in collaboration with typographic experts around the world, to enable designers and developers to choose and use type with purpose. fonts.google.com/knowledge
12
243
33
829
Bradley Initials DJR is my first release to come with a COLRv1 variant, which takes advantage of SVG-like features such as gradients but without the large filesize and inflexibility of embedded images. tools.djr.com/misc/bradley-i…
1
4
1
36
Load more