Design files talk in pixels. Good stylesheets often don’t. Somewhere between a mockup that says “24px” and a stylesheet that says “1.5rem” there’s a bit of arithmetic nobody enjoys doing twice. This converter does it for you. Enter a value, choose the unit you have and the unit you want, set your base font size, and it gives you the result straight away.
Enter the value you want to convert.
Choose the unit you’re converting from and the unit you want to.
Set the base font size. The default is 16px, which is what most browsers use unless the user changes it.
For relative units that depend on the parent, set the parent font size. For viewport units, enter your viewport width and height.
Copy the result into your stylesheet.
Absolute units
px (pixel): the basic unit of screens. In CSS, 1px is defined as 1/96 of an inch, so it doesn’t always match a physical device pixel on high-density screens.
pt (point): a print unit. 1pt is 1/72 of an inch, which makes it equal to about 1.333px.
in, cm, mm: real-world lengths. 1in is 96px, 1cm is about 37.8px and 1mm is about 3.78px.
Relative units
rem: relative to the font size of the root element (html). If that’s 16px, then 1rem is 16px.
em: relative to the font size of the parent element (or, for properties other than font-size, the element’s own font size).
%: relative to something in the parent. For font-size it refers to the parent’s font size. For width it refers to the parent’s width. What it refers to changes with the property.
vw and vh: 1% of the viewport width and viewport height. On a screen 1440px wide, 1vw is 14.4px.
px to rem: rem = px ÷ root font size
rem to px: px = rem × root font size
px to em: em = px ÷ parent font size
px to pt: pt = px × 0.75
pt to px: px = pt × 1.333 (or ÷ 0.75)
px to vw: vw = px ÷ viewport width × 100
px to vh: vh = px ÷ viewport height × 100
px to %: % = px ÷ parent size × 100
px to rem. A design calls for 24px text, and the root font size is 16px.
24 ÷ 16 = 1.5rem
rem to px. A heading is set to 2.5rem.
2.5 × 16 = 40px
pt to px. A print stylesheet uses 12pt.
12 ÷ 0.75 = 16px
px to pt. A 18px label becomes 18 × 0.75 = 13.5pt.
Percentage. With a parent font size of 16px, a font size of 150% gives 16 × 1.5 = 24px.
Viewport units. On a 1440px wide screen, a 72px gap equals 72 ÷ 1440 × 100 = 5vw. On a 900px tall screen, a 450px hero section equals 50vh.
A different root size. If a visitor has raised their browser’s default text size to 20px, the same 1.5rem becomes 30px for them. That’s the point of using rem.
Browsers let people choose their preferred text size, and many do, often for good reason. Text sized in px doesn’t follow that preference, while text sized in rem does. Zooming the page works either way, but the font-size setting only reaches rem and em values.
Sizing text, spacing and breakpoints in rem lets the whole layout scale gracefully with the visitor’s settings. It’s also easier on accessibility. WCAG asks that text can be resized up to 200% without loss of content or function, and relative units make that much simpler to achieve.
Because em refers to the parent’s font size, it stacks. Suppose a parent has a font size of 18px and you set a child to 1.5em. That child is 27px. If a grandchild inside it also uses 1.5em, its size is 27 × 1.5 = 40.5px, which is probably not what you meant.
A common rule of thumb: use rem for font sizes and em for things that should scale with the element’s own text, such as the padding on a button. Em is also useful in media queries, where 48em equals 768px at the default size and follows the user’s font settings.
Viewport units let type and spacing scale with the screen, but on their own they can get silly: tiny on a phone and huge on a wide monitor. The clamp() function sets a minimum, a preferred value and a maximum:
font-size: clamp(1rem, 2.5vw, 2rem);
On a 1000px screen, 2.5vw is 25px, which sits between 16px and 32px, so it’s used.
On a 400px screen, 2.5vw is only 10px, so the minimum of 16px applies.
On a 1600px screen, 2.5vw is 40px, so the maximum of 32px applies.
Use this converter to work out the numbers for the minimum and maximum.
On many mobile browsers the address bar slides away as you scroll, so 100vh can be taller than the visible area, which causes content to be cut off or to jump. Newer viewport units such as svh, lvh and dvh (small, large and dynamic viewport height) were introduced to deal with this. They’re supported by recent browsers, but check what your audience uses.
Assuming 1rem is always 16px. It is by default, but visitors can change it, and the root font size can be changed in CSS too.
Using em without noticing the nesting. Sizes multiply down the tree.
Using % without checking the property. 50% of a font-size isn’t 50% of a width.
Using vh for full-screen sections on mobile without testing the address-bar behaviour.
Converting pt to px for screens and expecting it to look the same as in print. The point is a print unit, and screen rendering varies with the device.
Setting html { font-size: 62.5%; } without thinking it through. It makes 1rem equal 10px, which is easy to calculate with, and it still scales with the user’s setting. But anything you forget to size explicitly will come out tiny, so you’ll need to set the body text size back up.
How do I convert px to rem?
Divide the pixel value by the root font size. With the default of 16px, 16px is 1rem, 24px is 1.5rem and 8px is 0.5rem.
What’s the difference between rem and em?
Rem is relative to the root element’s font size, so it stays the same everywhere on the page. Em is relative to the parent element, so it can change from one place to another and stack up when elements are nested.
What’s the difference between px and pt?
Both are absolute units in CSS. A pixel is 1/96 of an inch and a point is 1/72 of an inch, so 1pt equals about 1.333px. Points are mostly used for print.
Why do my results differ from my design tool?
Design tools often use their own scale for “pixels”, and some work at 2x or 3x for high-density screens. Check the base font size and the viewport values you’ve entered.
Should I use px at all?
Yes, for things that shouldn’t scale with text, such as 1px borders, shadows and fine details. For text, spacing and layout, rem and em are usually the better choice.
What viewport size should I enter?
Use the screen size you’re designing for, for example 1440 by 900 for a typical laptop and 390 by 844 for a recent phone. Viewport units react to the real screen, so test at several sizes.
Is the converter exact?
The maths is exact, but values are rounded for readability. The browser may round again when it draws the page, so tiny differences on screen are normal.
Results are calculated from the values you enter. Always test your layout in real browsers and on real devices.