{"id":333512,"date":"2021-02-04T12:36:52","date_gmt":"2021-02-04T20:36:52","guid":{"rendered":"https:\/\/css-tricks.com\/?p=333512"},"modified":"2021-02-04T12:36:54","modified_gmt":"2021-02-04T20:36:54","slug":"some-typography-blog-posts-ive-bookmarked-and-read-lately","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/some-typography-blog-posts-ive-bookmarked-and-read-lately\/","title":{"rendered":"Some Typography Blog Posts I&#8217;ve Bookmarked and Read Lately"},"content":{"rendered":"\n<ul><li><a href=\"https:\/\/manishearth.github.io\/blog\/2017\/08\/10\/font-size-an-unexpectedly-complex-css-property\/\" rel=\"noopener\"><strong>Font-size: An Unexpectedly Complex CSS Property<\/strong><\/a> \u2014 From Manish Goregaokar in 2017. Of many oddities, I found the one where <code>font: medium monospace<\/code> renders at 13px where <code>font: medium sans-serif<\/code> renders at 16px particularly weird.<\/li><li><a href=\"https:\/\/www.thegoodlineheight.com\/\" rel=\"noopener\"><strong>The good line-height<\/strong><\/a> \u2014 Since CSS supports unitless <code>line-height<\/code>, you probably shouldn&#8217;t be setting a hard number anyway.<\/li><li><a href=\"https:\/\/wicki.io\/posts\/2020-11-goodbye-google-fonts\/?\" rel=\"noopener\"><strong>Time to Say Goodbye to Google Fonts<\/strong><\/a> \u2014 Simon Wicki doesn&#8217;t mean don&#8217;t use them, they mean self-host them. Browsers are starting to <a href=\"https:\/\/developers.google.com\/web\/updates\/2020\/10\/http-cache-partitioning\" rel=\"noopener\">isolate cache<\/a> on a per-domain basis so that old argument that you buy speed because &#8220;users probably already have it cached&#8221; doesn&#8217;t hold up. I expected to hear about stuff like having more control over font loading, but this is just about the cache.<\/li><li><a href=\"https:\/\/ilovetypography.com\/2021\/01\/12\/my-favorite-fonts-of-2020\/\" rel=\"noopener\"><strong>My Favorite Typefaces of&nbsp;2020<\/strong><\/a> \u2014 John Boardley&#8217;s picks for the past year. Have you seen these &#8220;color fonts&#8221;? They are so cool. Check out <a href=\"https:\/\/liebefonts.com\/fonts\/liebeheide\" rel=\"noopener\">LiebeHeide<\/a>, it looks like real pen-on-paper.<\/li><li><a href=\"https:\/\/simonhearne.com\/2021\/layout-shifts-webfonts\/\" rel=\"noopener\"><strong>How to avoid layout shifts caused by web fonts<\/strong><\/a> \u2014 We&#8217;ve got <a href=\"https:\/\/web.dev\/cls\/\" rel=\"noopener\">CLS<\/a> (Cumulative Layout Shift) now and it&#8217;s such an important performance metric that will soon start affecting SEO. And because we have CSS control over font loading via <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/\">font-display<\/a><\/code>, that means if we set things up such that font loading shifts the page, that&#8217;s bad. I like Simon Hearne&#8217;s suggestion that we tweak both our custom font and fallback font to <a href=\"https:\/\/codepen.io\/simonjhearne\/pen\/rNMGJyr\" rel=\"noopener\">match perfectly<\/a>. I think <a href=\"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/perfect-font-fallbacks\/\">perfect fallback fonts<\/a> are one of the best CSS tricks.<\/li><li><a href=\"https:\/\/www.zeichenschatz.net\/typografie\/how-to-pick-a-typeface-for-user-interface-and-app-design.html\" rel=\"noopener\"><strong>How to pick a Typeface for User Interface and App Design?<\/strong><\/a> \u2014 Oliver Sch\u00f6ndorfer makes the case for &#8220;functional text&#8221; which is everything that isn&#8217;t body text (e.g. paragraphs of text) or display text (e.g. headers). &#8220;Clarity is key.&#8221;<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Font-size: An Unexpectedly Complex CSS Property \u2014 From Manish Goregaokar in 2017. Of many oddities, I found the one where font: medium monospace renders at 13px where font: medium sans-serif renders at 16px particularly weird. The good line-height \u2014 Since CSS supports unitless line-height, you probably shouldn&#8217;t be setting a hard number anyway. Time to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":285804,"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":[587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/font-vector-points.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":308275,"url":"https:\/\/css-tricks.com\/how-to-tame-line-height-in-css\/","url_meta":{"origin":333512,"position":0},"title":"How to Tame Line Height in CSS","date":"May 15, 2020","format":false,"excerpt":"In CSS, 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 \u2014 a term, interestingly enough, that comes from literally putting pieces of lead between lines of type.\u00a0\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/leading-lineheight.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337892,"url":"https:\/\/css-tricks.com\/intrinsic-typography-is-the-future-of-styling-text-on-the-web\/","url_meta":{"origin":333512,"position":1},"title":"Intrinsic Typography is the Future of Styling Text on the Web","date":"April 20, 2021","format":false,"excerpt":"The way we style text hasn\u2019t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. This is especially true of text styling. We write code\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/type-scale.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373905,"url":"https:\/\/css-tricks.com\/fluid-typography-wordpress-block-themes\/","url_meta":{"origin":333512,"position":2},"title":"Adding Fluid Typography Support to WordPress Block Themes","date":"October 7, 2022","format":false,"excerpt":"Fluid typography is a fancy way of \u201cdescribing font properties, such as size or line height, that scale fluidly according to the size of the viewport\u201d. It\u2019s also known by other names, like responsive typography, flexible type, fluid type, viewport sized typography, fluid typography, and even responsive display text. Here\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-fluid-typography.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299523,"url":"https:\/\/css-tricks.com\/simplified-fluid-typography\/","url_meta":{"origin":333512,"position":3},"title":"Simplified Fluid Typography","date":"November 29, 2019","format":false,"excerpt":"Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4vw), but the fluctuations\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331887,"url":"https:\/\/css-tricks.com\/on-type-patterns-and-style-guides\/","url_meta":{"origin":333512,"position":4},"title":"On Type Patterns and Style Guides","date":"January 19, 2021","format":false,"excerpt":"Over the last six years or so, I\u2019ve been using these things I\u2019ve been calling \u201ctype patterns\u201d in my web design work, and they\u2019ve worked out pretty well for me. I\u2019ll dig into what they are and how they can make their way into CSS, and maybe the idea will\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/document-styles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":319599,"url":"https:\/\/css-tricks.com\/leading-trim-the-future-of-digital-typesetting\/","url_meta":{"origin":333512,"position":5},"title":"Leading-Trim: The Future of Digital Typesetting","date":"August 21, 2020","format":false,"excerpt":"leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it \u2014 including how Microsoft has advocated for it \u2014 and that it\u2019s now part of the Inline Layout Module\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/1gXfB7QR3LpWwJEuA12drqw.gif?fit=1200%2C426&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333512"}],"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=333512"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333512\/revisions"}],"predecessor-version":[{"id":334014,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333512\/revisions\/334014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/285804"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=333512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=333512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=333512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}