{"id":353866,"date":"2021-10-20T16:25:22","date_gmt":"2021-10-20T23:25:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=353866"},"modified":"2021-10-20T16:25:25","modified_gmt":"2021-10-20T23:25:25","slug":"some-typography-links-viii","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/some-typography-links-viii\/","title":{"rendered":"Some Typography Links VIII"},"content":{"rendered":"\n<ul class=\"is-style-super-link-list\"><li><a href=\"https:\/\/pawelgrzybek.com\/do-you-know-what-to-use-the-at-sign-for-something-other-than-email-addresses-and-twitter-handles-i-do\/\" rel=\"noopener\">Do you know what to use the @ sign for something other than email addresses and Twitter handles? I do!<\/a> \u2014 &nbsp;Pawel Grzybek notes how some old physical typewriters had an <a href=\"https:\/\/en.wikipedia.org\/wiki\/Arroba\" rel=\"noopener\">&#8220;Arroba&#8221;<\/a> on them which was represented with the @ sign.<\/li><li><a href=\"https:\/\/brailleinstitute.org\/freefont\" rel=\"noopener\">Atkinson Hyperlegible Font<\/a>  \u2014 The Braille Institute is giving away this font that &#8220;focuses on letterform distinction to increase character recognition, ultimately improving readability.&#8221; The page itself is set in it so you can get a taste for it just by going there. Looks nice to me. Sorta evokes a slab serif without actually being one?<\/li><li><a href=\"https:\/\/marvel-or-font.web.app\/\" rel=\"noopener\">Marvel Character or Font?<\/a> \u2014 14\/20 and I think I fat-fingered one. <em>Proxima Midnight?!<\/em> C&#8217;mon! <\/li><li><a href=\"https:\/\/hacks.mozilla.org\/2021\/09\/time-for-a-review-of-firefox-92\/\" rel=\"noopener\">Firefox 92<\/a> \u2014 Ruth John notes that Firefox now supports <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-size-adjust\" rel=\"noopener\">font-size-adjust<\/a><\/code> in CSS, as well as <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/size-adjust\" rel=\"noopener\">size-adjust<\/a><\/code> (which you can only use within a <code>@font-face<\/code> rule). The point is jiggering your fonts such that if a user sees <a href=\"https:\/\/css-tricks.com\/fout-foit-foft\/\">FOUT<\/a> at all, there is little reflow jank when the custom font loads. In theory, it makes <a href=\"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/perfect-font-fallbacks\/\">perfect font fallbacks<\/a> easier. <\/li><li><a href=\"https:\/\/medium.com\/tap-to-dismiss\/typography-for-data-c760e73367e0\" rel=\"noopener\">Typography for Data<\/a> \u2014 Michael Yom has to re-evalute the type styles in a design system to accomodate some some components with fairly dense\/complex type needs. <\/li><li><a href=\"https:\/\/www.ctrl.blog\/entry\/text-wrap-balance.html\" rel=\"noopener\">Improving the&nbsp;<em>New York Times\u2019<\/em>&nbsp;line wrap balancer<\/a> \u2014 Daniel&nbsp;Aleksandersen: &#8220;A text wrapping balancer is a program that tries to more evenly distribute words over multiple lines. There are at least two dozen algorithms used to achieve this.&#8221; This <a href=\"https:\/\/codeberg.org\/da\/text-balancer\" rel=\"noopener\">new one<\/a> is faster than Adobe&#8217;s <a href=\"https:\/\/opensource.adobe.com\/balance-text\/\" rel=\"noopener\">popular one<\/a>.<\/li><li><a href=\"https:\/\/designregression.com\/article\/line-length-revisited-following-the-research\" rel=\"noopener\">Line length revisited: following the&nbsp;research<\/a> \u2014 Mary Dyson goes deep. Apparently most of the older research on this was based on print, which, I hope we all know by now, just ain&#8217;t the same as a digital screen. We might be able to go a little longer, but as with anything, <em>it depends<\/em>.<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@myomelette?source=post_page-----c760e73367e0--------------------------------\" rel=\"noopener\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you know what to use the @ sign for something other than email addresses and Twitter handles? I do! \u2014 &nbsp;Pawel Grzybek notes how some old physical typewriters had an &#8220;Arroba&#8221; on them which was represented with the @ sign. Atkinson Hyperlegible Font \u2014 The Braille Institute is giving away this font that &#8220;focuses [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":306241,"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":"Seven links that've been burning a hole in my browser tabs.","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\/2020\/04\/type-scale.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":339574,"url":"https:\/\/css-tricks.com\/some-typography-links-iv\/","url_meta":{"origin":353866,"position":0},"title":"Some Typography Links IV","date":"May 7, 2021","format":false,"excerpt":"These are a few great links about typography that have been burning a hole in my saved bookmarks folder that I'm just now getting around to sharing. There's good stuff in there, from how to choose typefaces for app design to ideas for how to fix the concept of font\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/system-fonts.jpg?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":353866,"position":1},"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":350569,"url":"https:\/\/css-tricks.com\/some-typography-links-vii\/","url_meta":{"origin":353866,"position":2},"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":333512,"url":"https:\/\/css-tricks.com\/some-typography-blog-posts-ive-bookmarked-and-read-lately\/","url_meta":{"origin":353866,"position":3},"title":"Some Typography Blog Posts I&#8217;ve Bookmarked and Read Lately","date":"February 4, 2021","format":false,"excerpt":"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't be setting a hard\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/font-vector-points.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270743,"url":"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/","url_meta":{"origin":353866,"position":4},"title":"It All Started With Emoji: Color Typography on the Web","date":"May 15, 2018","format":false,"excerpt":"\u201cTypography on the web is in single color: characters are either black or red, never black and red \u2026Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters \u2014 or \u201cglyphs\u201d in font terminology. The smiley, levitating businessman and the infamous pile of poo\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/emoji-trio.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":353866,"position":5},"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":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/type-scale.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/353866"}],"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=353866"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/353866\/revisions"}],"predecessor-version":[{"id":354284,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/353866\/revisions\/354284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/306241"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=353866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=353866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=353866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}