Pixels in CSS should be avoided and I'll explain why

In web development, the choice of units of measurement is crucial to ensure the quality and flexibility of a site or application. Although pixels (px) have long been used as the standard unit of measurement, today it is better to avoid them in favor of more flexible alternatives such as relative units (em, rem, %, vw, vh) or modern units such as ch and vmin. In this article we will explore why the use of pixels should be limited, including practical examples and explanations for each unit of measurement.

🔗 Do you like Techelopment? Check out the site for all the details!

1. Poor Scalability Across Devices

Pixels are an absolute unit, which means they do not automatically scale to screen sizes or resolutions. With the increasing variety of devices available, a pixel-based design is likely to be suboptimal.

Practical example: Suppose we have a container with a width defined in pixels:

.container {
  width: 300px;
}

On a small screen, such as a smartphone, this container may be too large. Using a percentage % instead:

.container {
  width: 50%;
}

% represents a percentage of the size of the parent container. In the above case, the container will have a width equal to 50% of the width of its parent element, automatically adapting to the available dimensions.

2. Reduced accessibility

Defining text size in pixels can prevent users from resizing characters, limiting readability.

Practical example: Defining font-size in pixels:

p {
  font-size: 16px;
}

Users will not be able to increase or decrease text using browser settings. Instead, using rem:

p {
  font-size: 1rem;
}

rem is based on the font-size of the root html element. For example, if the html element has a font-size of 16px, then 1rem is equal to 16px. This makes the design scalable, because when you change the font-size of html, all the sizes defined in rem are updated accordingly.

html {
  font-size: 18px; /* By changing this value, all the text adapts */
}

p {
  font-size: 1rem; /* Equal to 18px in this case */
}

3. Pixel Density (DPI) Issues

Modern devices, such as smartphones with high-density (retina) displays, display pixels differently than traditional monitors. This can make pixel-defined elements too small or difficult to read.

Practical example: A button defined in pixels:

button {
  width: 100px;
  height: 30px;
}

This may look tiny on a high pixel density device, better to use em:

button {
  width: 10em;
  height: 3em;
}

em is a relative unit based on the font size of the parent element. If the font-size of the parent element is 16px, then 1em is equal to 16px. Using em, the button size dynamically adapts to the context in which it is placed.

Example context:

.parent {
  font-size: 20px;
}

button {
  width: 10em; /* Equal to 200px (20px * 10) */
  height: 3em; /* Equal to 60px (20px * 3) */
}

4. Lack of Fluidity in Responsive Layouts

A responsive layout must adapt to all screen sizes. Using pixels to define widths, heights, or margins can create a rigid design.

A practical example: A fixed-width layout:

.container {
  width: 800px;
}

It will be too wide on small screens. In these cases you should use units based on viewport (the visible browser window) like vw:

.container {
  width: 80vw; /* 80% of the viewport width */
}

vw represents 1% of the width of the viewport (the visible browser window). For example, if the viewport width is 1000px, 1vw equals 10px. This makes the elements proportionate to the width of the screen.

5. Better support for adaptive and fluid designs

Relative units allow you to maintain consistent proportions and create layouts that adapt dynamically.

A practical example: Defining text sizes in pixels can make your design inconsistent:

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

If the base font-size changes, these dimensions remain fixed. Using rem instead:

h1 {
  font-size: 1.5rem; /* 1.5 times the size of the base font */
}

p {
  font-size: 1rem; /* Equal to the base font size */
}

By using relative units like rem, the proportions remain consistent even when you change the font-size of the html element.

Combined examples of flexible units

For a fully adaptive layout, we can combine relative and viewport-based units.

Practical example: Let's define a container and some text with a fluid design:

html {
  font-size: 16px; /* Base font */
}

.container {
  width: 90%;
  max-width: 1200px;
  padding: 2rem;
}

h1 {
  font-size: 2rem; /* Twice the base font */
}

p {
  font-size: 1rem;
  line-height: 1.5; /* Improves readability */
}

Explanation of the units used:

• %: Makes the layout fluid by adapting to the width of the parent container.
• rem: Allows to scale proportionally to the size of the base font.
• line-height: Defined as a relative number (1.5), it helps to maintain a readable line spacing regardless of the font-size.

Keep in mind

Avoiding pixels in CSS stylesheets improves accessibility, scalability, and design flexibility. Switching to relative or viewport-based units helps create fluid user experiences that are suitable for a wide range of devices. I hope that with the practical examples and explanations provided, it will be easier for you to understand how to leverage these units to improve your web projects.

---

Follow me #techelopment

Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment