Relative length units specify a length relative to another length.
Aside from 'rem' (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the ‘font’ property, if the element has no parent).
Equal to the computed value of the font-size property of the element on which it is used.
Equal to the computed value of font-size on the root element.
Equal to the used x-height of the first available font. [CSS3-FONTS] The x-height is so called because it is often equal to the height of the lowercase "x".
Equal to the used advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.
| Unit | Relative To |
|---|---|
| em | font size of the element |
| rem | font size of the root element |
| ex | x-height of the element's font |
| ch | width of the "0" (ZERO, U+0030) glyph in the element's font |
Resizing text in IE has been an ongoing struggle. To get around this, we can use em units.
The technique modifies the base font-size on the body using a percentage.
The rule: h1 { line-height: 1.2em }
On the other hand: h1 { font-size: 1.2em }
The problem with em-based font sizing is that the font size compounds.
The em unit is relative to the font-size of the parent, which causes the compounding issue.
The main use for rem is replacing em to protect inner element font sizes from being changed by outer elements.
Thus avoiding the classic nested em scaling problem.
We can specify the fall-back using px.
To do so, we specify the font-size using px units first and then define it again using rem units.