px, rem and em with a configurable root size.
rem is relative to the root (html) font size; em and % are relative to the parent's font size.
1pt = 1.333px (CSS reference pixel). With a 16px root, 1rem = 16px.
Common pixel sizes at a 16px root and 16px parent.
| px | rem | em | % | pt |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 50% | 6pt |
| 10px | 0.625rem | 0.625em | 62.5% | 7.5pt |
| 12px | 0.75rem | 0.75em | 75% | 9pt |
| 14px | 0.875rem | 0.875em | 87.5% | 10.5pt |
| 16px | 1rem | 1em | 100% | 12pt |
| 18px | 1.125rem | 1.125em | 112.5% | 13.5pt |
| 20px | 1.25rem | 1.25em | 125% | 15pt |
| 24px | 1.5rem | 1.5em | 150% | 18pt |
| 28px | 1.75rem | 1.75em | 175% | 21pt |
| 32px | 2rem | 2em | 200% | 24pt |
| 36px | 2.25rem | 2.25em | 225% | 27pt |
| 40px | 2.5rem | 2.5em | 250% | 30pt |
| 48px | 3rem | 3em | 300% | 36pt |
| 56px | 3.5rem | 3.5em | 350% | 42pt |
| 64px | 4rem | 4em | 400% | 48pt |
| 72px | 4.5rem | 4.5em | 450% | 54pt |
| 96px | 6rem | 6em | 600% | 72pt |