CSS Tools
CSS Unit Converter
Convert px ↔ rem ↔ em ↔ % ↔ pt with a configurable root font size.
Context
Input
px
16px
rem
1rem
em
1em
%
100%
pt
12pt
About this tool
Type a value in any common CSS unit (px, rem, em, %, pt) and see the others side-by-side. Adjust the root font size (defaults to 16px) and the parent font size (for em context). Useful when porting Figma values, matching design tokens, or moving between vanilla CSS and Tailwind spacing scales.
FAQs
What is the default root font size?
Browsers default to 16px on <html>. Tailwind's preflight and most resets keep it at 16px. The converter lets you change it in case your project uses a different root size.
When should I use rem vs em?
rem references the root size, so it scales globally with user accessibility settings. em references the current element's font-size, so it cascades - useful for padding and margins on buttons that should grow with the text.
Why is everyone allergic to px for font-size?
Pixel font sizes ignore user accessibility settings (zoom and root-size overrides). rem-based sizing scales with the user's chosen base size, which is better for accessibility and large-text mode on phones.
How do percentages convert?
Percentage units depend on context - parent width for layout, parent font-size for type. The converter assumes font-size context by default; switch to length context for width / height conversions.
What's pt good for?
Mostly print stylesheets. 1pt = 1/72 inch, which the browser maps to roughly 1.333px at 96 DPI. For screen work prefer px or rem.