{"id":344411,"date":"2021-07-16T07:42:40","date_gmt":"2021-07-16T14:42:40","guid":{"rendered":"https:\/\/css-tricks.com\/?p=344411"},"modified":"2021-09-01T10:25:40","modified_gmt":"2021-09-01T17:25:40","slug":"some-typography-links-vi","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/some-typography-links-vi\/","title":{"rendered":"Some Typography Links VI"},"content":{"rendered":"\n<ul class=\"is-style-super-link-list\"><li><a href=\"https:\/\/wh0.github.io\/2021\/04\/25\/glitter.html\" rel=\"noopener\">Glitter text<\/a> \u2014 whO (I learned a name for people who go by a one-word moniker like that: Mononymous) created a <a href=\"https:\/\/wh0.github.io\/glitter\/\" rel=\"noopener\">builder<\/a> for fancy SVG-based type. It&#8217;s a custom font with <code>&lt;text&gt;<\/code>, and the fancy comes in with a gradient and somewhat exotic filters that make noise and blend the noise into the color.<br><\/li><li><a href=\"https:\/\/markboulton.co.uk\/journal\/optical-sizing-for-dark-mode\/\" rel=\"noopener\">Optical Size tweaking for dark mode<\/a> \u2014 Mark Boulton opens by questioning the usefulness of variable fonts (blaspheme!) but then finds a nice use case in adjusting the optical size in dark mode. Robin <a href=\"https:\/\/css-tricks.com\/dark-mode-and-variable-fonts\/\">covered that right here<\/a> not too long ago. <br><\/li><li><a href=\"https:\/\/pixelambacht.nl\/2021\/optical-size-hidden-superpower\/\" rel=\"noopener\">Optical size, the hidden superpower of variable fonts<\/a> \u2014 Speaking of optical size, Roel Nieskens digs into that here. It&#8217;s not just a weight thing&#8230; <q>This feature will make letters actually&nbsp;change the way they look&nbsp;when shown in small or large sizes. It all happens automatically in the browser.&#8221;<\/q><br><\/li><li><a href=\"https:\/\/piperhaywood.com\/updates-to-v-fonts-com\/\" rel=\"noopener\">Updates to v-fonts.com<\/a> \u2014 Annnnd speaking of variable fonts, Piper Haywood talks about some updates to <a href=\"https:\/\/v-fonts.com\/\" rel=\"noopener\">v-fonts.com<\/a>, introducing some browsable taxonomies. It takes me about 20 seconds browing this site to want to redesign everything using variable fonts.<br><\/li><li><a href=\"https:\/\/betterwebtype.com\/articles\/2021\/06\/07\/all-you-need-is-5-fonts\/\" rel=\"noopener\">All you need is 5 fonts<\/a> \u2014 (<em>Matej Latin<\/em>) I&#8217;ve been hearing about these mythical designers who focus all their creative energy on deep-learning how to use a very limited set of fonts. Maybe it&#8217;s kinda the same as us web nerds who only know HTML, CSS, and JavaScript and leave it at that.<br><\/li><li><a href=\"https:\/\/web.dev\/font-best-practices\/\" rel=\"noopener\">Best practices for fonts<\/a> \u2014 <a href=\"https:\/\/web.dev\/css-web-vitals\/\" rel=\"noopener\">Just like CSS<\/a>, fonts affect Web Core Vitals in big ways (e.g. layout shifts and paints). Katie Hempenius is at it again here covering how to make fonts faster. I think these best practices are starting to set in a bit&#8230; preconnecting to the font host, subsetting, <code>font-display<\/code>, etc.<br><\/li><li><a href=\"https:\/\/www.sansbullshitsans.com\/\" rel=\"noopener\">Sans&nbsp;Bullshit&nbsp;Sans<\/a> \u2014 Kinda like the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/cloud-to-butt-plus\/apmlngnhgbnjpajelfkmabhkfapgnoai?hl=en\" rel=\"noopener\">Cloud to Butt<\/a> browser plugin, only the text replacements are done via ligatures (&#x1f92f;) converting them into little Comic Sans badges. Some of them are angled? How the heck does that work?<br><\/li><li><a href=\"https:\/\/hicks.design\/journal\/bryan-font\" rel=\"noopener\">Bryan Font<\/a> \u2014 Jon Hicks builds a font for his father, John Bryan Hicks, who passed away. What a loving tribute.<br><\/li><li><a href=\"https:\/\/lea.verou.me\/2021\/06\/inherit-ancestor-font-size-for-fun-and-profit\/\" rel=\"noopener\">Inherit ancestor font-size, for fun and profit<\/a> \u2014 Lea Verou finds yet another use case for <code>@property<\/code>. I wonder if it&#8217;s an emerging best practice to register all your custom properties, since it unlocks possibilites and makes them behave more like you expect them to behave. Lea shows how you can browser test for <code>@property<\/code> in JavaScript, but if you for some reason you can&#8217;t do that and don&#8217;t mind pretty mind-bending CSS, <a href=\"https:\/\/twitter.com\/James0x57\/status\/1408873953087610883\" rel=\"noopener\">Jane has pure CSS way<\/a>. <br><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Glitter text \u2014 whO (I learned a name for people who go by a one-word moniker like that: Mononymous) created a builder for fancy SVG-based type. It&#8217;s a custom font with &lt;text&gt;, and the fancy comes in with a gradient and somewhat exotic filters that make noise and blend the noise into the color. Optical [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":278715,"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":"More links that are burning a hole in my bookmarks folder.","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\/2018\/05\/typography.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":350569,"url":"https:\/\/css-tricks.com\/some-typography-links-vii\/","url_meta":{"origin":344411,"position":0},"title":"Some Typography Links VII","date":"September 1, 2021","format":false,"excerpt":"All-things-typography, from a hard-edged monospaced variable font to fonts in the \"Twilight Zone\" ... and much, much more.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/tb-signs_1024x1024@2x-1.png?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265593,"url":"https:\/\/css-tricks.com\/one-file-many-options-using-variable-fonts-web\/","url_meta":{"origin":344411,"position":1},"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 &quot;Article&quot;","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":306566,"url":"https:\/\/css-tricks.com\/dark-mode-and-variable-fonts\/","url_meta":{"origin":344411,"position":2},"title":"Dark mode and variable fonts","date":"April 23, 2020","format":false,"excerpt":"Not so long ago, we wrote about dark mode in CSS and I\u2019ve been thinking about how white text on a black background is pretty much always harder to read than black text on a white background. After thinking about this for a while, I realized that we can fix\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/dark-light-text-backgrounds.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365377,"url":"https:\/\/css-tricks.com\/creating-style-variations-in-wordpress-block-themes\/","url_meta":{"origin":344411,"position":3},"title":"How to Create Style Variations in WordPress 6.0 Block Themes","date":"May 16, 2022","format":false,"excerpt":"Global styles, a feature of the block themes, is one of my favorite parts of creating block themes. The concept of global style variations in WordPress were introduced in Gutenberg 12.5 which would allow theme authors to create alternate variations of a block theme with different combinations of colors, fonts,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/04\/wirdpress-global-style-variations.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283420,"url":"https:\/\/css-tricks.com\/typography-for-developers\/","url_meta":{"origin":344411,"position":4},"title":"Typography for Developers","date":"February 27, 2019","format":false,"excerpt":"This is intended as a practical guide for developers to learn web typography. We\u2019ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We\u2019ll go over\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365677,"url":"https:\/\/css-tricks.com\/colrv1-and-css-font-palette-web-typography\/","url_meta":{"origin":344411,"position":5},"title":"COLRv1 and CSS font-palette: Web Typography Gets Colorful","date":"May 11, 2022","format":false,"excerpt":"According to Toshi Omagari, the author of Arcade Game Typography, the world\u2019s first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344411"}],"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=344411"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344411\/revisions"}],"predecessor-version":[{"id":351108,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344411\/revisions\/351108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278715"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=344411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=344411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=344411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}