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 14 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles