Zach Leatherman
“Always ask yourself What Would Zach Do?”—@adactio on adactio.com/links/14311 😱😱😱😎😱😱😱😱😱😱
The Font Loading Checklist—zachleat.com
This checklist came in very handy during a performance-related workshop I was running today (I may have said the sentence “Always ask yourself What Would Zach Do?”).
- Start Important Font Downloads Earlier (Start a Web Font load)
- Prioritize Readable Text (Behavior while a Web Font is loading)
- Make Fonts Smaller (Reduce Web Font load time)
- Reduce Movement during Page Load (Behavior after a Web Font has loaded)
The first two are really straightforward to implement (with rel="preload" and font-display). The second two take more work (with subsetting and the font loading API).
Responses
Timothy Miller
Zach Leatherman
Related links
Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter
This is a very handy piece of work by Rich:
The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the line-length).
Bunny Fonts | Explore Faster & GDPR friendly Fonts
A drop-in replacement for Google Fonts without the tracking …but really, you should be self-hosting your font files.
Proxima Vara by Mark Simonson
Oh, nice! A version of the classic Proxima Nova that’s a variable font that allows you to vary weight, width, and slant.
Google font to SVG path
Cassie pointed me to this very nifty tool (that she plans to use in your SVG animation workshop): choose font from Google Fonts, type some text, and get the glyphs immediately translated into an SVG!
Dark mode and variable fonts | CSS-Tricks
This is such a clever use of variable fonts!
We can use a lighter font weight to make the text easier to read whenever dark mode is active.
Related posts
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Sass and clamp
Worst buddy movie ever.
An nth-letter selector in CSS
The latest installment in the long tradition of calling for this pseudo-element.
Understandable excitement
Why I get more excited about new CSS features and JavaScript APIs than I do about new frameworks, libraries, or build tools.
Small steps
Making marginal gains in front-end performance.