People don't change the default 16px font size in their browser (You wish!)

I am really happy to still read articles that advocate for the use of proportional CSS units as em and rem in 2016. But there are often trolls[1] that come comment these articles to say that we, who are using proportional units, are dumb, because there is no need for this. Here is an example.

There are unfortunately two misleading urban legends in most web developers minds.

Default font size in browsers is always 16px

No, it's not!

It is often, true, but not always.

Here are a few counterexamples I've collected from actual devices / browsers:

Device / browser Default font size
Opera Mini 4.5 13px
Palm webOS 2.0 & webOS TouchPad 14px
Opera Mini 7 17px
AOL 9 20px
Cybook Odyssey (e-book reader) 21px
Blackberry 6.0 22px
NetFront NX 23px
Kindle 3[2] 26px

These devices are fairly old because I made the study in 2013, but I'm sure there are still such devices nowadays. I admit I can't prove it with actual data.

These default font sizes were set by the device or browser vendors because it was the best size for reading. When you set your font-size in px units, you throw their work to satisfy their users/clients into the bin.

People don't change the default font size in their browser

I do — and I have friends who do too — change the browser settings for default font size. I even made a talk about em and this great feature[3] in 2013 at Paris Web, the french leading Web conference!

I agree we are not a lot[4] to do that, maybe even less now than a few years ago.

But is it:

  • because there is really no need anymore,
  • because browsers hide this really valuable feature in their "advanced" settings,
  • or because Web developers don't care about people who need this?

My humble opinion is that:

  1. there is still a need for this, maybe even increasingly so with people using the Web getting older,
  2. but too many websites are really deceptive, not caring at all about users' preferences and needs, using px font-sizes, making this feature useless,
  3. then users change their habits and use global zoom, even if it's more complicated and the result is sometimes less practical[5],
  4. then browsers hide or remove this feature, because they see in usage statistics that it is not used anymore,
  5. then people who really would need this feature don't find it, don't even know it exists,
  6. then most web developers, who are also web users, don't know that this feature exists either, and that there are people out there who would be delighted to use it, so they don't do anything to support that.

We — most web developers — collectively killed the feature by not allowing it to work as intended. We should try to focus on the users' need, not the technical implementation (or lack thereof), before saying it's not useful.

So, we might not be a lot to need — or even just want — to change the default font size of our browsers, but:

  • using px unit, you deny us this right,
  • using em unit, you satisfy everyone[6].

So, if you use px for font-size, I hope it's only because you didn't know what it means, and I also hope you will change.

And please, please, don't tell me using ems or rems is hard. It's not. At all. You just need to think differently and use the appropriate tools. Read this again, and practice.

June 15th, 2018 update

Users DO change font size.


  1. I often call myself a troll, that's not that harsh when I'm the one saying it… 😉 ↩︎

  2. Yes, people use Kindle and similar e-book readers to browse the Web. ↩︎

  3. In french, sorry if you don't understand it. ↩︎

  4. Answering everyone's needs is at the heart of the Web's universal access principle, the first of W3C's design principles ↩︎

  5. Think about websites that are not yet responsive, where zooming leads to messy horizontal scroll. ↩︎

  6. I never heard about users complaining about font sizes defined in ems, only developers. ↩︎

75 Webmentions

13 likes

11 reposts

  1. Gaël Poupard avatar
  2. John ☘ Barbedouce avatar
  3. zelda_pinwheel avatar
  4. Zell Liew avatar
  5. Thomas Girard avatar
  6. Luismi Jiménez avatar
  7. patrick h. lauke avatar
  8. Krzysztof Hankiewicz avatar
  9. mallory, alice & bob avatar
  10. Christof avatar
  11. カロルカロル avatar

12 replies

  1. Zell Liew avatar Zell Liew
    @nhoizey nice! Another argument is that it’s more practical when dealing with responsive typography (changing sizes when resizing) ;)
  2. Zell Liew avatar Zell Liew
    @nhoizey thanks for writing this!
  3. Nicolas Hoizey avatar Nicolas Hoizey
    @zellwk true, like on my blog… 😉
  4. Nicolas Hoizey avatar Nicolas Hoizey
    @zellwk you’re welcome, thanks for the RT
  5. Zell Liew avatar Zell Liew
    @nhoizey you’re welcome! It’s a great read ;)
  6. Zell Liew avatar Zell Liew
    @nhoizey I do that for most sites nowadays.
  7. Stéphane Deschamps avatar Stéphane Deschamps
    @nhoizey will do that. @borisschapira
  8. Nicolas Hoizey avatar Nicolas Hoizey
    @notabene thanks!
  9. Stéphane Deschamps avatar Stéphane Deschamps
    @nhoizey ET HOP !
  10. Zach Leatherman avatar Zach Leatherman
    @nhoizey I still see a small FOUT there. You can inline the first stage as data URIs, more here: zachleat.com/web/web-font-d…
  11. Nicolas Hoizey avatar Nicolas Hoizey
    @zachleat I’ve read your last post, I have indeed to try!
  12. Zach Leatherman avatar Zach Leatherman
    @nhoizey 💯

