What are em & rem on a type scale?
TL;DR
- In web design, em and rem units are essential for flexible and scalable typography.
- Unlike pixels, which are fixed and tied to screen resolution, em and rem are relative units.
- Em units are relative to the font size of their parent element, allowing nested scaling. For instance, if a parent has a font size of 16px, 1em equals 16px; 1.5em equals 24px. This makes em useful for component-specific sizing and nested elements, like buttons inside a card or list items in a menu.
- Rem units, on the other hand, are relative to the root element (<html>), ensuring consistent scaling across the entire site. If the root font size is 16px, 1rem is always 16px. This consistency makes rem ideal for global text sizing, uniform layouts, and responsive design. Adjusting the root font size will proportionally scale all elements using rem.
Deep dive
In web design, understanding em and rem units is crucial for creating flexible and scalable typography. Both units are relative measurements, but they reference different origins, impacting how they scale within a design.
Pixels, however, are fixed units tied to the resolution of the screen, making them absolute measurements. Because they don't change, pixels can be less effective for some projects, especially when designing responsive websites and web apps.
Related reading: What is a classic type scale? How do mathematical principles and musical theory influence its design?
Em units
The em unit is relative to the font size of its closest parent element. This means that if a parent element has a font size of 16px, 1em within that element is also 16px. If a child element within this parent is set to 1.5em, its font size would be 24px (1.5 * 16px). This relationship allows for nested scaling, which can be both powerful and complex. However, it can lead to compounded scaling effects, where the size increases or decreases significantly as the nesting deepens.
Advantages of em units
- Flexible scaling: Allows for dynamic resizing based on parent elements.
- Inheritance control: Enables designers to manage typography hierarchies effectively.
Challenges with em units
- Complexity in nesting: Deeply nested elements can lead to unexpected sizes.
- Maintenance difficulties: Adjustments in parent elements require careful consideration of child elements.
Rem units
The rem unit stands for "root em" and is relative to the root element (typically the <html> element). If the root font size is 16px, 1rem will always be 16px, regardless of its nesting within other elements. This provides a consistent reference point across the entire design, simplifying the scaling process.
Advantages of rem units
- Consistency: Ensures uniform scaling across the entire site, as all rem units reference the root size.
- Simplicity: Easier to maintain and understand, especially in large projects.
Challenges with rem units
Global adjustments: Changes to the root font size affect all rem-based elements, requiring careful consideration.
Practical application in type scales
Creating a type scale with em and rem units involves setting a base font size and then defining typography styles that scale appropriately.
Example using em:
Challenges with rem units
Global adjustments: Changes to the root font size affect all rem-based elements, requiring careful consideration.
Related reading: How do I establish a type scale for my project?
When to choose em vs. rem units
Here are some recommendations for their use, but always consider the specific needs and peculiarities of your project.
When to use em
Component-specific sizing: Use em units when you want the sizing of an element to be relative to its parent element. This is useful for components that need to scale together within a section.
Example: Buttons inside a card that should resize proportionally with the card's text.
Nested elements: If you have nested elements and you want each level to inherit scaling properties from its parent, em is the right choice. This allows for intuitive scaling within modular components.
Example: List items inside a menu that should scale together with the menu’s font size.
Typography hierarchy: For maintaining a clear typographic hierarchy within a specific section, use em. This ensures that headers, subheaders, and paragraphs scale relative to the section they belong to.
Example: In a blog post section, use em for headings and paragraphs to maintain consistent scaling.
When to use rem
Global sizing: Use rem units for elements that should maintain consistent sizing across the entire website, regardless of their parent elements. This is ideal for global typography settings.
Example: Base font size for body text, headers, and other primary text elements.
Consistent layouts: For maintaining uniformity in spacing, padding, and margin across different components, rem is ideal. This ensures consistent layout proportions across the site.
Example: Setting consistent padding and margin for buttons, forms, and containers.
Responsive design: Rem units are perfect for responsive design because they scale uniformly with the root font size. Adjusting the root font size will proportionally scale all elements using rem.
Example: Adjusting the <html> font size for different screen sizes to achieve responsive typography.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
- What is the scaling context? Do I need elements to scale relative to their parent (em) or consistently across the entire site (rem)?
- What is the complexity of the element hierarchy? Will deeply nested elements benefit from em's relative scaling, or will it lead to unpredictable sizes?
- Is responsive design a priority? Will rem units simplify adjustments for different screen sizes?
- Do I need fine-grained control over specific components? Will using em allow me to better manage the scaling of individual components within their parent context?
- Have I set a clear base font size? Is the root font size defined correctly to ensure rem units scale as intended?
- Am I maintaining a logical hierarchy? Are em units being used in a way that preserves the intended typographic hierarchy within sections?
- Am I avoiding over-nesting with em units? Is the use of em units leading to compounded scaling effects that are difficult to manage?
- Have I tested my design across different devices and screen sizes?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
- Not setting a consistent base font size for the root element.
- Using em units in deeply nested elements without considering compounded scaling. Be mindful of how em units will scale with each level of nesting. Use rem units for consistent sizing and switch to em only when local scaling is necessary.
- Mixing em and rem units haphazardly within the same context. Choose a consistent strategy for when to use each unit. For example, use rem for global typography and layout, and em for component-specific adjustments.
- Failing to adjust root font size for different screen sizes, which can affect rem-based layouts.
- Assuming that em and rem units will look the same across all devices without testing. Always test your design on multiple devices and screen sizes to ensure that the typography and layout scale correctly and remain accessible.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
What Is a Type Scale? by Supercharge Design