CSS units calculator
CSS Unit Converter
Turn one px value into vw, rem, em, % and pt at once. Your base width and font settings are saved automatically.
One value, every unit
Type into any field and the other units update instantly.
Common values
Calculated with the current settings. Click a value to copy it.
| px | vw | rem | em | % | pt |
|---|
Conversion formulas
| Unit | px → unit | unit → px | Relative to |
|---|---|---|---|
| vw | px ÷ base width × 100 | vw × base width ÷ 100 | Viewport (artboard) width |
| rem | px ÷ root font | rem × root font | html font-size (16px by default) |
| em | px ÷ parent font | em × parent font | font-size of the parent element |
| % | px ÷ parent width × 100 | % × parent width ÷ 100 | Width of the parent element |
| pt | px × 0.75 | pt ÷ 0.75 | Fixed ratio (96px = 72pt) |
For example, on a 1920px design with a 16px root, 24px equals 1.25vw = 1.5rem = 1.5em = 18pt.
Which unit should I use?
- px: borders, shadows and icons that must stay crisp regardless of screen size. Leave 1px borders alone.
- rem: the default for font sizes, spacing and component sizes. Browser font settings and zoom carry through, which is better for accessibility.
- em: icon sizes and button padding that should scale with the text. It compounds when nested, so avoid it for global sizes.
- vw: hero sections, large headings and section spacing that should scale with the viewport. For text, pair it with clamp() to set minimum and maximum sizes.
- %: fluid layout widths relative to the parent, and image max-width.
- pt: print stylesheets and values coming from Photoshop or Illustrator documents.
Dedicated converters
Batch CSS conversion and SCSS functions live in the dedicated tool for each unit.
Frequently asked questions
How do I convert px to vw?
vw = px ÷ base width × 100. On a 1920px design, 24px is 24 ÷ 1920 × 100 = 1.25vw. Use the artboard width of your design file as the base.
How do I convert px to rem?
rem = px ÷ root font size. With the browser default of 16px, 24px is 1.5rem. If your project sets html { font-size: 62.5% }, change the root font to 10.
What is the difference between em and rem?
rem is relative to the font size of the html element; em is relative to the font size of the parent element. If the parent font is 20px, 24px is 1.2em, but with a 16px root it is 1.5rem. em compounds in nested elements, so rem is safer for global sizes.
How do pt and px relate?
CSS defines 1in = 96px = 72pt, so 1px = 0.75pt and 1pt = 1.333px. Use this ratio to move values from Photoshop or Illustrator documents and print stylesheets to the web.
What is % relative to?
For width, padding and margin, % is relative to the width of the parent element, so enter that width in Parent width. For font-size, % is relative to the parent font size and equals the em value (1em = 100%).