Please stop using px for font-size.

Опубликовано: 22 Июль 2024
на канале: Coder Coder

255,593

10k

🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ➡️ https://coder-coder.com/responsive/

😎 Join the Coder Coder Club for $5/mth and get sneak peeks of videos: https://courses.coder-coder.com/p/club

What CSS unit should you use for font size? In this video, I'll show you why you should not use the px unit for font-size, width, and height of elements. The px unit is not affected by the browser's base font size, and so is not accessible for users who want to increase the font-size by using that browser setting. For accessibility, it's better to use rem or em units

0:00 - Intro
0:23 - The problem with px
3:28 - Don't use px for widths
5:32 - Don't use px in media queries
9:03 - Ways to convert from px to rems
12:20 - What about the 62.5% hack?

Resources mentioned in video:
🐙 GitHub repo: https://github.com/thecodercoder/stop...
🖥️ MDN notes on pixels and font-size -- https://developer.mozilla.org/en-US/d...
↗️ WCAG Resize Text standards -- https://www.w3.org/WAI/WCAG22/quickre...
✒️ Josh Comeau, "The Surprising Truth About Pixels and Accessibility" -- https://www.joshwcomeau.com/css/surpr...

____________________________

✉️ Want to get emails about new videos, course sales, and other web dev news? Sign up here: https://coder-coder.com/subscribe/

👕 Get my hoodie here: https://coder-coder.com/merch

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

🔽 FOLLOW CODER CODER
Twitter -- / thecodercoder
Instagram -- / thecodercoder

#css #javascript #html