rem (Root em) and em

Flexible, Scalable Units for Responsive Design

Both rem (root em) and em are relative units of measurement in web design. rem is based on the font-size of the root element (usually the element), while em is relative to the font-size of the parent element. These units provide more flexibility than px, as they scale dynamically based on the surrounding context, making them ideal for responsive and accessible design. rem ensures consistent scaling across the website, while em can vary depending on the size of the parent element, which can be useful for component-based design.

Pro and contra of using the rem/em unit

Pros:

• Scalability: Both rem and em scale based on the font size of either the root element (rem) or the parent element (em), making them more adaptable for responsive designs.

• Accessibility: These units allow users to adjust the size of text through browser settings, improving readability for those with vision impairments.

• Consistency with Root Size: rem ensures uniformity across the site when the root font size is adjusted, making it ideal for global design scaling.

Cons:

• Complexity with em: The size of em can change depending on the parent element's size, making it harder to manage and predict, especially in nested layouts.

• Potential for Over-Scaling: If the root font size or parent element changes unexpectedly, it can cause elements to scale in an unintended way, leading to layout issues.

• Requires Planning: For effective use of rem and em, designers need to plan their font sizes and layouts carefully, as changes in one element can affect others.

Calculator formula

Examples