Web development changes at an alarming rate, and as a leading web design agency, we try to stay on top of the latest trends and topics that affect how we design and build websites.
One of the hottest debates over the last few years is the choice of CSS units for sizing elements. Should you stick to PX, go for EM, or embrace the flexibility of REM? Understanding the subtle differences of each unit is crucial in building responsive, accessible, and user-friendly websites.
In this post, we’ll delve into the merits and limitations of PX, EM and REM in CSS, shedding light on best practices for their use and what we recommend using.
This Article Will Cover:
Pixels
Pixels, often seen as “px”, represent the underlying unit of measurement in CSS, directly correlating to the pixel count on a screen. This correlation offers web designers precise control over the layout and appearance of web elements so that they appear exactly as designed on devices with a specific resolution.
Despite how precise pixels are, their rigidity poses challenges for responsive and adaptive web design. As websites are viewed on so many types of devices today, from high-resolution monitors to compact mobile screens, the fixed nature of pixels can hinder the seamless breakdown of a website layout across different viewport sizes.
Also, the reliance on pixels as a unit of measurement has notable limitations with user accessibility. Individuals with visual impairments, for example, frequently adjust browser settings to increase text size for better readability. Dimensions that use pixels won’t account for these adjustments, potentially leading to a poor user experience. Elements sized in pixels may not scale properly, and that will prevent those users who rely on modified text sizes from having a comfortable browsing experience. This accessibility challenge highlights the importance of considering alternative units that offer greater flexibility.
Accessibility
Acknowledging the strengths and limitations of pixels encourages a more inclusive and adaptable design strategy, prioritising both aesthetic integrity and user-centric adaptability.
Treating end users with respect involves avoiding the use of pixel-based font sizes, element sizes, and spacing. It’s important to note that most web browsers allow users to adjust their default font size to a size other than 16px. Therefore, all font sizes should scale based on the user’s chosen font size, such as 20px. Unfortunately, when a website sets font sizes explicitly in pixels, headings remain fixed, regardless of the user’s preference. While this might appeal to a web design agency like ours, which is design led, it neglects the needs of the user, which should always be the primary consideration when building websites.
Users with visual impairments may need to increase text size for readability. If a website’s font size is set in pixels, users who increase their default browser font size may not see the expected adjustments, making the content hard or impossible to read.
Example:
html {
font-size: 16px;
}
h1 {
font-size: 62px; // Rendered at 62px, regardless of root element size (16px)
}
User Experience
Different users have different preferences and requirements. Some may find smaller fonts more comfortable to read, while others may prefer larger text. Allowing the text to scale according to the user’s settings ensures a better and more personalized user experience.
Responsiveness
A design that adjusts to user preferences also fits better with responsive design principles. Responsive design isn’t just about adjusting layout to screen sizes; it’s also about adjusting text sizes for better readability on different devices.
Alternative Units for Better Scalability
We’ll cover alternative units in more detail below, but ditching Pixels for other units will create better scalability for your users:
- EM and REM: These are relative units. EM is relative to the font size of its direct or nearest parent, while REM is relative to the root html element. This makes it easier to adjust site-wide font sizes by changing the root element’s font size.
- Viewport units (VW/VH): These units are relative to the viewport size. They can be used to make font sizes responsive without media queries, though they should be used judiciously as too much dependency on viewport size can lead to extreme sizes on very small or large screens.
- Percentage (%): Similarly to
emandrem, percentage is a relative unit. Setting font sizes in percentages allows the size to scale based on a parent element’s font size.
Implementing a Respectful Design
When developing or designing a website, it’s essential to:
- Test the site with different font sizes and screen resolutions.
- Use relative units instead of absolute units for font sizes, spacing, and layout dimensions.
- Incorporate accessibility features and test them with screen readers and other accessibility tools.
- Always keep the end-user in mind, acknowledging that a diverse audience with different needs and preferences will use a website.
Adopting these practices ensures not only a more accessible and user-friendly website but also demonstrates respect for the diversity of users on the internet, promoting a more inclusive web experience.
REMs
REMs is an abbreviation for “Root EMs”, which are a unit of measurement in CSS that get their value from the font-size of the root element, which is the `<html>` element.
In most browsers, the default font size for the root element is 16 pixels. Luckily, calculating REMs to pixels is straightforward for a web design agency like ours or yours to figure out. For instance, a value of 1rem translates directly to 16 pixels under default conditions. This uniform scalability of REMs sets them apart, as it helps to create a consistent scaling of text and layouts across different devices and user preferences.
Adjusting the root element’s font-size, either through CSS or browser settings, allows for all elements defined in REMs to scale dynamically. This feature is particularly helpful in responsive web design and for enhancing accessibility. It ensures that web content is more user-friendly and adapts to the preferences of users who may need larger text sizes or are using devices with varying screen sizes and resolutions. The scalability of REMs fosters an inclusive web environment, creating a better experience for all audiences.
Also, using REMs simplifies the responsiveness of typography and spacing within a website. Since REMs are tied to the root font size, adjustments for different screen sizes are made by altering just a single value. This helps maintain design consistency while allowing flexibility across various viewing contexts.
However, while REMs offer a versatile solution for many design challenges, you must be mindful of their relationship with the root font-size. Designers must consider the base font size’s impact on the overall design to benefit from using REMs effectively and ensure that web pages view as they were intended across different browsers and devices.
How To Calculate PX from REM
Calculating the pixel (PX) value from REM units involves some simple math which hinges on the base font-size of the document, typically established on the `<html>` element.
Given that the default base font-size for most browsers stands at 16 pixels, converting REM to pixels becomes a straightforward process. To carry out this conversion, one would multiply the REM value by the base font-size in pixels.
- If you are working with a design that specifies a margin of 2rem, you would perform the calculation as follows for the pixel value: 2 (the REM value) multiplied by 16 (the base font-size in pixels), resulting in 32 pixels (2rem * 16px = 32px).
- The reverse is also easy to figure out. If you want to find out the REM size of something but it’s set in PX, you would divide the pixel value (32) by the root pixels value (16), resulting in 2 rem (32px / 16px = 2rem).
This conversion method ensures that designers and developers can maintain a scale across their designs, especially when the intention is to create consistency between the textual elements and layout spacing. It is important, however, to remain aware of the root font-size setting in your CSS or the user’s browser, as any alterations here will directly affect the pixel equivalent of REM units used throughout your design. Adjustments to the root font-size become particularly relevant when striving for accessibility, as changes here can dynamically scale elements across a site, enhancing readability and user experience for those with visual impairments.
To accurately employ these calculations in real-world scenarios, you’ll need to consider the context in which these units are being applied, bearing in mind that the objective is to foster designs that are both adaptable and accessible without sacrificing beauty.
Example 1:
html {
font-size: 16px;
}
h1 {
font-size: 3.875rem; // Rendered at 62px calculated from the root element size (16px)
}
Example 2:
html {
font-size: 20px;
}
h1 {
font-size: 3.875rem; // Rendered at 77.5px calculated from the root element size (20px)
}
What About EMs?
EM units are a versatile tool in CSS, offering design control relative to the font-size of an element’s parent. This characteristic is particularly useful in scenarios where a component’s dimensions need to adjust in proportion to its surrounding elements.
The relative nature of EMs allows for the dynamic scaling of text and other elements, which creates a more fluid web design which can enhance the user experience across different devices and resolutions.
One of the primary advantages of using EMs is their capacity to create a modular design. Designers can build content blocks that maintain proportions and spacing relative to their immediate parent, wherever they are placed on the page. This can simplify the development of reusable components that behave predictably in various places across a website.
However, the flexibility of EMs comes with its own set of challenges. The dependency on the parent element’s font-size means that the determined size of an element can vary, introducing a level of unpredictability. When nesting elements, each layer of EM-based sizing impacts the previous, which can lead to exponential scaling. This requires a meticulous approach to design and development, with keen attention to the structure of the DOM and the cascading effects of EM-based measurements.
In practice, utilising EMs effectively demands a thoughtful consideration of their impact on the design system as a whole. Their relative sizing mechanism, while powerful, requires careful consideration to avoid unintentional results. By carefully using EMs in specific use cases where their benefits outweigh the complexities, designers can achieve a level of responsive web design that enhances the overall user experience.
Example:
html {
font-size: 16px;
}
h1 {
font-size: 3.875em; // Rendered at 62px calculated from the parent element size (16px)
}
div {
font-size: 20px;
}
div h1 {
font-size: 3.875em; // Rendered at 77.5px calculated from the parent element size (20px)
}
What About Media Queries?
Media queries are a cornerstone of responsive design. They help web developers tailor styles to various devices, such as screen size and resolution.
Media queries benefit significantly when using EMs and REMs, offering a more fluid approach across a broad spectrum of devices. When media queries are defined using REMs, they inherit a level of flexibility by aligning with the base font-size adjustments made by the user or the device’s default settings, enhancing accessibility and maintaining consistency in the user experience.
- Utilising a media query like
@media (min-width: 48em)enables the application of specific styles on devices with a screen width greater than 768 pixels, assuming a base font-size of 16 pixels. This approach is particularly useful for designs that need to scale up from a mobile-first approach. - While a media query such as
@media (max-width: 60rem)is aimed at devices with a screen width under 960 pixels. This setup is helpful for implementing styles that ensure content remains readable and accessible on smaller screens, without horizontal scrolling.
Example:
@media (min-width: 48.0625em) {
div {
background-color: red; // Only applies until 769px
}
}
@media (max-width: 48em) {
div {
background-color: blue; // Only applies from 768px
}
}
Including EMs in media queries presents a slightly different advantage, especially when aiming for component-specific responsiveness. As EMs are influenced by the parent element’s font-size, using them in media queries allows for adjustments closely tied to the text size and layout of specific content sections. This offers more granular control over the responsive behaviour of individual blocks.
The correct application of REMs and EMs within media queries provides a robust framework for achieving a responsive, accessible, and user-centric web design.
So What’s the Solution?
Understanding or deciding the best choice between PX, EM and REM will depend on the specific needs of your website. For the lion’s share of typography and layout spacing, REMs stand out as the favoured unit. Their ability to scale in unison with the root element’s font-size empowers developers to engineer sites that are inherently more accessible and fluid across devices. This adaptability is crucial in fostering a web environment that is considerate of varying user preferences and screen dimensions.
On the flip side, EMs exhibit unparalleled merit when applied to component-level design. Their relative sizing to the parent element offers a unique advantage, especially in scenarios that require components to scale in harmony within their immediate context. This feature is indispensable for creating modular elements that maintain consistent proportions and spacing, regardless of their placement within a page.
On the other hand, pixels retain a niche for scenarios demanding unyielding precision. Their application is most apt in crafting elements where exact dimensions are paramount, and variance is not an option. Although less malleable, pixels provide a level of control and predictability that is sometimes necessary for specific design elements.
Navigating each of these units demands a detailed understanding of their respective strengths and constraints. Embracing REMs for broader layout and font sizing, employing EMs for context-sensitive scaling within components, and reserving pixels for static, precision-based elements forms a balanced approach. This methodology will enable you to build responsive, accessible, and aesthetically pleasing web experiences while circumventing the pitfalls unique to each unit.
Drawbacks
Each unit of measurement — PX, EM and — brings its own challenges that require careful consideration in web development projects.
REM units, whilst offering scalability and consistency across different devices, can lead to extensive alterations across a website with a single change in the root element’s font size. This global impact requires caution, especially when the objective is to maintain uniformity in design.
EM units, prized for their relative sizing capability, can complicate designs when not managed properly. The compounding effect of EMs, where sizes increase with nested elements, demands a strategic oversight to avoid elements scaling out of proportion. This requires a detailed understanding of the document structure and a disciplined application of EMs to ensure that components retain their intended appearance and functionality.
Pixels, on the other hand, offer precision but at the cost of flexibility and adaptability. Their fixed nature can significantly impair the accessibility and responsiveness of a website, particularly in a digital landscape characterised by a vast array of devices with varying screen sizes and resolutions. The use of pixels may lead to a rigid design that fails to accommodate user preferences for text size and screen adjustments, thus affecting the overall user experience.
Key Takeaways
In summary, the choice of CSS units demands a balanced approach, considering the specific requirements of the project, the target audience, and the device ecosystem. Understanding the limitations and advantages of PX, EM and REM units enables a web design agency like ours to make informed decisions that enhance the usability, accessibility, and aesthetic appeal of web pages while navigating each unit’s potential pitfalls.
Just remember who you’re building websites for.
