Convert pixels to rem, em, pt, and viewport units. Change the base font size to match your project.
Default browser font size is 16px. Change this to match your project's html font-size.
px → Other Units
Unit
Value
Notes
rem
—
relative to root font
em
—
relative to parent (assumes same as root)
pt
—
1px = 0.75pt
%
—
relative to 16px base
vw
—
assumes 1920px viewport width
vh
—
assumes 1080px viewport height
rem → Other Units
Unit
Value
Notes
px
—
pixels
em
—
same as rem (assuming root = parent)
pt
—
1px = 0.75pt
Common Conversions (base: 16px)
px
rem
pt
em
Frequently Asked Questions
What is the difference between px, rem, and em in CSS?
px (pixels) is an absolute unit — 1px is one device-independent pixel. rem (root em) is relative to the root element's font size (typically the html element), so 1rem equals the root font size (usually 16px by default). em is relative to the font size of the element's parent — so if a parent has font-size: 20px, then 1em in a child element equals 20px. rem is generally preferred over em for layout because it doesn't compound across nested elements.
Why should I use rem instead of px?
Using rem instead of px makes your design more accessible and responsive. When a user changes their browser's default font size (for example, to improve readability), rem-based sizes scale accordingly while px sizes stay fixed. rem units also make it easier to build scalable design systems — you can change all your sizes by just updating the root font size. For accessibility compliance (WCAG), relative units are strongly recommended for text and spacing.
What is the default font size in browsers?
The default font size in most browsers is 16px. This means 1rem = 16px unless you or the user has overridden the root font size. A common technique is to set html { font-size: 62.5%; } which makes 1rem = 10px, simplifying math (e.g. 1.6rem = 16px). However, this technique can cause accessibility issues because it overrides the user's browser preference, so use it with care.