EM/REM-to-Pixel Converter

Fast, accurate and free online em rem piksele converter tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Settings

Direction

Unit

Value

Base px

Precision

Include unit Tool Option

Result

raw: 20px

Rate this tool:

Related tools

Other tools you may find useful

Em/rem to pixel converter – CSS units without calculations

Working with relative CSS units (em, rem) requires constant conversion to pixels and back. The tool calculates the conversion both ways: em↔px and rem↔px, taking into account the context of the parent (for em) and root font-size (for rem). Enter one value - the rest will be calculated automatically.

em converter rem px convert em to pixels rem to px calculator CSS units calculator

Difference between em and rem

em: relative to the font-size of the parent element. Inheritance causes a cascading effect (1.5em inside 1.5em = 2.25× base). rem (root em): relative only to the font-size of theelement (default 16px). Predictable and easier to maintain, rem is preferred for design systems.

Typical conversion values (16px base)

0.25rem = 4px, 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 1.75rem = 28px, 2rem = 32px, 2.5rem = 40px, 3rem = 48px, 4rem = 64px. Changing the base (e.g. 10px by html{font-size:62.5%}) simplifies: 1rem=10px, 1.6rem=16px.

When to use px, em, rem and when to use vw/vh?

px: borders, box-shadow, borders, min-height. rem: font-size, spacing (padding/margin) – scalable with user's browser settings. em: spacing proportional to the text size in the component (button padding). vw/vh: layout sizes, hero sections, fullscreen modals. %: width of flex/grid containers.

Text accessibility and scaling

Using rem for font-size instead of px respects user preferences (browser settings > text size). Users with low vision set the browser base font to 20-24px. px blocks this scaling. WCAG 1.4.4 (AA): text must be enlargeable to 200% without loss of content.

FAQ

Why is the browser's default font-size 16px?

Historically set by Netscape in the 1990s as the readable size for typical 72-96 DPI monitors. Maintained for backward compatibility. The user can change it in the browser settings (Chrome: Settings → Appearance → Font size).

Is it worth changing the html font-size to 62.5%?

html { font-size: 62.5%; } → 1rem = 10px (easy conversion). Controversial: breaks user settings (browser 20px → now 62.5% × 20px = 12.5px as base). Safer alternative: calc() or custom CSS properties: --base: 16px.

How does em work with nested elements?

Each nesting multiplies: div {font-size: 1.2em} inside p {font-size: 1.2em} = 1.44× base. "em creep" problem: after 5 levels of nesting, the text is unreadably large. rem solves this problem.

What CSS units are best for spacing (margin/padding)?

rem for global spacing (maintains aspect ratio when changing base font). em for spacing inside components (button, badge – padding scales with the size of the button text). px for very small or fixed spacing (1px border, 2px gap).

Do media queries understand em and rem?

Yes - and this is important: media queries are based on the browser's default font-size (16px), NOT on the changed HTML font-size. So @media(min-width: 48em) = 768px always, regardless of html { font-size: 62.5% }. px in media queries are safer and more predictable.

Related Tools: Flexbox Sandbox, CSS Grid Sandbox, and CSS Ratio Calculator.