39 mentions

  1. Mylène C. avatar Mylène C.
    Why use em/rem instead of px?`Here is a great answer by @nhoizey #a11y #UX nicolas-hoizey.com/2016/03/people…
  2. Mylène C. avatar Mylène C.
    Why use em/rem instead of px?`Here is a great answer by @nhoizey #a11y #UX nicolas-hoizey.com/2016/03/people…
  3. Web Platform Daily avatar Web Platform Daily
    By using px for font sizes, you deny users the right to change the default font size nicolas-hoizey.com/2016/03/people…
  4. john holt ripley avatar john holt ripley
    "two urban legends:
    Default font size in browsers is always 16px
    People don’t change the font size in their browser"nicolas-hoizey.com/2016/03/people…
  5. Johannes avatar Johannes
    Please stop using px for font styles: nicolas-hoizey.com/2016/03/people…
  6. denizzzProg
  7. M4D'z avatar M4D'z
    People don't change the default 16px font size in their browser nicolas-hoizey.com/2016/03/people…
  8. thomas villain avatar thomas villain
  9. Félix Zapata avatar Félix Zapata
    People don't change the default 16px font size in their browser nicolas-hoizey.com/2016/03/people…
  10. froont avatar froont
    Don’t use px for font sizes. Use ems and rems instead:nicolas-hoizey.com/2016/03/people… #RWD #webdesign
  11. Веб-стандарты avatar Веб-стандарты
    Размер шрифта всегда 16px и никто его не меняет (нет), Николас Хойзи о вредных заблуждениях nicolas-hoizey.com/2016/03/people…



  12. Chris Pearce avatar Chris Pearce
    People don't change the default 16px font size in their browsernicolas-hoizey.com/2016/03/people…
  13. Steven Watts avatar Steven Watts
    People don't change the default 16px font size in their browser - nicolas-hoizey.com/2016/03/people…
  14. Page screenshot http://itfm.pro/%d0%b4%d0%b0%d0%b9%d0%b4%d0%b6%d0%b5%d1%81%d1%82-%d0%b...
  15. Page screenshot http://itfm.pro/%d0%b4%d0%b0%d0%b9%d0%b4%d0%b6%d0%b5%d1%81%d1%82-%d0%b...
  16. tnagy avatar tnagy
    Looks like I may not be the only one who sticks to em-based fontsizes, even if #Bootstrap tries to reset it to px nicolas-hoizey.com/2016/03/people…
  17. Page screenshot http://www.itdadao.com/article/601948/
  18. Page screenshot http://www.shellsec.com/news/2870.html
  19. keith•j•grant avatar keith•j•grant
    Don’t use px for font size. It may not matter as much as before, but it does still matter. (by @nhoizey)nicolas-hoizey.com/2016/03/people…
  20. keith•j•grant avatar keith•j•grant
    Don’t use px for font size. It may not matter as much as before, but it does still matter. (by @nhoizey)nicolas-hoizey.com/2016/03/people…
  21. Page screenshot http://webbeaver.ru/future/media-queries-px-em-rem/
  22. Page screenshot http://blog.goetter.fr/2016/07/05/lastuce-du-font-size-62-5-oui-non-ou...
  23. Page screenshot http://10clouds.com/development/css-for-backend-developers-part-ii/
  24. Гонзо avatar Гонзо
  25. Page screenshot https://10clouds.com/blog/css-backend-developers/
  26. Calypsas
    Considering that written words are the foundation of any interface, it makes sense to give your website’s typography first-class treatment. When setting type, the details really do matter. How big? How small? How much line height? How much letter-spacing? All of these choices affect the legibility of your text and can vary widely from typeface to typeface. It stands to reason that the more attention paid to the legibility of your text, the more effectively you convey a message.

    In this post, I’m …
  27. Page screenshot http://lovewordpress.me/news/2017/10/04/keeping-track-of-letter-spacin...
  28. Page screenshot http://design-lance.com/?p=6319
  29. Page screenshot http://onthewebit.com/keeping-track-of-letter-spacing-some-guidelines/
  30. Page screenshot http://browserzone.com/keeping-track-of-letter-spacing-some-guidelines...
  31. Page screenshot https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5c...
  32. Page screenshot https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5c...
  33. Page screenshot http://onthewebit.com/users-do-change-font-size-evan-minto-medium/
  34. softt
  35. Page screenshot http://quiq.website/author/quiqsite/
  36. Page screenshot https://codeburst.io/css-units-a-brief-digress-d06e511d7303?source=rss...
  37. ヨーグルト投げ avatar ヨーグルト投げ
    People don't change the default 16px font size in their browser (You wish!) – Nicolas Hoizey nicolas-hoizey.com/articles/2016/…
  38. 全部入りHTML太郎 avatar 全部入りHTML太郎
    People don't change the default 16px font size in their browser (You wish!) – Nicolas Hoizey nicolas-hoizey.com/articles/2016/…
  39. Page screenshot https://habr.com/ru/post/500100/