Instantly convert REM to EM and EM to REM
A simple and fast tool to convert REM units to EM units and vice versa for your web designs.
How to Convert REM to EM
Step 1: Determine the Font Sizes
You need two values: the root font-size of your project (usually 16px) and the font-size of the direct parent element where you plan to use the `em` unit.
Step 2: Use the Conversion Formula
The formula to convert REM to EM is: `(REM Value * Base Font Size) / Parent Font Size`.
Result in EM = (REM * Base PX) / Parent PX
Step 3: Example Calculation
If you want to convert 2rem to `em`, your base font size is 16px, and the parent element’s font size is 20px, the calculation is:
(2 * 16) / 20 = 1.6
So, 2rem is equal to 1.6em in this context.
Common REM to EM Reference
A quick reference table based on the base and parent font sizes set above.
REM to EM Converter Information
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.
Understanding EM Units
The `em` unit is also relative, but it is relative to the font-size of its direct parent element. This makes it powerful for creating components that scale within themselves. For example, the padding of a button can be set in `em` so that it grows or shrinks relative to the button’s font-size.
Why Convert REM to EM?
Converting `rem` to `em` is useful when you want to translate a globally-scaled size (`rem`) into a locally-scaled size (`em`). This is helpful for:
- Component-Based Design: You might have a design system based on `rem` units, but for a specific component, you want its internal spacing to be relative to its own font size. Converting the `rem` value to an `em` value allows this.
- Maintaining Proportions: It helps in maintaining the proportions of an element’s internal structure (like padding and margins) relative to its text size, even if the element itself is placed in different contexts with varying font sizes.
- Complex Layouts: In nested layouts where parent elements have different font sizes, converting a `rem` unit to an `em` unit ensures the element fits correctly within its immediate parent’s scaling context.