Josh Collinsworth

Why you should never use px to set font-size in CSS

https://joshcollinsworth.com/blog/never-use-px-for-font-size

Let’s be very clear: it absolutely does matter what unit you use in your CSS. And you should avoid px when setting font-size wherever possible.

I'm amazed we still have to say this, 9 years after I gave a whole 50 minutes talk about the em unit (rem was young): Un petit pas pour l’em, un grand pas pour le Web.

How can some front-end developers still ignore that users DO change font size?

I however understand why most don't know that the default font size in browsers is not always 16px, as this is really rare (Josh even writes "On the web, the default font size is 16px" 🤷‍♂️), but users setting a preferred default and/or minimum font size is not so rare. I use text-only zoom in Firefox really often.

It's also revealing that people don't remember what one em originally represented. Josh writes "Em originally referred to the width of an “M” character", but it was originally actually more related to the height of the character.

• older link:
  Converting Your Twitter Archive to Markdown
• newer link:
  The IndieWeb for Everyone

---

Related contents with similar topics

1. 

   Josh W. Comeau

   The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

   • Nicolas Hoizey
   • 20 May 2022
   • CSS, rem, accessibility

   Josh's attention to details in all his articles is awesome. Here, he's presenting evidences that the rem unit should be used for font sizes, media queries and sometimes other dimensions, step by step, with interactive playgrounds.

2. 

   Christine Vallaure

   Why designers should move from px to rem - and how to do that in Figma

   • Nicolas Hoizey
   • 17 November 2021
   • Figma, accessibility, em, rem, UI, design
   • 4 reactions

   If you're a Web developer (as most of my readers), you already know that users DO change font size (in their browser preferences), so you make sure to use proportional dimension units (em, rem, %, etc.) instead of px everywhere you can.

3. 

   Eric Bailey

   Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need

   • Nicolas Hoizey
   • 10 September 2019
   • accessibility, em

   Eric describes the issues people can face while using browsers to navigate on the Web, with a lot of great accessibility hints.

4. 

   Harry Roberts

   Font sizing with rem could be avoided

   • Nicolas Hoizey
   • 20 February 2019
   • em, rem, 62.5%, accessibility, CSS

   I don't really agree with the simple statement made in the title of this article, as sizing fonts with rem is sometimes useful to escape the default cascading sizing, but the most important part here IMHO is the following:

5. Users DO change font size

   • Nicolas Hoizey
   • 15 June 2018
   • accessibility, font, em
   • 38 reactions

   Evan Minto wrote a great article showing the Internet Archive has tested the actual root font-size set by their visitors, and the result shows a lot of people still change the default one: Pixels vs. Ems: Users DO Change Font Size.