People with low vision often need to resize text to make it more easily readable. Understanding the units px, em, and rem is essential for creating websites that accommodate these needs. In this post, we'll explore the differences between these units and how they impact web accessibility.
Pixel
Pixels are a unit of measurement based on set sizing. A pixel, short for 'picture element,' is the building block of digital displays and images. When referring to a display’s resolution, numbers like 1920 x 1080 represent the number of pixels it can show horizontally and vertically. Pixels offer browser compatibility, making them a convenient choice for web development.
Pixels, while precise, lack flexibility. The fixed size prevents users from easily adjusting the default browser text. For example, if a user needs larger text to read comfortably, pixels can’t automatically scale to meet this need, unlike ems and rems, which scale dynamically.
EM
An em is a unit of measure that indicates the size of text or other elements (like buttons) relative to the nearest parent element font size. Ems create consistent proportions when sizing components. For example, if the parent element's font size, say the body text, is 16 pixels, then 1em = 16 pixels. So, if you want your headings to be twice the size of your body text, you set the heading font size to 2em, which equals 32px.
Em units can cause unexpected layout shifts due to their relative nature. When used within nested elements, the font size can compound, leading to unintended changes in appearance. For instance, if a parent element has a font size of 2em and a child element has a font size of 1.5em, the child's font size will be 1.5 times the parent's, resulting in a font size of 48 pixels (16 x 2 x 1.5).
REM
A rem is similar to an em, except a rem’s size is relative to the root (hence the name "root em," aka rem) element's font size, typically the <html> element. Compounding is not a concern since they are relative to the root element.
Em units offer flexibility for setting font sizes relative to their direct parent elements, but rem units provide a global reference point for easy, consistent sizing across the entire website.
The Accessibility of it All
SC 1.4.4: Resize Text (Level AA) states, "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality." This means your text needs to be "fluid" or flexible.
Users can change the text size on a webpage in several ways without using assistive technology:
- Use the browser’s zoom function, either by using the drop-down menu
or using keyboard shortcuts, such as command + on a Mac and ctrl + on Windows.
- Users can also go to their browser settings and change the default font size.
Chrome: In the upper left corner of your display, click Chrome > Settings > Appearance > Font size
When a px setting regulates font size, there is no flexibility to allow a user to change the font size. That would violate SC 1.4.4: Resize Text. That doesn’t mean px have no place in web design. Px are great if you need fixed-sized elements that don’t need to change, such as navigation icons like a hamburger menu or decorative elements like a border or section divider.
By adopting accessible coding practices, such as using ems or rems instead of px, when appropriate, you can create accessible, scalable designs responsive to various screen sizes and user preferences.
