Aspect ratio calculator
The ratio of any width and height, or the missing side for 16:9, 4:3, 4:5 and the rest, with a table of standard sizes.
PX to REM converter
Pixels to rem and back at any root font size, with the common sizes in a table ready to copy.
- Choose which way to convert
- Enter the size, and your root font size if it isn't 16px
- Copy the value, or use the table
Example figures. Put in yours.
In rem In pixels
- CSS
- –
- As a percentage
- –
- In points
- –
The calculator needs JavaScript. The formula is below if you would rather work it out by hand.
Kept results
Kept in this browser only. Nothing is sent to us.
This px to rem converter turns pixels into rem, or rem back into pixels, at whatever root font size your site uses. It defaults to 16px, the size every major browser starts with. Below the answer you get a table of the common sizes at your root, ready to copy into your CSS.
How to convert px to rem, and rem to px
Divide the pixels by the root font size. Going the other way, multiply.
| To find | Formula | Example at 16px |
|---|---|---|
| rem | Pixels ÷ root font size | 24 ÷ 16 = 1.5rem |
| Pixels | rem × root font size | 1.5 × 16 = 24px |
Common px to rem sizes
| Pixels | rem at a 16px root |
|---|---|
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
Change the root font size in the converter and its table redraws for your site.
Why use rem instead of px?
Because people change their browser’s text size, and rem respects it. Someone who sets a larger default font gets larger text everywhere you’ve used rem. Sizes set in pixels ignore them.
It’s also part of accessibility. The Web Content Accessibility Guidelines ask that text can be resized up to 200% without losing content or function, and building type and spacing in rem is the simplest way to get there. It keeps layouts in proportion too: spacing set in rem grows with the text it sits beside.
What is the difference between rem and em?
Both are relative. Rem is relative to the root, the html element, so 1rem is the same everywhere on the page. Em is relative to the parent element’s font size, so an em inside an em inside an em compounds, and a nested list can end up far bigger or smaller than you meant.
Use rem for type and spacing by default. Save em for things that should scale with the text they sit in, like the padding on a button.
The 62.5% trick
Some sites set the html font size to 62.5%, which makes 1rem equal 10px at the browser default and turns the arithmetic into shifting a decimal point. It still respects the visitor’s setting, because it’s a percentage. The catch is that body text then has to be set back up to a readable size everywhere.
If your site does this, put 10 in the root font size box above and the converter works to your setup.
Building it properly
Units are one small part of a site that works for everyone who visits it. If you would rather have a fast, accessible site built for you, that’s our day job, and our guide to site speed and SEO covers why it matters for rankings.
A website is judged by what it converts, not by what it wins.
Client results, measured in the numbers the business cares about.
See the workQuestions people ask.
How many pixels is 1 rem?
As many as the root font size, the font size set on the html element. Browsers default to 16px, so 1rem is 16px unless the site or the visitor changes it.
How do you convert px to rem?
Divide the pixels by the root font size. At the default 16px, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.
Is 1 rem equal to 16px?
Only when the root font size is 16px. That is the browser default, but a visitor who raises their browser's text size changes it, and every size set in rem grows with it. That is the point of rem: text stays readable for people who need it larger.
How many rem is 10px?
0.625rem at a 16px root. 4px is 0.25rem, 12px is 0.75rem and 14px is 0.875rem. The table on this page lists the common sizes.
What is 30 rem in pixels?
480px at a 16px root: 30 × 16. Choose "REM to PX" above to convert any size at your own root.
What is the difference between rem and em?
Rem is relative to the root font size, so 1rem is the same everywhere on the page. Em is relative to the font size of the element's parent, so nested em sizes compound. Rem is the safer choice for most spacing and type.
More free marketing tools
Free, no sign-up, and every answer shows its working.
-
Websites -
Websites Screen resolution checker
Your screen resolution, browser window size, pixel ratio and aspect ratio, read from this device the moment the page opens.
-
Ads and PPC CPM calculator
Cost per thousand impressions, the cost of a campaign, or the impressions a budget buys, then on to clicks, leads and the people you reach.
-
Ads and PPC CTR calculator
Click-through rate from clicks and impressions, set against the published average for your industry, or two ads compared to see which really wins.
-
Ads and PPC ROAS calculator
Return on ad spend, your break-even ROAS and the profit left after ads, or the target ROAS to give Google and Meta.
-
SEO and reviews SEO ROI calculator
What ranking is worth: visits, enquiries, customers and the return on your SEO spend, with Google's own search figures for 115 trades in Ireland and the UK.
Read next
-
Guide Website speed and SEO
-
Guide How to choose a web designer
Websites designed to convert, built to be fast, kept improving.
Purpose-driven design, WordPress and Shopify builds, Core Web Vitals in the green, and conversion work every month after launch.