Pixel to Em Converter
Convert pixel values to em/rem units for CSS.
Typically 16px (browser default)
Pixels
16.00px
Em / Rem
1.0000em
Base font size
16px
How to use Pixel to Em Converter
Enter Your Pixel Value
Type the pixel number into the 'Pixel (px)' input field at the top of the converter. For example, enter '16' to convert 16 pixels. The field accepts whole numbers and decimals.
Set the Base Font Size
Input your base font size in the 'Base Font Size (px)' field. Default is 16px (browser standard). Adjust this if your project uses a different base size like 14px or 18px.
Choose Em or Rem Unit
Click the toggle between 'Em' and 'Rem' buttons below the input fields. Select 'Em' for relative to parent element or 'Rem' for relative to root element.
View Instant Conversion Result
The converted value appears immediately in the 'Result' box below. Copy the result by clicking the 'Copy to Clipboard' button next to the output value.
Paste into Your CSS Code
Paste the copied em/rem value directly into your CSS file, HTML style tags, or CSS-in-JS framework. The conversion is complete and ready to use.
Related Tools
Pixel to em converter: px to em and rem for responsive CSS
Pixel to em converter: px to em and rem for responsive CSS
Convert CSS pixel values to em or rem units, and back, at ToolHQ's pixel to em converter, supports both em and rem, adjustable base font size, bidirectional conversion, and all calculations run instantly in your browser.
A px-to-em converter translates fixed pixel values into relative CSS units so that text and spacing scale proportionally with the user's font size preferences, enabling truly responsive typography.
Hardcoded pixel values in CSS override users' browser font size settings and accessibility preferences. Relative units like em and rem respect those settings. ToolHQ's converter makes the translation instant, with no need to manually divide every value by the base font size.
Key Takeaways
- Convert px to em, px to rem, em to px, and rem to px, bidirectional in both units
- Adjustable base font size (default 16px, the browser default)
- No data is stored or transmitted, all calculations run locally in your browser
- em is relative to the parent element's font size; rem is relative to the root element
- The reference table below covers the most common typography sizes at 16px base
What is a pixel to em converter and why does it matter?
In CSS, pixels are absolute units, a 16px font is always 16 pixels regardless of the user's preferences. Em and rem are relative units:
- em: Relative to the font size of the current element's parent. If the parent is 20px and you set a child to
1.5em, the child renders at 30px. - rem (root em): Relative to the font size of the root element (
<html>). If the root is 16px,1.5remalways renders at 24px, regardless of nesting.
The conversion formula is straightforward:
em/rem = px ÷ base font size
At the browser default of 16px: 24px ÷ 16 = 1.5em. To convert back: em value × base font size = px. So 1.5em × 16 = 24px.
ToolHQ's converter applies this formula for any base font size you set, in either direction, enter pixels and get em/rem, or enter em/rem and get pixels. The W3C CSS Values specification defines rem as part of the CSS standard and it is now supported in all modern browsers.
All calculations run locally in your browser, no data is stored or transmitted.
When to use em vs rem
The key practical difference between em and rem is what happens with nested elements:
| Unit | Relative to | Main advantage | Main risk |
|---|---|---|---|
| rem | Root font size (<html>) |
Consistent everywhere in the document | Less flexibility for component-level scaling |
| em | Parent element's font size | Can scale locally within a component | Cascades: nested em compounds (1.2em inside 1.2em = 1.44em effective) |
Practical rule: Use rem for typography (body text, headings, margins, padding based on type size) across most of your project. Use em when you want an element to scale relative to its immediate context, for example, padding on a button that should grow if the button's text is larger.
The "cascading problem" with em is the main reason rem became the preferred unit in modern CSS: if you set font-size: 1.2em on a container, then another 1.2em on text inside it, the text renders at 1.44em of the root, 23px at a 16px base, not the 19.2px you intended. Rem avoids this entirely.
Mini-story 1: Tomás was building a design system for his company's web product. He had been using pixel values for all font sizes and spacing throughout the codebase. When the accessibility team reported that text did not scale when users increased their browser font size, he switched to rem units throughout. He used ToolHQ's pixel to em converter to translate every pixel value from the old design spec to rem at a 16px base, a spreadsheet's worth of conversions done in minutes rather than hours.
Convert px to em or rem free at ToolHQ
How to use the ToolHQ pixel to em converter
The conversion is instant:
- Go to the tool. Navigate to ToolHQ's pixel to em converter. No account or sign-up required.
- Set your base font size. The default is 16px, which matches the browser default. If your root
<html>element has a different font size set in CSS, enter that value instead. - Choose your unit. Select whether to convert to em or rem (the math is identical, but the choice affects which HTML element the value is relative to).
- Enter your pixel value. Type a pixel value and the equivalent em/rem appears immediately.
- Convert in reverse. Enter an em or rem value and get the pixel equivalent back, useful when reviewing existing CSS that uses relative units and you want to know the pixel size.
For applying converted values in CSS, ToolHQ's CSS minifier cleans up stylesheets after you have updated them with the new units.
Common px to rem reference table (16px base)
These are the most frequently used typography sizes in web design, converted to rem at the standard 16px browser default:
| Pixel value | rem value | Typical use |
|---|---|---|
| 10px | 0.625rem | Small labels, captions |
| 12px | 0.75rem | Small body text, footnotes |
| 14px | 0.875rem | Secondary text, UI labels |
| 16px | 1rem | Base body text (default) |
| 18px | 1.125rem | Comfortable body text |
| 20px | 1.25rem | Lead text, emphasized body |
| 24px | 1.5rem | H4/H5 headings |
| 28px | 1.75rem | H3 headings |
| 32px | 2rem | H2 headings |
| 36px | 2.25rem | H1 on smaller screens |
| 48px | 3rem | Large hero headings |
| 64px | 4rem | Display/hero headings |
If your root font size is not 16px, for example, if you have set html { font-size: 62.5%; } to make rem conversions easier (1rem = 10px), adjust the base font size in ToolHQ's converter accordingly. At 10px base: 16px = 1.6rem, 24px = 2.4rem, and so on.
Mini-story 2: Priya was working on a client's website and needed to add spacing values from a Figma mockup (all in pixels) to a CSS file that used rem throughout. Instead of calculating each value manually, she kept ToolHQ's pixel to em converter open in a browser tab with the base size set to 16px. She typed each spacing value from Figma and copied the rem equivalent directly into the stylesheet. The whole integration took twenty minutes instead of the hour she had estimated.
Frequently asked questions
What is the difference between em and rem in CSS?
Em is relative to the parent element's font size; rem is relative to the root <html> element's font size. Rem is more predictable across nested components and is the preferred choice for most modern CSS projects.
What is the base font size for em and rem?
Most browsers default to 16px as the root font size unless overridden in CSS. If you have set a different root font size, adjust the base in ToolHQ's converter to match.
How do I convert 24px to rem?
At 16px base: 24 ÷ 16 = 1.5rem. ToolHQ's converter does this automatically for any value. Alternatively, use the formula: rem = px / base font size.
Why should I use rem instead of px?
Rem units respect the user's browser font size settings, which matters for accessibility. Pixels do not scale when users increase their default font size. Relative units also make it easier to scale your entire design by changing only the root font size.
Is the pixel to em converter free?
Yes. ToolHQ's pixel to em converter is completely free, with no account, no sign-up, and no usage limits.
The short version
Converting pixels to em or rem is one of the most repetitive micro-tasks in CSS development, and it is always the same formula: divide by the base font size. ToolHQ's pixel to em converter automates that in both directions, for both em and rem, at any base font size you need. It is free, instant, and requires no account.
After converting your values, ToolHQ's CSS minifier strips whitespace and comments from your stylesheet, the border radius generator creates responsive corner values, and the HTML formatter cleans up your template markup. Explore more developer tools at ToolHQ.
Convert px to em or rem free at ToolHQ