What's the default base size?

16 pixels. That's the default html font-size in every mainstream browser, so 1rem equals 16px out of the box. Users can change the value through their browser's accessibility settings, and rem-sized elements respond automatically. There's rarely a strong reason to override the default in your stylesheet.

Why use rem instead of px for fonts?

Because it respects accessibility settings. Readers with low vision often raise their browser's default text size, and px-based fonts simply ignore the change. Switching to rem is one of the easiest WCAG-aligned improvements you can make to a stylesheet.

When is px appropriate?

For things that genuinely shouldn't scale with the reader's text size. Hairline borders, shadow offsets, and a few precise positioning cases all read better as fixed pixel values. Mix the units intentionally — pixels where you mean pixels, rem for everything else.

Em is relative to the current element's font size, so values compound as the cascade nests deeper. Rem is always relative to the root, which keeps the math predictable. Em is useful when you want padding to scale with the surrounding text; rem is the safer default for layout and consistent sizing.

Should I use 14px or 18px base?

Stick with 16px unless you have a specific reason not to. The default is what browser vendors optimized for, what accessibility tooling expects, and what makes mental conversions easier. Going to 14 or 18 px tends to complicate downstream calculations without delivering enough benefit to justify the friction.

How do I convert percentages?

At the default 16px base, 1em equals 100% and 0.5em equals 50%, so the conversion is the same as for rem. Legacy code sometimes leaned on percentages for font sizing; modern stylesheets typically use rem or em directly because the intent is clearer.

Is the data sent anywhere?

No. The conversion is straightforward division and multiplication running in your browser. The values you enter never leave your device.

PX to REM Converter

Convert between pixels and rem/em units online for responsive CSS. Free PX to REM converter with custom base font size support.

Calculators CSS Tools Developer Tools

Instant results

Base Font Size: 16px

Default browser font size is 16px. Adjust if your project uses a different base.

Pixels (px)

REM

Quick Values (click to convert)

Conversion Table (base: 16px)

Pixels	REM
8px	0.5rem
10px	0.625rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
28px	1.75rem
32px	2rem
36px	2.25rem
40px	2.5rem
48px	3rem
56px	3.5rem
64px	4rem
72px	4.5rem
80px	5rem
96px	6rem

About PX to REM Converter

Convert between pixels and rem units for CSS. REM units are relative to the root font size, making them useful for responsive design. The default browser font size is 16px.

How to Use PX to REM Converter

Enter a pixel value

Type the number you want to convert, like 24. The conversion appears immediately as you type.

Read the rem equivalent

At the default 16-pixel base, 24px works out to 1.5rem. If your project uses a different html font-size, set the base accordingly so the math matches your CSS.

Run the conversion in reverse

Need pixels from rem? Enter the rem value and the tool computes the equivalent pixel size. The same field handles both directions.

Drop the result into your stylesheet

Use rem for font sizes and major spacing where accessibility matters, and reserve pixels for things like one-pixel borders that genuinely shouldn't scale.

When to Use PX to REM Converter

Building responsive, scalable layouts

Modern frontend work expresses font sizes and major spacing in rem rather than pixels because rem scales with the user's chosen text size. Translating a Figma spec from pixels to rem (16px to 1rem, 24px to 1.5rem at the default base) is one of those small steps that gets repeated throughout a project, and having an instant calculator beats opening the dev tools console for every value.

Meeting accessibility requirements

Users with visual impairments often increase their browser's default text size. Pixels ignore that preference; rem respects it. Converting a px-heavy stylesheet to rem-based sizing is one of the practical steps toward WCAG compliance, and it matters disproportionately for government, healthcare, and educational sites that serve diverse audiences.

Establishing a design system spacing scale

Design systems usually pin a base unit (16px is most common) and derive a spacing scale from there. The converter is handy for filling in the scale — translating 4, 8, 12, 16, 24, 32 px into 0.25, 0.5, 0.75, 1, 1.5, 2 rem — and for sanity-checking that the typography ramp matches the underlying base.

Modernizing legacy stylesheets

Old CSS files riddled with hard-coded pixel values become accessible (and easier to maintain) once they're rewritten in rem. Bulk-converting a stylesheet by hand is tedious; running the values through a converter accelerates the cleanup and reduces the chance of arithmetic mistakes during the refactor.

PX to REM Converter Examples

Default base, standard value

Input

16px at the default 16px base

Output

1rem (16 divided by 16 equals 1)

Modern browsers ship with html { font-size: 16px } as their default, so 1rem reads as 16 pixels right out of the box. Users can adjust this in their browser preferences, and rem-based sizes will respond to that preference automatically.

Custom 18px base

Input

html font-size set to 18px

Output

16px is about 0.889rem, 24px is about 1.333rem, 32px is about 1.778rem

Some designs intentionally bump the base to 18 or 20 pixels for a roomier reading experience. Once you change the base, every rem calculation rebases against the new value, which is why specifying the base matters whenever it's not the default.

Bulk conversion of a stylesheet

Input

A list of pixel values

Output

Each value converted to rem at the chosen base, ready to paste back into CSS

Useful when modernizing legacy stylesheets or filling out a design system spacing scale. Running a batch through the converter avoids the per-value mental arithmetic and reduces the chance of typos during a refactor.

Tips & Best Practices for PX to REM Converter

1.Stick with the 16px default base unless you have a deliberate reason to change it. Browser vendors picked the value because it reads well across typical displays, and overriding it complicates every accessibility tool that assumes the default.
2.Use rem for font sizes, full stop. Pixel-based fonts ignore the user's text-size preference, which is a real accessibility regression for readers with low vision.
3.Em and rem aren't interchangeable. Em is relative to the element's own font size and compounds through nesting, while rem is always relative to the root. Rem behaves more predictably and is the safer default for layout work.
4.A few conversions are worth memorizing. 1rem is 16px, 1.25rem is 20px, 1.5rem is 24px, and 2rem is 32px. That handful covers the bulk of everyday spacing decisions.
5.Mixing units is fine when there's a reason. Rem suits typography and major spacing; pixels still make sense for hairline borders where you genuinely want a one-pixel line regardless of zoom level.
6.Compounded em values can surprise you. A 1.2em on a parent plus 1.2em on a child produces 1.44em effective sizing because the child inherits the parent's computed size. Rem sidesteps the cascade entirely and avoids this class of bug.

Frequently Asked Questions

Pixels are absolute units that ignore the user's text-size preference. Rem is relative to the root font-size, which defaults to 16px in every modern browser, and scales when the user adjusts their preferred reading size. Modern stylesheets favor rem for typography and major spacing precisely because it respects those preferences.

PX to REM Converter

About PX to REM Converter

How to Use PX to REM Converter

Enter a pixel value

Read the rem equivalent

Run the conversion in reverse

Drop the result into your stylesheet

When to Use PX to REM Converter

Building responsive, scalable layouts

Meeting accessibility requirements

Establishing a design system spacing scale

Modernizing legacy stylesheets

PX to REM Converter Examples

Default base, standard value

Custom 18px base

Bulk conversion of a stylesheet

Tips & Best Practices for PX to REM Converter

Frequently Asked Questions

Related Tools

Font Size Calculator

Temperature Converter

Length Converter

Weight Converter

Area Converter

Volume Converter