CSS Unit Converter
Convert between PX, REM, and EM units with configurable root font size.
Result
0.875
0.875rem
Default is 16px. Many sites use 14px or 18px.
The immediate parent element's font size. Used for EM conversions.
Quick Conversions
Calculation
14px ÷ 16px (root) = 0.875rem
CSS Unit Conversion Guide
Pixels (PX)
PX is an absolute unit. 1px always equals 1 pixel on the screen, regardless of screen size or user settings. Avoid using PX for font sizes in responsive designs because it does not scale.
REM (Root EM)
REM is relative to the root HTML font size, which defaults to 16px. If the root is 16px, then 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px. Change the root size in one place and all REM values scale automatically. This is the best unit for global typography and spacing.
EM
EM is relative to the parent element's font size. If a parent has font-size: 20px, then 1em inside that parent equals 20px. EM is useful for component-scoped sizing, but can be confusing with nested elements since it compounds (a 1em element inside a 1em element becomes 2em in relation to the root).
Common Conversions (16px Root)
How to Use This Converter
- Enter a value (e.g., 14 for 14 pixels, or 1.5 for 1.5 rem).
- Select the source unit (the unit you're starting with).
- Select the target unit (the unit you want to convert to).
- View the result and copy it. The calculation is shown below so you can verify it.
- Adjust root/parent font size if your site uses a non-standard base (e.g., 14px or 18px root).
- Use Quick Conversions buttons for common pixel-to-rem conversions.
Best Practices for Responsive CSS
Use REM for Global Typography
Set font sizes, line heights, and spacing in REM. Adjust the root font size in media queries to scale everything at once:
html { font-size: 16px; }
@media (max-width: 768px) {
html { font-size: 14px; }
}Use EM for Component Spacing
Use EM for padding and margins within a component so they scale relative to that component's font size:
.button {
font-size: 1rem; /* scales with root */
padding: 0.5em; /* relative to button's font size */
}Avoid PX for Font Sizes
PX sizes do not scale when users adjust their browser's default font size. Always use REM or EM for accessibility.
Frequently Asked Questions
Why should I use REM instead of PX for font sizes?
REM (root em) is relative to the root HTML font size, making it easier to scale all typography at once. If you change the root font size from 16px to 18px, all REM-based sizes automatically scale. PX is absolute and does not scale, making responsive design harder.
When should I use EM instead of REM?
EM is relative to the parent element's font size, making it useful for component-scoped sizing. Use EM for padding, margins, and borders within a component so they scale relative to that component's font size. REM is better for global sizing across the entire page.
What is the default root font size?
The default root font size in all browsers is 16px. However, users can override this in their browser settings, and many sites set a custom root size. This tool defaults to 16px but allows you to adjust it for your site's configuration.
Should I use different units for mobile vs desktop?
No. Units like REM and EM are inherently responsive. Use REM for global sizing and EM for component-relative sizing. Adjust the base font size with media queries (e.g., @media (max-width: 768px) { html { font-size: 14px; } }) and all REM values scale automatically.
Can I use decimal values like 1.5rem?
Yes, decimal values are fully supported in CSS. 1.5rem = 24px (at 16px root), 0.875rem = 14px, etc. Decimals are useful for fine-tuning spacing and typography.
How does the "Parent Font Size" slider work?
EM is relative to its immediate parent element's font size, not the root. If a parent div has font-size: 20px, then 1em inside equals 20px. Use the Parent Font Size slider to simulate different parent sizes and see EM conversion results accurately.