EM to REM Converter
A simple and fast tool to convert EM units to REM units for your web designs.
How to Convert EM to REM
Step 1: Determine the Font Sizes
You need two values: the font-size of the direct parent element in pixels, and the root font-size of your project (usually 16px).
Step 2: Use the Conversion Formula
The formula to convert EM to REM is: `(EM Value * Parent Font Size) / Base Font Size`.
Step 3: Example Calculation
If you want to convert 1.25em to `rem`, the parent element's font size is 20px, and your base font size is 16px, the calculation is:
(1.25 * 20) / 16 = 1.5625
So, 1.25em is equal to 1.5625rem in this context.
Common EM to REM Reference
A quick reference table based on the parent and base font sizes set above.
| EM | REM |
|---|
EM to REM Converter Information
Understanding EM Units
The `em` unit is a relative unit of measurement in CSS. It is relative to the font-size of its direct parent element. This makes it powerful for creating components that scale within themselves, but can sometimes lead to complex calculations in nested elements.
Understanding REM Units
The `rem` unit stands for "root em". It is relative only to the font-size of the root (``) element. This provides a stable and predictable unit for sizing that scales consistently across your entire application based on user preferences, avoiding the compounding issues of `em` units.
Why Convert EM to REM?
Converting `em` to `rem` is useful when you want to standardize a locally-scaled size (`em`) into a globally-scaled size (`rem`). This is helpful for:
- Refactoring CSS: When updating an older codebase that uses `em` units, converting them to `rem` can create a more consistent and maintainable sizing system.
- Design System Consistency: To ensure that all components in a design system adhere to a global typographic scale based on the root font-size.
- Simplifying Calculations: Converting `em` values to `rem` can simplify your mental model of how elements are sized, as you only need to consider the root font-size instead of the font-size of various parent elements.