Published at
Updated at
Reading time

I just came across this tweet from Josh Comeau. Josh shared that Safari is not "zooming into" focused form elements if they have a font size of or larger than 16px. I don't have an iPhone, but I can imagine that the zoom interaction is pretty distracting when you "just" want to fill out a form.

Why is Safari zooming in for controls that have a font size less than 16px? 16px is the default body font size for most browsers and is what you get after declaring font-size: 100%; on :root. 16px is the smalled accessible font size according to accessibility resources.

Josh's discovery is a fact that'll come in handy in the future because I had a few discussions about font sizes lately. Some folks tend to prefer small and light grey fonts โ€“ the less readable, the better. ๐Ÿ™ˆ

I doubt that the iOS zoom argument will be the game-changer in these discussions, but the more arguments for accessible web design I have the more likely I can convince someone! ๐ŸŽ‰

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.