{"id":3524,"date":"2024-08-16T10:56:48","date_gmt":"2024-08-16T15:56:48","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3524"},"modified":"2024-08-16T10:56:49","modified_gmt":"2024-08-16T15:56:49","slug":"letting-ios-text-size-setting-affect-font-size-on-the-web","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/letting-ios-text-size-setting-affect-font-size-on-the-web\/","title":{"rendered":"Letting iOS &#8220;Text Size&#8221; Setting Affect Font Size on the Web"},"content":{"rendered":"\n<p>On iOS, there is a setting for Text Size. I&#8217;ll do a video here for the current version of iOS (17.5.1) to be clear:<\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player aligncenter wp-block-jetpack-videopress--has-max-width\" style=\"max-width: 285px;\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='346' height='750' src='https:\/\/videopress.com\/embed\/uTOJW5Lg?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<p>As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn&#8217;t effect websites. I think that&#8217;s largely true, but I just learned you can honor the setting on the web as well. Craig Hockenberry wrote about this in <a href=\"https:\/\/furbo.org\/2024\/07\/04\/dynamic-type-on-the-web\/\">Dynamic Type on the Web<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\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\u2019t mean that I can. It also is a win for consistency: my site\u2019s font size matches the other text that a visitor sees on their device.<\/p>\n<\/blockquote>\n\n\n\n<p>I tend to agree. While I think few sites will actually do this, it&#8217;s nice when they do. It&#8217;s a little similar to using font family keywords like <code>system-ui<\/code> which, when supported, will match the operating system&#8217;s font, only this is even better as it&#8217;s an accessibility thing not just aesthetic. <\/p>\n\n\n\n<p>Here&#8217;s the the trick:<\/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\">html<\/span> {\n  <span class=\"hljs-comment\">\/* Default, relative sizing so other users can adjust in their own way *\/<\/span>\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1em<\/span>;\n\n  <span class=\"hljs-comment\">\/* If supported, inherits the iOS font settings *\/<\/span>\n  <span class=\"hljs-attribute\">font<\/span>: -apple-system-body;\n\n  <span class=\"hljs-comment\">\/* Override the font-family if you don't want system-ui *\/<\/span>\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Avenir Next\"<\/span>, <span class=\"hljs-string\">\"Helvetica Neue\"<\/span>, sans-serif;\n}<\/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<p>Here&#8217;s an example page.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBzpyYo\" src=\"\/\/codepen.io\/anon\/embed\/qBzpyYo?height=450&amp;theme-id=47434&amp;slug-hash=qBzpyYo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBzpyYo\" title=\"CodePen Embed qBzpyYo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And here&#8217;s a video showing it working:<\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player aligncenter wp-block-jetpack-videopress--has-max-width\" style=\"max-width: 308px;\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='346' height='750' src='https:\/\/videopress.com\/embed\/WyW3JXRT?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<p>I haven&#8217;t actually done it yet on a production project, so I can&#8217;t entirely vouch for it, but it seems safe to me and like a good idea. I&#8217;ll likely give it a go in the future. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>On iOS, there is a setting for Text Size. I&#8217;ll do a video here for the current version of iOS (17.5.1) to be clear: As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn&#8217;t effect websites. I think that&#8217;s largely true, but I just learned [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3537,"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":[1],"tags":[7,107,39],"class_list":["post-3524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-ios","tag-typography"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/08\/font-size-thumb.png?fit=1290%2C548&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3524","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=3524"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":3538,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3524\/revisions\/3538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/3537"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}