When you use
font-display: swap;, which Google Fonts does when you use the default
&display=swap part of the URL , you’re already saying, “I’m cool with FOUT,” which is another way of saying web text is displayed right away, and when the web font is ready, “swap” to it.
line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about
line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type.
line-height, however similar, have some important differences. To understand those differences, we first have to understand a bit more about typography. … Read article “How to Tame Line Height in CSS”
The web is a beautiful, expressive medium that’s evolved over time as trends and technology have changed. Moments of delight and flair are what set companies apart from one another. At the same time, today’s top products rely on scalable, component-based design systems to efficiently develop a coherent brand. And it’s more important than ever to have accessibility and a solid user experience baked in from the start! But these two worlds — creative web design and systematic web design … Read article “Material Theming: Making Material Your Own!”
Hey! This whole article is about a time before May 2019 in which Google Fonts didn’t offer a way to use font-display without self-hosting the fonts.
To use font-display with Google Fonts, you include a URL parameter like
&display=swap in the URL, like https://fonts.googleapis.com/css?family=Open+Sans&display=swap. If you’re copying code from Google Fonts now, it’s the default, so you get it automatically, but you might want to add it if you have existing URLs to Google fonts lingering around, or you want … Read article “Google Fonts and font-display”