REM
What is the REM?
The REM (Root EM) is a relative unit of measurement in CSS that is based on the font size of the root element of the HTML document (the element <html>). Unlike the EM unit, which is relative to the parent element, the REM provides a constant and predictable reference for sizing web elements.
By default, most browsers set the font size for the root element to 16 pixels, which means that 1rem = 16px. This value can be changed by explicitly setting a font size on the element html.
Difference between REM and EM
The distinction between REM and EM is crucial to understand their use:
EM : Based on the font size of the direct parent element. If you have multiple levels of nesting, EM values accumulate, creating a multiplier effect that can quickly become unmanageable.
REM : Always based on the font size of the root element, offering a stable reference regardless of the level of nesting in the DOM.
Benefits of REM
Predictability and Consistency
The REM eliminates the complex calculation problems associated with the nesting of elements. Each REM value is calculated directly from the root, ensuring consistency throughout the design.
Improved accessibility
REM units respect users' font size preferences. If a user increases the font size of their browser, all elements sized in REM will adapt proportionally.
Ease of maintenance
Changing the root font size allows you to adjust the scale of the entire site instantly, facilitating responsive adaptations and global design changes.
Practical calculations with REM
Pixels to REM conversion
To convert pixels to REM, use the formula:REM = Desired pixels ÷ Root font size
Examples with a 16px base:
12px = 0.75rem (12 ÷ 16)
18px = 1.125rem (18 ÷ 16)
24px = 1.5rem (24 ÷ 16)
32px = 2rem (32 ÷ 16)Base 10 REM technique
A lot of developers define html {font-size: 62.5%;} (i.e. 10px) to simplify the calculations:
1rem = 10px
1.6rem = 16px
2.4rem = 24pxRecommended Uses
Typography
The REM excels at defining font sizes, creating a consistent typographic hierarchy:
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
p { font-size: 1rem; }Spacings
Use REM for margins, paddings, and spacings to maintain harmonious proportions:
.container { padding: 2rem; }
.section { margin-bottom: 1.5rem; }UI components
The buttons, maps and other interface elements benefit from the scalability of the REM.
Limits and Considerations
Accuracy Issues
Conversions can generate complex decimal values that are difficult to maintain.
Inappropriate context
For certain elements such as thin borders or decorative details, pixels are still more appropriate because they do not have to adapt to user preferences.
Browser support
Although widely supported, IE8 and earlier do not recognize REM units.
Good practices
Define a clear base : Establish a consistent root font size from the start of the project.
Document your scales : Create a design system with standardized REM values.
Test accessibility : Verify that your design remains functional with different user font sizes.
Combine intelligently : Use REM for general structure and pixels for fine details.
The REM represents a powerful tool for creating flexible, accessible and maintainable web interfaces, particularly suited to the requirements of modern responsive design.