Hello, I’m Bram Stein, a de­vel­oper and prod­uct man­ager. I care a lot about web ty­pog­ra­phy and I’m hap­pi­est work­ing at the in­ter­sec­tion be­tween de­sign and tech­nol­ogy.

Fol­low me on Twit­ter if you like to re­ceive up­dates on web ty­pog­ra­phy, my li­braries, talks, or writ­ing. Feel free to get in touch if you have an idea or a ques­tion – I love col­lab­o­rat­ing and dis­cussing ideas with other peo­ple.

Fol­low me on Twit­ter for news and up­dates

Net Magazine: CSS font loading API

Feb­ru­ary 23, 2017

I wrote a short in­tro­duc­tion to the CSS font load­ing API for the April 2017 is­sue of Net Mag­a­zine. The ar­ti­cle high­lights the most use­ful parts of the API and how it can be used to load web fonts asyn­chro­nously.

It’s still pos­si­ble to back or­der the April 2017 is­sue of Net Mag­a­zine.

Responsive Web Design podcast: Variable Fonts

Jan­u­ary 31, 2017

My col­league Tim Brown and I joined Ethan Mar­cotte on the Re­spon­sive Web De­sign pod­cast to talk about vari­able fonts. We talked about what vari­able fonts are, and how they will af­fect re­spon­sive de­sign and web per­for­mance.

You can lis­ten to the pod­cast, or read the tran­script.

Performance Calendar 2016: Loading Web Fonts Asynchronously

De­cem­ber 21, 2016

The Web Per­for­mance Cal­en­dar is a re­cur­ring ad­vent cal­en­dar fo­cused on web per­for­mance. I wrote an ar­ti­cle on load­ing web fonts asyn­chro­nously for the 2016 cal­en­dar. The ar­ti­cle con­cisely de­scribes why web font per­for­mance mat­ters, and how to use Font Face Ob­server to get the best pos­si­ble per­for­mance and user ex­pe­ri­ence.

Web Font Loading Patterns

April 13, 2016

Web font load­ing may seem com­pli­cated, but it is ac­tu­ally quite sim­ple if you fol­low some sim­ple font load­ing pat­terns. By com­bin­ing pat­terns you can cre­ate cus­tom font load­ing be­hav­iours that work in all browsers. Con­tinue read­ing…

Web Font Anti-Patterns

Oc­to­ber 13, 2015

There is a lot of con­fu­sion about web fonts. Are they re­ally bad for per­for­mance? Maybe you should not use web fonts at all? This on­go­ing se­ries of ar­ti­cles takes a look at some of the most com­mon anti-pat­terns for cre­at­ing, us­ing, and load­ing web fonts. Web fonts can be great when used cor­rectly and with mod­er­a­tion. Con­tinue read­ing…

Preload Hints For Web Fonts

Au­gust 7, 2015

Web fonts are a pop­u­lar topic in the web per­for­mance com­mu­nity. How­ever, one fun­da­men­tal prob­lem is of­ten over­looked: web fonts are lazy loaded. Can web font pre­load hints help us? Con­tinue read­ing…

Detecting System Fonts Without Flash

July 30, 2015

Many web-based text ed­i­tors al­low the user to se­lect cus­tom fonts through a drop down menu. These font menus of­ten in­clude sys­tem fonts. Un­for­tu­nately, there is no web plat­form API for re­triev­ing a list of lo­cally in­stalled fonts.

Find out how you can use JavaScript to de­tect sys­tem fonts. Con­tinue read­ing…

Smashing Book 5: Web Fonts Performance

July 28, 2015

Smash­ing Mag­a­zine asked me to write a chap­ter about web fonts per­for­mance for Smash­ing Book 5. I think web fonts are great, but they suf­fer from one big prob­lem: by de­fault they block ren­der­ing in al­most all browsers. You may have ex­pe­ri­enced this your­self on a site us­ing web fonts while us­ing a slow cel­lu­lar net­work. Star­ing at a blank page is no fun, es­pe­cially when the con­tent has al­ready loaded.

Block­ing ren­der­ing while down­load­ing fonts is wrong and against the very idea of pro­gres­sive en­hance­ment. Af­ter all, the con­tent is what peo­ple come for. Web fonts are an en­hance­ment of that con­tent. Im­por­tant, but not crit­i­cal. This chap­ter will show you how to op­ti­mise web fonts and how to load them with­out in­con­ve­nienc­ing your vis­i­tors. Con­tinue read­ing…

The State Of Web Type

No­vem­ber 21, 2014

The State of Web Type con­tains up to date browser sup­port data for type and ty­po­graphic fea­tures. I cre­ated the State of Web Type be­cause no other browser sup­port data site goes into the nec­es­sary de­tail for type and ty­pog­ra­phy fea­tures.

The site is fre­quently up­dated with new data and en­tirely open source. Any ad­di­tions, cor­rec­tions, or com­ments are very wel­come.