While it wouldn’t be accurate to say that using pixels is inherently “bad” …
There are certain aspects of pixels that might make them less suitable for certain use cases, especially in the context of modern web design.
Lack of Scalability and Responsiveness
Pixels are fixed units of measurement that don’t adjust or scale based on user settings or screen sizes.
In an era where web content is consumed on a variety of devices with different screen sizes and resolutions, from small mobile phones to large desktop monitors, this can be problematic.
For instance, a font size of 16px will always be 16 pixels tall, regardless of whether it’s being viewed on a mobile device or a 4K monitor. This can lead to legibility issues on high-resolution displays or for users with visual impairments who may need larger text.
No Relative Sizing
When you specify measurements in pixels, those sizes are absolute, and they don’t adjust relative to other elements. This makes building modular, scalable designs more challenging.
In contrast, relative units like EM and REM adjust based on other factors (either the font size of the parent element or the root element, respectively), which can make your design more adaptive and flexible. For example, increasing the root font size will proportionally increase all sizes defined in REMs, something that isn’t possible with pixels.
Pixels are absolute units and don’t respect the default font size of the browser. Many users will adjust their browser’s default font size for accessibility reasons, and using pixels for font sizes can lead to text that is too small to read comfortably.
In contrast, using relative units such as REMs will respect the user’s browser settings and scale appropriately, leading to a more accessible design.