{"id":43995,"date":"2024-07-05T16:16:59","date_gmt":"2024-07-05T20:16:59","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=43995"},"modified":"2024-07-08T12:08:03","modified_gmt":"2024-07-08T16:08:03","slug":"dynamic-type-on-the-web","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2024\/07\/05\/dynamic-type-on-the-web\/","title":{"rendered":"Dynamic Type on the Web"},"content":{"rendered":"<p><a href=\"https:\/\/furbo.org\/2024\/07\/04\/dynamic-type-on-the-web\/\">Craig Hockenberry<\/a>:<\/p>\n<blockquote cite=\"https:\/\/furbo.org\/2024\/07\/04\/dynamic-type-on-the-web\/\">\n<p>This site now supports Dynamic Type on iOS and iPadOS. If you go to System Settings on your iPhone or iPad, and change the setting for <em>Display &amp; Brightness &gt; Text Size<\/em>, you&rsquo;ll see the change reflected on this website.<\/p>\n<p>This is a big win for accessibility: many folks make this adjustment on their device to match their abilities. Just because you can read a tiny font doesn&rsquo;t mean that I can. It also is a win for consistency: my site&rsquo;s font size matches the other text that a visitor sees on their device.<\/p>\n<p>The best part is that this improvement can be realized with only a few lines of CSS:<\/p>\n<pre>html {\n  font-size: 0.9em;\n  font: -apple-system-body;\n  font-family: \"Avenir Next\", \"Helvetica Neue\", sans-serif;\n}<\/pre>\n\n<\/blockquote>\n<p>Note that his site gets the system <em>sizing<\/em> but does not have to use the system <em>font<\/em>.<\/p>\n\n<p>Previously:<\/p>\n<ul>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2018\/04\/02\/system-fonts-in-css\/\">System Fonts in CSS<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2015\/07\/11\/css-font-family-for-san-francisco\/\">CSS Font Family for San Francisco<\/a><\/li>\n<\/ul>\n\n<p id=\"dynamic-type-on-the-web-update-2024-07-08\">Update (2024-07-08): <a href=\"https:\/\/mastodon.social\/@lapcatsoftware\/112730595893452769\">Jeff Johnson<\/a>:<\/p>\n<blockquote cite=\"https:\/\/mastodon.social\/@lapcatsoftware\/112730595893452769\">\n<p>The text is kind of small on the Mac.<\/p>\n<\/blockquote>\n\n<p><a href=\"https:\/\/mastodon.social\/@chockenberry\/112730981942404518\">Craig Hockenberry<\/a>:<\/p>\n<blockquote cite=\"https:\/\/mastodon.social\/@chockenberry\/112730981942404518\"><p>That&rsquo;s macOS setting a default value that&rsquo;s too small. (And I cover some mitigation in the post.)<\/p><\/blockquote>\n\n<p><a href=\"https:\/\/mastodon.social\/@chockenberry\/112742336548382081\">Craig Hockenberry<\/a>:<\/p>\n<blockquote cite=\"https:\/\/mastodon.social\/@chockenberry\/112742336548382081\"><p>I&rsquo;d like it to be higher. But doing so punishes people on mobile devices who aren&rsquo;t using Safari. This is what it looks like on Android.<\/p><p>I&rsquo;m not holding out on this being a standard outside the Apple ecosystem because AFAIK there isn&rsquo;t a notion of Dynamic Type on other platforms.<\/p><p>The failing here is Apple not implementing it on all of <em>their<\/em> platforms.<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Craig Hockenberry: This site now supports Dynamic Type on iOS and iPadOS. If you go to System Settings on your iPhone or iPad, and change the setting for Display &amp; Brightness &gt; Text Size, you&rsquo;ll see the change reflected on this website. This is a big win for accessibility: many folks make this adjustment on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2024-07-05T20:17:02Z","apple_news_api_id":"d78c9e60-5866-4405-9e77-71fa0e1b41fc","apple_news_api_modified_at":"2024-07-08T16:08:06Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAA==","apple_news_api_share_url":"https:\/\/apple.news\/A14yeYFhmRAWed3H6DhtB_A","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[930,338,134,96,328],"class_list":["post-43995","post","type-post","status-publish","format-standard","hentry","category-technology","tag-accessibility","tag-css","tag-typography","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/43995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=43995"}],"version-history":[{"count":2,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/43995\/revisions"}],"predecessor-version":[{"id":44004,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/43995\/revisions\/44004"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=43995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=43995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=43995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}