Understanding Typography Units
Web typography uses different units for different purposes. Pixels are absolute, while EM and REM are relative to the base font size. Understanding these conversions is essential for responsive web design and consistent typography.
Understanding EM vs REM
- EM: Relative to the parent element's font size
- REM: Relative to the root (html) element's font size
- Pixels: Absolute, not relative to anything
- Points: Physical units, used for print design
- Percent: Similar to EM, relative to parent
Conversion Formulas (at 16px base)
px to EM: px ÷ base
EM to px: EM × base
REM to px: REM × root (usually 16)
px to PT: px × 0.75
PT to px: PT ÷ 0.75
Common Typography Conversions (16px base)
10px = 0.625em = 0.625rem = 7.5pt = 62.5%
12px = 0.75em = 0.75rem = 9pt = 75%
14px = 0.875em = 0.875rem = 10.5pt = 87.5%
16px = 1em = 1rem = 12pt = 100%
18px = 1.125em = 1.125rem = 13.5pt = 112.5%
20px = 1.25em = 1.25rem = 15pt = 125%
24px = 1.5em = 1.5rem = 18pt = 150%
32px = 2em = 2rem = 24pt = 200%
Quick Reference Chart
Common base sizes: 12px, 14px, 16px, 18px
Standard heading sizes:
- H1: 32px (2rem)
- H2: 24px (1.5rem)
- H3: 20px (1.25rem)
- Body: 16px (1rem)
Personal Example
I was designing a invitation and wanted the text to be readable on paper. Converting from pixels to points helped me pick the right size—14pt turned out to be perfect for the body text!