{"id":1212,"date":"2024-03-11T17:21:36","date_gmt":"2024-03-11T23:21:36","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1212"},"modified":"2024-03-11T17:21:36","modified_gmt":"2024-03-11T23:21:36","slug":"modern-font-stacks","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/modern-font-stacks\/","title":{"rendered":"Modern Font Stacks"},"content":{"rendered":"\n<p>Just a little appreciation for Dan Klammer&#8217;s <a href=\"https:\/\/modernfontstacks.com\/\">Modern Font Stacks<\/a> project. Not loading any custom fonts doesn&#8217;t need to mean being relegated to the Helvetica\/Arial hole, system fonts (even though I do kinda love <a href=\"https:\/\/chriscoyier.net\/2022\/08\/02\/actually-the-san-francisco-typeface-does-ship-as-a-variable-font\/\">San Francisco<\/a>), or some bummer typeface you feel pushed into.<\/p>\n\n\n\n<p>I particularly like the Geometric Humanist stack:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">font-family<\/span>: <span class=\"hljs-selector-tag\">Avenir<\/span>, <span class=\"hljs-selector-tag\">Montserrat<\/span>, <span class=\"hljs-selector-tag\">Corbel<\/span>, '<span class=\"hljs-selector-tag\">URW<\/span> <span class=\"hljs-selector-tag\">Gothic<\/span>', <span class=\"hljs-selector-tag\">source-sans-pro<\/span>, <span class=\"hljs-selector-tag\">sans-serif<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<!--more-->\n\n\n\n<p>Look at how nicely it renders across all the different major operating systems:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/03\/geometric-humanist-preview.gif?resize=1024%2C531&#038;ssl=1\" alt=\"\" class=\"wp-image-1215\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/03\/geometric-humanist-preview.gif?resize=1024%2C531&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/03\/geometric-humanist-preview.gif?resize=300%2C155&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/03\/geometric-humanist-preview.gif?resize=768%2C398&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/03\/geometric-humanist-preview.gif?resize=1536%2C796&amp;ssl=1 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>It&#8217;s also impressive to me that all the major operating systems ship some sort of <a href=\"https:\/\/github.com\/system-fonts\/modern-font-stacks?tab=readme-ov-file#handwritten\">handwriting font<\/a> that is half decent. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just a little appreciation for Dan Klammer&#8217;s Modern Font Stacks project. Not loading any custom fonts doesn&#8217;t need to mean being relegated to the Helvetica\/Arial hole, system fonts (even though I do kinda love San Francisco), or some bummer typeface you feel pushed into. I particularly like the Geometric Humanist stack:<\/p>\n","protected":false},"author":1,"featured_media":1216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,39],"class_list":["post-1212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-typography"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/03\/stacks-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1212"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1212\/revisions"}],"predecessor-version":[{"id":1217,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1212\/revisions\/1217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1216"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}