How do I convert rem to px?

Multiply the rem value by the root font size. At a 16px base, px = rem × 16, so 1rem is 16px, 1.5rem is 24px, and 0.75rem is 12px. Change the base font size in the tool if your html element uses a different value.

What is the default root font size?

Browsers set the html element to 16px by default, which is why this converter starts at 16. Because 1rem always equals the root font size, that default makes 16px equal to exactly 1rem. Users can change their browser’s default text size, which is one reason rem is preferred for accessible, scalable typography.

What is the difference between rem and em?

A rem is always relative to the root (html) font size, so it stays consistent across the whole page. An em is relative to the font size of the current element, so it can compound when nested elements each set their own size. This tool assumes an element sized at the base, so rem and em match - adjust the base font size to model a specific em context.

How do px and pt relate in CSS?

CSS defines 1 inch as 96 pixels and 72 points, so 1pt equals 96/72 ≈ 1.333px, and 1px equals 0.75pt. Points come from print typography; on screen they are just a fixed multiple of the CSS reference pixel. Use px or rem for screen work and reserve pt for print stylesheets.

What does the "62.5%" font-size trick do?

Setting the html font size to 62.5% makes the root font size 10px (62.5% of 16px), so 1rem becomes a convenient 10px and rem math turns into "move the decimal" - 1.6rem is 16px, 2.4rem is 24px. To model this in the converter, set the base font size to 10 and read the rem column.

Should I use px or rem for font sizes?

Rem is generally preferred for font sizes because it scales with the user’s browser font-size preference, which improves accessibility, while fixed px does not. Many teams design in px and convert to rem for the final CSS, which is exactly what this tool speeds up. Layout details like borders often stay in px.

How is percent converted here?

Percent is treated as a share of the base font size, so 100% equals the base and 50% equals half of it. At a 16px base, 100% is 16px and 150% is 24px. This matches how a percentage font-size resolves against its reference size.

Why does the converted value have long decimals sometimes?

Some conversions are not exact - 15px at a 16px base is 0.9375rem, and pt values often produce repeating decimals. The tool rounds to a few decimal places and trims trailing zeros for readability. For pixel-perfect layouts, round rem values to two or three decimals or pick a base that divides your sizes cleanly.

How do I convert px to em?

Divide the pixel value by the font size of the element it applies to. At a 16px context, px ÷ 16 gives em, so 24px is 1.5em and 8px is 0.5em - the same math as rem at the base. The difference is that em is relative to the current element, so it compounds when nested elements each set their own size; set the base font size here to model a specific context.

Is my input sent to a server?

No. Every conversion runs in JavaScript in your browser, which is why results update on each keystroke instead of after a network request. Nothing you type is transmitted, logged, or stored, and the converter continues to work offline once the page has loaded.

CSS Unit Converter

Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.

Convert from:

Value (Pixels (px))

Base font size (px)

Converted values

16px

rem

1rem

1em

12pt

100%

px → rem reference (base 16px)

px	rem	em	pt	%
1	0.0625	0.0625	0.75	6.25
2	0.125	0.125	1.5	12.5
4	0.25	0.25	3	25
8	0.5	0.5	6	50
10	0.625	0.625	7.5	62.5
12	0.75	0.75	9	75
14	0.875	0.875	10.5	87.5
16	1	1	12	100
18	1.125	1.125	13.5	112.5
20	1.25	1.25	15	125
24	1.5	1.5	18	150
28	1.75	1.75	21	175
32	2	2	24	200
36	2.25	2.25	27	225
40	2.5	2.5	30	250
48	3	3	36	300
56	3.5	3.5	42	350
64	4	4	48	400

Category:css

Mode:Offline

Version:1.0.0

Access:Free

What is a CSS Unit Converter?

CSS Unit Converter interface on Toolz.dev - Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.

A CSS Unit Converter translates a length between the units CSS uses for sizing type and layout: px, rem, em, pt, and %. It exists because modern responsive design leans on relative units - rem and em scale with the user’s font-size settings and zoom - while design mockups and older stylesheets are usually expressed in fixed pixels. This tool takes a value like 24px and shows it as 1.5rem, 1.5em, 18pt, and 150% at once, and works in every direction from a single field.

The conversions all hinge on one number: the root (base) font size, which defaults to 16px because that is the browser default for the html element. One rem always equals that base font size, so at 16px the value 16px is 1rem, 24px is 1.5rem, and 8px is 0.5rem. Points are tied to the CSS reference pixel - 1 inch is 96px and 72pt - so 1pt equals 96/72, about 1.333px. Percent is treated as a share of the base font size, so 100% equals the base and 50% equals half of it.

Everything runs in your browser as you type, so there is no upload and no waiting on a server. Change the base font size to model a component that sets its own font-size, read the results in every unit, and copy the one you need. The built-in px-to-rem table gives you a ready reference for the sizes that come up most in a type scale.

How to use the CSS Unit Converter?

Enter a value and pick its unit

Type the number you want to convert and choose the unit it is currently in - px, rem, em, pt, or %. You can also paste a value with its unit, like 24px, and the tool will read the unit for you.

Set the base font size

Adjust the root font size if your project uses something other than the 16px browser default. This controls how rem, em, and % relate to pixels.

Read every unit at once

The converter shows the equivalent value in all supported units instantly, each with its unit suffix so you can drop it straight into CSS.

Copy or use the reference table

Copy any result with one click, or scan the px-to-rem reference table for the common sizes in a typographic scale.

Key Features

Every unit at once

Enter one value and instantly see px, rem, em, pt, and % side by side, each formatted with its unit so you can paste it directly into a stylesheet.

Configurable base font size

The root font size is adjustable, so rem, em, and % conversions match your project - whether you use the 16px default, a 10px "62.5%" trick, or a component-level font-size.

Two-way, any direction

There is no fixed "from" and "to". Convert px to rem, rem to px, px to em, or pt to px - any unit to any unit - from a single input.

Px-to-rem reference table

A built-in table lists the rem, em, pt, and % equivalents for the pixel sizes that appear most in type scales, so you can eyeball a whole scale at your chosen base.

Frequently Asked Questions

Divide the pixel value by the root font size. At the browser default of 16px, rem = px ÷ 16, so 16px is 1rem, 24px is 1.5rem, and 8px is 0.5rem. Enter the pixel value in the converter and the rem equivalent appears instantly at whatever base font size you set.

Related Tools

CBS

css

CSS Box Shadow Generator

Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.

CCG

css

CSS Clamp Generator

Generate fluid, responsive CSS clamp() values that scale between viewports

css

Flexbox Generator

Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.

CSS

css

CSS Gradient Generator

Create beautiful CSS gradients with live preview

Comments

0 comments

No comments yet. Be the first to share your thoughts!

px to rem converterrem to px converterpx to em convertercss unit converterpx to pt converterrem calculatorem to pxcss font size converterpixel to remresponsive font size converter

Learn more

Read the full CSS Unit Converter guide

Command Palette