{"id":306133,"date":"2020-04-03T14:54:16","date_gmt":"2020-04-03T21:54:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=306133"},"modified":"2021-08-24T12:09:22","modified_gmt":"2021-08-24T19:09:22","slug":"some-typography-links","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/some-typography-links\/","title":{"rendered":"Some Typography Links II"},"content":{"rendered":"\n

I just can’t stop bookmarking great links related to typography. I’m afraid I’m going to have to subject you, yet again<\/a>, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy.<\/p>\n\n\n\n\n\n\n\n

\n\n\n\n

I know there are lots of good reasons to be excited about variable fonts. The design possibilities of endless variations in one file is chief among them. But I remain the most excited about the performance benefits. Having a single file that elegantly handles the thicker weights (for bolding) and italics is so cool. I can’t wait to wave my fist saying back in my day we had to load multiple files for our font variations! <\/em><\/p>\n\n\n\n

Mandy Michael digs into the performance implications<\/a> in a deeper way than just reducing the number of requests. <\/p>\n\n\n\n

Even if you consider the slightly larger file sizes, when combined with improved font compression formats like WOFF2, font subsetting and font loading techniques like font-display: swap;<\/code> we end up in a situation where we can<\/em> still get smaller overall font file sizes as well as a significant increase in stylistic opportunity.<\/p><\/blockquote>\n\n\n\n

\n\n\n\n

Anna Monus did some variable font performance testing<\/a> as well, evaluating the extreme case of loading 12 variations of a font against a variable font. Even though the copy of the variable font she had for Roboto was massive (over 1MB), there was a perf gain compared against loading 12 variations.<\/p>\n\n\n\n

\n\n\n\n

Roboto is on Google Fonts, of course, and it’s got the #1 position<\/a> by far. But Google Fonts has Inter<\/a> now, and I’d expect that leap up in the charts as it’s got a style that everyone seems to like and can work with just about anything.<\/p>\n\n\n\n

\n\n\n\n

Seeing a variable font control a smiley face<\/a> is never not gonna make me happy. Don’t miss that first face-ness slider, lollllz.<\/p>\n\n\n\n

\n\n\n\n

Klint Finley on the proliferation of high-quality open-source fonts<\/a> for WIRED. Sometimes they are backed by companies with thick wallets, which makes sense. But the motivation for doing it varies. Sometimes quality is the goal. Like open-source anything, lots of contributions, can, if handled well, lead to a better product. But open-source doesn’t always mean there isn’t a business possibility, and if not, not everyone cares<\/a> about turning a profit on everything.<\/p>\n\n\n\n

\n\n\n\n

Speaking of open-source fonts, Collletttivo<\/a> is an open-source font foundry with a good dozen typefaces, including a variable font one. It’s a super fun site to explore with the little fake windows you open up and move around. <\/p>\n\n\n\n

\n\n\n\n

There’s a new mac app called FontGoggles<\/a> for poking into a font file and taking a look at what it offers. Seems like that would be easy but it really isn’t. I like that it supports WOFF\/2 as that’s pretty much all we deal with on the web. <\/p>\n\n\n\n

Also, remember there is a website that looks around in font files with the best name ever<\/a>.<\/p>\n\n\n\n

\n\n\n\n

Font Match<\/a> allows you to put fonts on top of each other for comparisons. Seems like it’s more for large type and comparing their features, while Font style matcher<\/a> is more about comparing paragraph text. <\/p>\n\n\n\n

In fact, using Font style matcher to make a perfect font fallback is one of my all-time favorite CSS-Tricks. Sssshh…<\/em> don’t tell anybody but I’m compiling those all-time favorites into a book, like this chapter<\/a>. You’d have to subscribe to read it, because that’s kind of the point: I’d like to sell the book. So if you happen to subscribe now, there is stuff to read there, but you’d be a very early supporter for the rest of it.<\/p>\n","protected":false},"excerpt":{"rendered":"

I just can’t stop bookmarking great links related to typography. I’m afraid I’m going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306133"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=306133"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306133\/revisions"}],"predecessor-version":[{"id":350561,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306133\/revisions\/350561"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=306133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=306133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=306133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}