Zach Leatherman worked closely with Chris to figure out the font loading strategy for this very website you're reading. Zach walks us through the design in this write-up and shares techniques that can be applied to other projects.
Spoiler alert: Font loading is a complex and important part of a project.
The really interesting part of this post is the way that Zach talks about changing the design based on what’s best for the codebase — or as Harry Roberts calls it, “normalising the design.” Is a user really going to notice the difference between font-weight: 400 and font-weight: 500? Well, if we can ditch a whole font file, then that could have a significant impact on performance which, in turn, improves the user experience.
I guess the conversation can instead be framed like this: Does the user experience of this font outweigh the user experience of a slightly faster website?
And this isn’t a criticism of the design at all! I think Zach shows us what a healthy relationship between designers and developers can look like: collaborating and making joint decisions based on the context and the problem at hand, rather than treating static mockups as the final, concrete source of truth.
Direct Link to Article — Permalink
The post Developing a robust font loading strategy for CSS-Tricks appeared first on CSS-Tricks.
from CSS-Tricks https://www.zachleat.com/web/css-tricks-web-fonts/
Developing a robust font loading strategy for CSS-Tricks was initially published to The Instant Web Site Tools Blog
source https://www.instant-web-site-tools.com/2019/07/10/developing-a-robust-font-loading-strategy-for-css-tricks/
No comments:
Post a Comment