{"id":3115,"date":"2019-01-20T14:56:06","date_gmt":"2019-01-20T14:56:06","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3115"},"modified":"2023-02-28T08:35:10","modified_gmt":"2023-02-28T08:35:10","slug":"css-tutorial-some-typography-blog-posts-ive-bookmarked-and-read-lately","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-some-typography-blog-posts-ive-bookmarked-and-read-lately\/","title":{"rendered":"CSS Tutorial &#8211; Some Typography Blog Posts I\u2019ve Bookmarked and Read Lately"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Some Typography Blog Posts I\u2019ve Bookmarked and Read Lately<\/p>\n<ul>\n<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>\u00a0\u2014 From Manish Goregaokar in 2017. Of many oddities, I found the one where\u00a0<code>font: medium monospace<\/code>\u00a0renders at 13px where\u00a0<code>font: medium sans-serif<\/code>\u00a0renders at 16px particularly weird.<\/li>\n<li><a href=\"https:\/\/www.thegoodlineheight.com\/\" rel=\"noopener\"><strong>The good line-height<\/strong><\/a>\u00a0\u2014 Since CSS supports unitless\u00a0<code>line-height<\/code>, you probably shouldn\u2019t be setting a hard number anyway.<\/li>\n<li><a href=\"https:\/\/wicki.io\/posts\/2020-11-goodbye-google-fonts\/?\" rel=\"noopener\"><strong>Time to Say Goodbye to Google Fonts<\/strong><\/a>\u00a0\u2014 Simon Wicki doesn\u2019t mean don\u2019t use them, they mean self-host them. Browsers are starting to\u00a0<a href=\"https:\/\/developers.google.com\/web\/updates\/2020\/10\/http-cache-partitioning\" rel=\"noopener\">isolate cache<\/a>\u00a0on a per-domain basis so that old argument that you buy speed because \u201cusers probably already have it cached\u201d doesn\u2019t hold up. I expected to hear about stuff like having more control over font loading, but this is just about the cache.<\/li>\n<li><a href=\"https:\/\/ilovetypography.com\/2021\/01\/12\/my-favorite-fonts-of-2020\/\" rel=\"noopener\"><strong>My Favorite Typefaces of\u00a02020<\/strong><\/a>\u00a0\u2014 John Boardley\u2019s picks for the past year. Have you seen these \u201ccolor fonts\u201d? They are so cool. Check out\u00a0<a href=\"https:\/\/liebefonts.com\/fonts\/liebeheide\" rel=\"noopener\">LiebeHeide<\/a>, it looks like real pen-on-paper.<\/li>\n<li><a href=\"https:\/\/simonhearne.com\/2021\/layout-shifts-webfonts\/\" rel=\"noopener\"><strong>How to avoid layout shifts caused by web fonts<\/strong><\/a>\u00a0\u2014 We\u2019ve got\u00a0<a href=\"https:\/\/web.dev\/cls\/\" rel=\"noopener\">CLS<\/a>\u00a0(Cumulative Layout Shift) now and it\u2019s such an important performance metric that will soon start affecting SEO. And because we have CSS control over font loading via\u00a0<code><\/code>font-display, that means if we set things up such that font loading shifts the page, that\u2019s bad. I like Simon Hearne\u2019s suggestion that we tweak both our custom font and fallback font to\u00a0<a href=\"https:\/\/codepen.io\/simonjhearne\/pen\/rNMGJyr\" rel=\"noopener\">match perfectly<\/a>. I think\u00a0perfect fallback fonts\u00a0are one of the best CSS tricks.<\/li>\n<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>\u00a0\u2014 Oliver Sch\u00f6ndorfer makes the case for \u201cfunctional text\u201d which is everything that isn\u2019t body text (e.g. paragraphs of text) or display text (e.g. headers). \u201cClarity is key.\u201d<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Some Typography Blog Posts I\u2019ve Bookmarked and Read Lately <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-some-typography-blog-posts-ive-bookmarked-and-read-lately\/\" title=\"CSS Tutorial &#8211; Some Typography Blog Posts I\u2019ve Bookmarked and Read Lately\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[197,295,103,227],"newstopic":[],"class_list":{"0":"post-3115","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-tutorial","9":"tag-typography","10":"tag-web-design","11":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3115"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3115\/revisions"}],"predecessor-version":[{"id":3117,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3115\/revisions\/3117"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3842"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3115"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}