TIL the difference between
rem in CSS.
I found the em-vs-rem blog post on zellwk.com to be helpful in cementing my understanding. Read there for more detail.
em: equivalent to the font-size of the nearest parent. If an element has font-size of 12px,
1em for that element and any direct children of that element is 12px.
rem: equivalent to the font-size of the root element. If the root element has a font-size of 14px
1rem for all elements on the page is 14px.
The default font-size in a browser is 16px. Therefore if no font-size is explicitly set for any elements in your layout,
1rem will both be equal to 16px.
rem can be used to scale padding, margin, and other pixel based CSS properties. Using
rem to perform text spacing will make your UI respond to changes in font-size. This can be advantageous, since changing the font-size won’t require additional work to resize padding, margins, and other layout properties: they will just auto-scale based on the font-size of the page!
Application on the Site
em was useful when styling the TIL counter at the top of my TIL page. At small screen widths, the font-size of my h3’s scale down from 20px to 16px. I had explicitly defined a 20px font-size for my TIL counter, which is a child of the h3. Since I used an explicit pixel number, the font size of my counter did not scale with the rest of the text, and as a result it looked large and out of place on small screen sizes.
I changed the font-size of my counter to be
1em: in other words, equivalent to the font-size of the direct parent (which in this case is the h3 which has font-size of 20px at large screen widths and 16px at small screen widths).
This example really hammered home the importance of using relative measurements like
rem when laying out your text.