Why do web developers use the px unit so blindly? It is just a bad habit? Is it because of a lack of knowledge of other units? Maybe because the design teams rely on px and pt for their mocks? It is unclear why the pixel is the current go-to unit for most teams.

Maybe, the main reason is that it looks simple and convenient. Intuitively, we think we understand this unit because it looks as though it is mapping our pixel screen.

The px unit is something that gets you started very easily, but it turns into a problem later down the road. In this article, I will expose the top three reasons to avoid the pixel unit. We will discuss the problems with its usage and some possible solutions.

1. They Are Just Optical Reference Units

Pixel values are no longer based on a hardware pixel. It just wouldn’t work and will look very different for many screens and resolutions. They are instead based on an optical reference unit. So the part that we found more intuitive about that unit is no longer there.

Hardware is changing by the day and pixel densities are growing. We can’t rely on the assumption that devices have a pixel density of 96dpi. They are no longer a stable point of reference.

2. They Are Absolute Values

Looking at the problem above, why is it happening? Why can’t our layout reach pixel perfection? Because the pixel unit is an absolute one. That means that it is not going to adapt to our browser’s pixel ratio/resolution/size/etc.

3. Accessibility: They Don’t Adapt to the User’s Default Font Size

Accessibility is a forgotten subject that we all should be paying more attention to. How does the usage of pixel units impact accessibility?

Browsers let you configure your default base font-size. By default, it is set to 16px, but it can be easily changed. That is very useful for people with visual impairment. The browser then gives us a hint about the preferred user’s font-size by setting the base font-size to that value.

However, if developers use absolute pixel values, that information will be ignored. The base font-size won’t have any impact on our application layout. The font size will be the same for all users. That is a bad thing since you are ignoring your user’s preferences and hurting your page’s accessibility.

#web-development #css #javascript #pixel