{"id":363498,"date":"2022-02-11T16:46:40","date_gmt":"2022-02-12T00:46:40","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363498"},"modified":"2022-02-11T16:46:42","modified_gmt":"2022-02-12T00:46:42","slug":"your-css-reset-needs-text-size-adjust-probably","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/your-css-reset-needs-text-size-adjust-probably\/","title":{"rendered":"Your CSS reset needs text-size-adjust (probably)"},"content":{"rendered":"\n

Kilian Valkhof<\/a>:<\/p>\n\n\n\n

[…] Mobile Safari increases the default font-size when you switch a website from portrait to landscape. On phones that is, it doesn\u2019t do it on iPad. Safari has been doing this for a long time, as a way to improve readability on non-mobile optimized websites. While undoubtedly useful in a time when literally no website was optimized for mobile, it\u2019s significantly less helpful nowadays. […] Text size increasing randomly in a single situation is exactly the type of thing you want to guard for with a CSS reset.<\/p><\/blockquote>\n\n\n\n

This is very literally what text-size-adjust<\/code> does. MDN<\/a>:<\/p>\n\n\n\n

When an element containing text uses 100% of the screen’s width, the algorithm increases its text size, but without modifying the layout. The text-size-adjust<\/code> property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.<\/p><\/blockquote>\n\n\n\n

You can see Apple’s own docs<\/a> showing off this is exactly what they do (on iPhones). There is an ancient bug<\/a> where this would prevent zooming, but probably not a huge concern anymore.<\/p>\n\n\n\n

Kilian’s recommendation:<\/p>\n\n\n\n

html {\n  -moz-text-size-adjust: none;\n  -webkit-text-size-adjust: none;\n  text-size-adjust: none;\n}<\/code><\/pre>\n\n\n\n
Firefox doesn’t even support it, so I’d maybe lose that vendor prefix, but otherwise I’d say I’m on board. I’d like to think I can handle my own text sizing. <\/p>\n\n\n\n
Reminds me of how Mobile Safari does that zooming thing<\/a> with text inputs under 16px<\/code>, so watch out for that too.<\/p>\n","protected":false},"excerpt":{"rendered":"
Kilian Valkhof: […] Mobile Safari increases the default font-size when you switch a website from portrait to landscape. On phones […]<\/p>\n","protected":false},"author":3,"featured_media":273697,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[843,1372,645,19030],"class_list":["post-363498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-font-size","tag-safari","tag-text","tag-text-size-adjust"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/code-magnify.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":339518,"url":"https:\/\/css-tricks.com\/is-vendor-prefixing-dead\/","url_meta":{"origin":363498,"position":0},"title":"Is Vendor Prefixing Dead?","author":"Rob O'Leary","date":"May 5, 2021","format":false,"excerpt":"Let\u2018s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don\u2019t trigger PTSD for anyone! It\u2018s not clear who started prefixing, or when it began exactly. What is clear, is that by 2006, prefixed features were in Internet Explorer and\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/prefixing-history.png?fit=988%2C506&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/prefixing-history.png?fit=988%2C506&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/prefixing-history.png?fit=988%2C506&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/prefixing-history.png?fit=988%2C506&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":16888,"url":"https:\/\/css-tricks.com\/viewport-sized-typography\/","url_meta":{"origin":363498,"position":1},"title":"Viewport Sized Typography","author":"Chris Coyier","date":"April 30, 2012","format":false,"excerpt":"There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). They are called viewport units, and there are a number of them that do slightly different (all useful) things. One unit is 1% of one of the axes of\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/vw.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/vw.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/vw.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/vw.gif?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":63,"url":"https:\/\/css-tricks.com\/font-rendering-differences-firefox-vs-ie-vs-safari\/","url_meta":{"origin":363498,"position":2},"title":"Font Rendering Differences: Firefox vs. IE vs. Safari","author":"Chris Coyier","date":"August 29, 2007","format":false,"excerpt":"You can get pretty specific when declaring how you want text to look with CSS: p { font-family: Verdana; background-color: #7A2121; color: #B93333; text-decoration: underline; word-spacing: Normal; text-align: left; letter-spacing: 1px; text-indent: 15px; line-height: 16px; font-size: 10px; font-weight: bold; font-style: italic; text-transform: uppercase; } And that's not even all of\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/ie6_pc-win2000.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":199288,"url":"https:\/\/css-tricks.com\/override-gmail-mobile-optimized-email\/","url_meta":{"origin":363498,"position":3},"title":"Override Gmail’s Mobile Optimized Emails","author":"Geoff Graham","date":"April 6, 2015","format":false,"excerpt":"Many emails are designed with a large screen in mind. Text that looks great on a large screen can be difficult to read on a mobile device, though. If Gmail deems that the font-size of any text in an email is too small to be legible, it will increase the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"spacer.gif","width":350,"height":200,"srcset":"spacer.gif 1x, spacer.gif 1.5x"},"classes":[]},{"id":239011,"url":"https:\/\/css-tricks.com\/rem-global-em-local\/","url_meta":{"origin":363498,"position":4},"title":"Use `rem` for Global Sizing; Use `em` for Local Sizing","author":"Robin Rendle","date":"March 12, 2016","format":false,"excerpt":"Richard Rutter\u2019s guide for setting the font-size of an element is interesting: he argues that we should use both em and rem units depending on the relationship it might have with other elements on the page: Take the example of a pull quote containing two short paragraphs. The spacing between\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259590,"url":"https:\/\/css-tricks.com\/best-way-programmatically-zoom-web-application\/","url_meta":{"origin":363498,"position":5},"title":"Best Way to Programmatically Zoom a Web Application","author":"Michael Romanov","date":"September 1, 2017","format":false,"excerpt":"Website accessibility has always been important, but nowadays, when we have clear standards and regulations from governments in most countries, it's become even more crucial to support those standards and make our projects as accessible as they can be. The W3C recommendation provides 3 level of conformance: A, AA and\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363498","targetHints":{"allow":["GET"]}}],"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=363498"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363498\/revisions"}],"predecessor-version":[{"id":363507,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363498\/revisions\/363507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273697"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=363498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=363498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=363498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}