When I started in web development, I measured all my HTML elements with either px or %.
They were the only units IE 6 supported. – Ok, technically not true, but it felt true at the time.
These days, we are swimming in an awesome array of CSS length units. From old favorites like px and %, to modern standards like vw, vh, rem, and em, and on to awesome new unit standards like ch, ex, lh, and fr.
As a result of this unit explosion, it can feel a bit overwhelming to determine the correct unit to use in each case. This is especially true when all you have to work with is 1-3 design mockups at fix viewports sizes (always measured in px!),
You may even feel a little guilty whenever you find yourself writing px in your CSS files. – Or a thrill, for committing a minor blasphemy against the Responsive Gods.
But the pixel is still relevant in an age when it seems like even the days are measured in rem. This post will provide some key questions to ask to determine if px is right for the occasion.
What's in a Pixel, anyway?
Before we talk about when to use it, let's quickly go over what a CSS pixel is and isn't. And what sets the px apart from the rest of the units.
The CSS pixel is nominally a length unit defined as 1/96th of an inch on a low-resolution display. In actuality, when working with a wide range of device screens displaying CSS today, we have no absolute physical definition of a pixel.
For our purposes, we only need to treat it as the canonical unit that other units ultimately resolve into. I.e. for compatible length units like em, vw, and rem are all ultimately translated into px before rendered.
This means pixels are uniquely suited for defining absolute length that you should not change even as viewport, font size, line height, or container sizes change around them.
So what are some good occasions to define an absolute length?
Visually Distinctive
A very popular use of pixels is that of a single-pixel border. The intent here is to generate just enough visual separation without drawing too much attention to the border size itself.
Similarly, drop-shadow thickness is a good use-case for pixel values, such as those underneath popups and modals. If a drop shadow creates the effect of depth on an element, then it does not necessarily make sense for that visual distance to change as the page's viewport/page font size changes.
Though not as absolute as the other two, the border-radius property is another good candidate for pixel. This is especially true if the purpose of the element is not to render some text-based content.
The first key question to ask when using pixels in this context is:
"Am I creating a context-independent visual distinction?"
Absolutely Sized
Sometimes, an element simply needs to be a particular size. This most frequently happens when working with media objects.
Using pixel-based sizing to style images has been a tried and true technique since the early days of CSS. And the most supported aspect-ratio property can prevent an entire class of distortions, blowing a 50px by 50px company logo up to fill half the screen will still cause a blurry mess.
The same logic also applies to embedded videos, canvas elements, and SVG files.
Here the second key question to ask is:
"Am I sizing a context-independent media object?".
Extreme Limits
The mention of sizing SVG elements with px in the previous section may have set off red flags in your head. Aren't SVGs elements completely scalable and look great at every size? Well, the answer is 'technically true but..'. Here are two screenshots of the same SVG at two very different resolutions:
Sure, we are able to scale the same file at a very wide range of viewport sizes, but the image is clearly intended to be viewed at a resolution closer to the second than the first.
Take another example, fluid typography has been gaining popularity as of late. But they too suffer from degradation at extreme sizes. It is generally considered best practice to clamp your fluid font size, and pixels are a good candidate for max/min font sizes.
Extreme CSS properties, such as max-height and min-width are also good candidates for pixel length values. Max width of a page's content is frequently measured in pixels, generally over rem or em as they provide better safeguards against extreme font sizes.
The third key question here is:
"Is this a safeguard value to ensure design integrity regardless of the current font size?".
To sum up, CSS pixel is absolute by its nature and should be reserved for lengths that need to stay constant despite dynamic viewport and font sizes. They should be used with care, but not avoided altogether. So next time you find yourself reaching itching to use px, make sure your answer is yes to one of the three key questions below:
"Am I creating a context-independent visual distinction?"
"Am I sizing a context-independent media object?"
"Is this a safeguard value to ensure design integrity regardless of the current font size?"
Thanks for reading! If you find this post helpful, please share it with others. You may also be interested in my guide on creating style APIs with CSS custom properties.
Happy Coding!
Top comments (0)