EM to REM Converter
Convert CSS EM units to REM with customisable font sizes
Common EM to REM Conversions
This reference table shows standard EM to REM conversions when both units share the same base font size (16px default). In this scenario, EM and REM values are equivalent because the parent and root font sizes match.
| EM Value | REM Value | Pixel Equivalent | Common Usage |
|---|---|---|---|
| 0.25em | 0.25rem | 4px | Minimal spacing |
| 0.5em | 0.5rem | 8px | Small padding |
| 0.75em | 0.75rem | 12px | Reduced text |
| 1em | 1rem | 16px | Base font size |
| 1.25em | 1.25rem | 20px | Slightly larger text |
| 1.5em | 1.5rem | 24px | Subheadings |
| 2em | 2rem | 32px | Headings |
| 2.5em | 2.5rem | 40px | Large headings |
| 3em | 3rem | 48px | Hero text |
| 4em | 4rem | 64px | Display text |
Conversion Formula and Steps
REM = (EM × Parent Font Size) ÷ Root Font Size
How to Convert EM to REM Manually
- Identify the EM value you want to convert (e.g., 2em)
- Determine the parent element’s font size in pixels. If not specified, the browser default is 16px
- Determine the root font size (html element). The standard default is 16px
- Convert EM to pixels: Multiply the EM value by the parent font size (2em × 16px = 32px)
- Convert pixels to REM: Divide the pixel value by the root font size (32px ÷ 16px = 2rem)
Convert 3em to REM with a parent font size of 20px and root font size of 16px:
Step 1: 3em × 20px = 60px
Step 2: 60px ÷ 16px = 3.75rem
Result: 3em = 3.75rem
EM vs REM: Key Differences
Both EM and REM are relative CSS units, but they reference different elements, making them suitable for distinct scenarios in web development.
EM Units
- Relative to: Parent element’s font size
- Behaviour: Compounds through nested elements
- Best for: Component-level scaling
- Examples: Button padding, icon sizes within components
- Flexibility: Adapts to local context
- Challenge: Can become unpredictable in deep nesting
REM Units
- Relative to: Root (html) element’s font size
- Behaviour: Consistent throughout the document
- Best for: Global typography and spacing
- Examples: Page margins, typography scale, layout grid
- Flexibility: Predictable across all contexts
- Advantage: Simplified maintenance and accessibility
When to Choose EM: Use EM when you need elements to scale relative to their immediate parent, such as padding within buttons that should grow with text size.
When to Choose REM: Use REM for consistent sizing across your site, particularly for typography, spacing systems, and layout dimensions.
Why Convert Between EM and REM?
Converting between EM and REM is essential when refactoring CSS code or maintaining design systems. Legacy codebases often use EM units extensively, whilst modern best practices favour REM for global consistency.
Common Conversion Scenarios
Legacy Code Modernisation
When updating older stylesheets that rely heavily on EM units, converting to REM can simplify maintenance and improve predictability across the entire site.
Design System Migration
Transitioning from component-based EM scaling to a unified REM-based design system requires accurate conversions to maintain visual consistency.
Accessibility Improvements
REM units respect user font size preferences more consistently than nested EM units, making conversions valuable for accessibility enhancements.
Frequently Asked Questions
What is the difference between EM and REM units?
EM units are relative to the font size of the parent element, whilst REM units are relative to the root element’s font size (typically the html element). This means EM values can compound through nested elements, whereas REM remains consistent throughout the document.
What is the default browser font size?
Most browsers use 16px as the default root font size. However, users can adjust this in their browser settings for accessibility reasons, which is why relative units like REM are preferred over fixed pixel values.
Can EM and REM have different values?
Yes. When the parent element’s font size differs from the root font size, the same numerical EM and REM values will represent different pixel sizes. For example, if a parent has 20px font size and the root has 16px, then 2em equals 40px whilst 2rem equals 32px.
Should I use EM or REM for responsive design?
REM is generally preferred for responsive layouts because it provides consistent scaling across the entire page. Use REM for typography, spacing, and layout dimensions. Reserve EM for component-internal scaling where elements should adapt to their local context.
How does nesting affect EM units?
EM units compound through nested elements. If a parent has font-size: 1.5em and a child also has font-size: 1.5em, the child’s actual size is 2.25em relative to the grandparent (1.5 × 1.5). REM avoids this compounding by always referencing the root.
What is the 62.5% technique?
Some developers set html { font-size: 62.5%; } to make 1rem equal 10px (62.5% of 16px). This simplifies mental maths but can interfere with user accessibility settings. Modern best practice is to keep the default 16px and adapt to relative units.