read the rest of the post<\/a> to see ’em all (and to get a good ol’ dose of Chris-isms \u2014 I know I miss them!).<\/p>\n","protected":false},"excerpt":{"rendered":"Apple unveiled an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font’s variations, explaining how the font provides a spectrum of variations based on the width and weight. It’s a remarkable read if you haven’t checked it.<\/p>\n","protected":false},"author":2508,"featured_media":367362,"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":"Classic @chriscoyier!","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[777,712,1371],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/sf-font-grid.png?fit=1600%2C920&ssl=1","jetpack-related-posts":[{"id":265593,"url":"https:\/\/css-tricks.com\/one-file-many-options-using-variable-fonts-web\/","url_meta":{"origin":367361,"position":0},"title":"One File, Many Options: Using Variable Fonts on the Web","date":"January 29, 2018","format":false,"excerpt":"In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it's unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/using-variable-fonts-4.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266058,"url":"https:\/\/css-tricks.com\/use-variable-fonts-real-world\/","url_meta":{"origin":367361,"position":1},"title":"How to use variable fonts in the real world","date":"January 29, 2018","format":false,"excerpt":"Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that\u2019s the technology that allows us to bundle multiple widths and weights into a single font file). Here\u2019s the really exciting part though: Two months ago browser\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245539,"url":"https:\/\/css-tricks.com\/opentype-variations-fonts\/","url_meta":{"origin":367361,"position":2},"title":"\u201cOpenType Variations Fonts\u201d","date":"September 18, 2016","format":false,"excerpt":"Over on the Typekit Blog, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification. This might not sound all that exciting at first, but \u201cvariable fonts\u201d allows designers and developers to embed a single font file into\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":204973,"url":"https:\/\/css-tricks.com\/i-left-my-system-fonts-in-san-francisco\/","url_meta":{"origin":367361,"position":3},"title":"I Left My System Fonts in San Francisco","date":"July 14, 2015","format":false,"excerpt":"A post by Craig Hockenberry that details how to use the San Francisco system font for your website if you're running El Capitan. I especially like Craig's suggestion for a new syntax when using any operating system's font, so for example in iOS that would probably be San Francisco or\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":273367,"url":"https:\/\/css-tricks.com\/weird-things-variable-fonts-can-do\/","url_meta":{"origin":367361,"position":4},"title":"Weird things variable fonts can do","date":"July 20, 2018","format":false,"excerpt":"I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that's a common use case. Just check out many of the interactive demos over at\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/variable-font-grass.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":245822,"url":"https:\/\/css-tricks.com\/system-fonts-svg\/","url_meta":{"origin":367361,"position":5},"title":"System Fonts in SVG","date":"September 23, 2016","format":false,"excerpt":"There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367361"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=367361"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367361\/revisions"}],"predecessor-version":[{"id":367365,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367361\/revisions\/367365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/367362"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=367361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=367361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=367361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}