Em and rem resources from Kevin Powell
I've started Kevin Powell's Conquering Responsive Layouts course. In one of the first lessons, he talks about units of measurement, specifically pointing out em vs rem. He recommended 2 of his videos:
- CSS em vs rem explained - Youtube, 2017 and
- Why you shouldn't set font-sizes using em - Youtube, 2019
These are very good to grasp the fundamentals of when to use ems and rems. From what I understood:
- rems are useful when you want things to scale up relative to the whole document
- ems are useful when you want things to scale with your parent element; for example, a button's padding should grow relative to its font size to maintain the look and ratio of the text
- don't set font-sizes in ems because it can compound in children elements, and end up with massive sizing