Converters
CSS Unit Converter
px ⇄ em ⇄ rem ⇄ pt.
About the CSS Unit Converter
The CSS Unit Converter turns any size between px, rem, em, pt, %, vw and vh, using a base font size and viewport size you can change. It shows a live preview of the size, and a table of common sizes, body text, headings, hero text, in px, rem and pt.
What you can do with the CSS Unit Converter
- Seven CSS units: px, rem, em, pt, %, vw and vh, converted together.
- Your own base: Set the root font size and viewport size your site uses.
- Live preview: See how big the size actually looks.
- Common sizes table: Body text, headings and hero text in px, rem and pt.
px, rem and em
Pixels are fixed. A rem is relative to the root font size of the page, which is 16px in most browsers, so 24px is 1.5rem. An em is relative to the font size of the element itself, so its value depends on where it's used; the tool uses the same base size for both.
vw and vh
1vw is 1% of the browser window's width and 1vh is 1% of its height. They're handy for full-screen sections and fluid headings. Enter the screen size you're designing for, such as 390 × 844 for a phone or 1440 × 900 for a laptop, to see what a value works out to.
Why rem is better for accessibility
If a user increases the default font size in their browser, sizes set in rem grow with it, while sizes set in px stay fixed. Using rem for text and spacing makes a site more comfortable for people who need larger text.
Related tools
Frequently Asked Questions
How many pixels is 1 rem?
16px by default, but it follows the root font size, so it changes if the page or the user sets a different size.
What is 12pt in pixels?
16px, since 1pt equals 4/3 of a pixel.
Should I use em or rem?
Use rem for consistent sizing across the page. Use em when you want something to scale with its own element's font size, like padding on a button.
What is 14px in rem?
Divide the pixel value by the root font size. At the default 16px base, 14px is 14 / 16 = 0.875rem. Select px, type 14 and the rem row shows the answer; change the base slider if your site uses a different root size.
What are vw and vh units?
1vw is 1% of the viewport width and 1vh is 1% of the viewport height. On a 1440px-wide screen, 1vw is 14.4px. Enter your own viewport width and height to see how a vw or vh size works out on that screen.
Why is 1px equal to 0.75pt?
CSS defines 1 inch as 96 pixels and a point is 1/72 of an inch, so 1px equals 72 / 96 = 0.75pt. To go from pt to px, divide by 0.75: 18pt is 24px. Points are mostly used for print stylesheets.
What does % mean in this converter?
Here % means a font size relative to the base size, so 150% at a 16px base is 24px. In real CSS, a percentage font size is relative to the parent element's font size, and a percentage width is relative to the parent's width, not the font.
Why is my em size bigger than the converter shows?
The converter assumes the parent's font size equals the base. In real pages, em multiplies by the parent's font size, so nested elements compound: 1.2em inside 1.2em at a 16px base is about 23px, not 19.2px. Use rem to avoid this.
What is the 62.5% font-size trick?
Setting html { font-size: 62.5% } makes the root size 10px in browsers with the default 16px setting, so 1.6rem equals 16px and maths is easier. Set the base slider to 10px to convert with this setup.
What viewport size should I enter for mobile?
Phones report a CSS viewport width much smaller than their screen resolution, and many Android phones fall between about 360px and 412px wide. Enter the width you are designing for to check how vw values will look on phones.
Why does the preview stop getting bigger?
The live preview is capped at 96px so it fits on the page, and the label says capped at 96px when your size is larger. The converted values themselves are not capped and are correct for any size.
Related tools
- Pressure Converter, Convert between pascal, bar, psi and atm.
- Energy Converter, Convert joules, calories, kWh and BTU.
- Power Converter, Convert watts, kilowatts and horsepower.
- Angle Converter, Convert degrees, radians and gradians.
- Data Speed Converter, Convert bps, kbps, Mbps and Gbps.
- Temperature Converter, Convert Celsius, Fahrenheit and Kelvin.
Quick Work Studio