{"id":339455,"date":"2021-05-04T14:16:04","date_gmt":"2021-05-04T21:16:04","guid":{"rendered":"https:\/\/css-tricks.com\/?p=339455"},"modified":"2021-05-04T14:16:07","modified_gmt":"2021-05-04T21:16:07","slug":"16px-or-larger-text-prevents-ios-form-zoom","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/16px-or-larger-text-prevents-ios-form-zoom\/","title":{"rendered":"16px or Larger Text Prevents iOS Form Zoom"},"content":{"rendered":"\n<p>This was a great <a href=\"https:\/\/twitter.com\/joshwcomeau\/status\/1379782931116351490?s=12\" rel=\"noopener\">&#8220;Today I Learned&#8221; for me from Josh W. Comeau<\/a>. If the <code>font-size<\/code> of an <code>&lt;input&gt;<\/code> is 16px or larger, Safari on iOS will focus into the input normally. But as soon as the <code>font-size<\/code> is 15px or less, the viewport will zoom into that input. Presumably, because it considers that type too small and wants you to see what you are doing. So it zooms in to help you. Accessibility. If you don&#8217;t want that, make the font big enough. <\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">\ud83d\udd25 Set your form inputs to have a font-size of 1rem (16px) or larger to prevent iOS Safari from automatically zooming in when tapped.<br><br>Makes such a big difference from a UX perspective! <a href=\"https:\/\/t.co\/6UpicwMaWE\">pic.twitter.com\/6UpicwMaWE<\/a><\/p>&mdash; Josh W. Comeau (@JoshWComeau) <a href=\"https:\/\/twitter.com\/JoshWComeau\/status\/1379782931116351490?ref_src=twsrc%5Etfw\" rel=\"noopener\">April 7, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/joshwcomeau\/pen\/VwPMPZo\" rel=\"noopener\">Here&#8217;s Josh&#8217;s exact Pen<\/a> if you want to have a play yourself.<\/p>\n\n\n\n<p>In general, I&#8217;d say I like this feature. It helps people see what they are doing and discourages super-tiny font sizes. What is a slight bummer\u2009\u2014\u2009and I really don&#8217;t blame anyone here\u2009\u2014\u2009is that not all typefaces are created equal in terms of readability at different sizes. For example, here&#8217;s San Francisco versus Caveat at 16px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?resize=558%2C344&#038;ssl=1\" alt=\"\" class=\"wp-image-339725\" width=\"558\" height=\"344\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?resize=1024%2C631&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?resize=300%2C185&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?resize=768%2C473&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?resize=1000%2C616&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?w=1272&amp;ssl=1 1272w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>San Francisco on the left, Cavet on the right. Caveat looks visually much smaller even though the <code>font-size<\/code> is the same.<\/figcaption><\/figure>\n\n\n\n<p>You can view <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/MWJxXWz\" rel=\"noopener\">that example<\/a> in <a href=\"https:\/\/cdpn.io\/chriscoyier\/debug\/MWJxXWz\" rel=\"noopener\">Debug Mode<\/a> to see for yourself and change the font size to see what does and doesn&#8217;t zoom. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This was a great &#8220;Today I Learned&#8221; for me from Josh W. Comeau. If the font-size of an &lt;input&gt; is 16px or larger, Safari on iOS will focus into the input normally. But as soon as the font-size is 15px or less, the viewport will zoom into that input. Presumably, because it considers that type [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":339725,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[595,872],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?fit=1272%2C784&ssl=1","jetpack-related-posts":[{"id":306222,"url":"https:\/\/css-tricks.com\/accessible-font-sizing-explained\/","url_meta":{"origin":339455,"position":0},"title":"Accessible Font Sizing, Explained","date":"April 23, 2020","format":false,"excerpt":"The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web. But we know there\u2019s such a thing as text that is too small to be legible, just as text that can be too large to\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":[]},{"id":301720,"url":"https:\/\/css-tricks.com\/how-do-you-do-max-font-size-in-css\/","url_meta":{"origin":339455,"position":1},"title":"How Do You Do max-font-size in CSS?","date":"January 29, 2020","format":false,"excerpt":"CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to get tricky. Why would you need it at all? Well, font-size itself can be set in dynamic ways. For example, font-size: 10vw;. That's using \"viewport units\" to size the type, which will\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":187751,"url":"https:\/\/css-tricks.com\/styling-cross-browser-compatible-range-inputs-css\/","url_meta":{"origin":339455,"position":2},"title":"Styling Cross-Browser Compatible Range Inputs with CSS","date":"November 5, 2014","format":false,"excerpt":"Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS. In this tutorial, we will take a basic range input (<input type=\"range\">): Screenshot of a range input, Mac Chrome 38 And turn it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19072,"url":"https:\/\/css-tricks.com\/dropdown-default-styling\/","url_meta":{"origin":339455,"position":3},"title":"Dropdown Default Styling","date":"November 1, 2012","format":false,"excerpt":"There has always been big differences across how different browsers handle form styling. There probably always will be - because UI design choices aren't described in the specs. Browser makers perhaps view this as one of the ways they can differentiate the user experience a bit. Select (dropdown) menus are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365531,"url":"https:\/\/css-tricks.com\/improving-icons-for-ui-elements-with-typographic-alignment-and-scale\/","url_meta":{"origin":339455,"position":4},"title":"Improving Icons for UI Elements with Typographic Alignment and Scale","date":"May 17, 2022","format":false,"excerpt":"Utilizing icons in user interface elements is helpful. In addition to element labeling, icons can help reinforce a user element\u2019s intention to users. But I have to say, I notice a bit of icon misalignment while browsing the web. Even if the icon\u2019s alignment is correct, icons often do not\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/align-icons-featured-image.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":343149,"url":"https:\/\/css-tricks.com\/the-dilemma-of-naming-font-size-variables\/","url_meta":{"origin":339455,"position":5},"title":"The Dilemma of Naming Font Size Variables","date":"July 6, 2021","format":false,"excerpt":"Normally, a project will have a set of pre-determined font sizes, usually as variables named in such a way that seeks some semblance of order and consistency. Any project of considerable size can use something like that. There are always headings, paragraphs, lists, etc. You could set font sizes explicitly\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/animal-variable-names.png?fit=862%2C332&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-9.11.55-AM.png?fit=1024%2C631&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339455"}],"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=339455"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339455\/revisions"}],"predecessor-version":[{"id":339932,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339455\/revisions\/339932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/339725"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=339455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=339455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=339455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}