Base Settings
Used for rem calculations (usually 16px)
Used for em and % calculations
Used for vw calculations
Used for vh calculations
Common Values
Pixels px
Absolute unit. Fixed size regardless of parent or viewport.
Root EM rem
Relative to root font size. Best for scalable, accessible designs.
EM em
Relative to parent element's font size. Compounds in nested elements.
Percent %
Relative to parent element's font size (for font-size property).
Viewport Width vw
1vw = 1% of viewport width. Responsive to screen size.
Viewport Height vh
1vh = 1% of viewport height. Responsive to screen size.
Points pt
Print unit. 1pt = 1/72 inch. Mainly used for print stylesheets.
Quick Reference Formulas
rem = px / root font size
Example: 16px ÷ 16 = 1rem
em = px / parent font size
Example: 24px ÷ 16 = 1.5em
% = (px / parent) × 100
Example: 16px ÷ 16 × 100 = 100%
vw = (px / viewport width) × 100
Example: 96px ÷ 1920 × 100 = 5vw
vh = (px / viewport height) × 100
Example: 54px ÷ 1080 × 100 = 5vh
pt = px × 0.75
Example: 16px × 0.75 = 12pt