PX
Fixed sizing
Great for responsive font sizing
EMs
Relative to the parent element
Example
If ROOT Element = 16px
If Parent Element = 18px,
1em = 18px
2em = 36px
.5em = 9px
Great for responsive font sizing
REMs
Relative to the ROOT element
Example
If ROOT Element = 16px
If Parent Element = 18px,
1rem = 16px
2rem = 32px
.5rem = 8px
Great for responsive font sizing
%
Relative to the parent element
Example
If ROOT Element = 16px
If Parent Element = 18px,
100% = 16px
200% = 32px
50% = 8px
Margins, padding, spacing, and widths/heights
VW and VH
Relative to the viewport’s width/height
Great for responsive font sizing
Margins, padding, spacing, and widths/heights