- Font-size: An Unexpectedly Complex CSS Property — From Manish Goregaokar in 2017. Of many oddities, I found the one where
font: medium monospacerenders at 13px wherefont: medium sans-serifrenders at 16px particularly weird. - The good line-height — Since CSS supports unitless
line-height, you probably shouldn’t be setting a hard number anyway. - Time to Say Goodbye to Google Fonts — Simon Wicki doesn’t mean don’t use them, they mean self-host them. Browsers are starting to isolate cache on a per-domain basis so that old argument that you buy speed because “users probably already have it cached” doesn’t hold up. I expected to hear about stuff like having more control over font loading, but this is just about the cache.
- My Favorite Typefaces of 2020 — John Boardley’s picks for the past year. Have you seen these “color fonts”? They are so cool. Check out LiebeHeide, it looks like real pen-on-paper.
- How to avoid layout shifts caused by web fonts — We’ve got CLS (Cumulative Layout Shift) now and it’s such an important performance metric that will soon start affecting SEO. And because we have CSS control over font loading via
font-display, that means if we set things up such that font loading shifts the page, that’s bad. I like Simon Hearne’s suggestion that we tweak both our custom font and fallback font to match perfectly. I think perfect fallback fonts are one of the best CSS tricks. - How to pick a Typeface for User Interface and App Design? — Oliver Schöndorfer makes the case for “functional text” which is everything that isn’t body text (e.g. paragraphs of text) or display text (e.g. headers). “Clarity is key.”
Some Typography Blog Posts I’ve Bookmarked and Read Lately
Chris Coyier
on
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The self-host your font files instead of the Google Fonts CDN is bandied about often.
But what’s not covered clearly is what do they mean by “self-host.” Are they referring to your raw domain or your own CDN subdomain?
For instance, if your website is http://www.example.com and you have static.example.com (whose DNS CNAME record points to a third-party CDN) to host all other assets (e.g., css, js, images), is their advice to host the Google Fonts on static.example.com or directly on http://www.example.com?
So are they basically just suggesting you drop Google Fonts to cut down on one DNS lookup?
This seems to be one of those intentionally vague things that isn’t covered because they don’t know the answer or would prefer to avoid the question. It can’t be a blind spot as CDNs are so prevalent.
Are they actually advocating not using CDNs for anything? Not using CDNs for fonts? Or just not using Google Fonts’ CDN while pushing it to your own CDN (since you have to make that DNS lookup anyway)?
Bottomline, if you’re dropping Google Fonts, which is better:
Host fonts on your own server/domain (no CDN), which equals one DNS look-up.
Host fonts on your own CDN (as long as you’re using that same CDN to host every other static asset), which equals two DNS look-ups.
Host fonts, css, js, images, everything on your own server/domain (no CDN).