Is "px" really so bad 🧐

Austing Gil wrote, PX or REM in CSS? Just Use REM.

Ashlee Boyer just wrote, Why You Should Use px Units for margin, padding, & Other Spacing Techniques.

Keith Grant has views on px too: Re-evaluating px vs em in Media Queries.

Everyone has a view on px and it's confusing.

It seems that browsers can handle px just fine.

How do you handle them?

Do you use px? Do you avoid px?

Comments

[Timothy Foster]

General rules of thumb I follow:

• Font size: use rem, since this respects the reader's preferred font size and px does not.
• Reusable elements: Such as buttons, use em so the whole element scales depending on the context's font size
• Spacing: Sometimes px, sometimes rem, depending on what I'm doing. Sometimes if you use rem and someone's configured font size is large, it results in too much spacing and therefore a reduction in readability. But some spacing benefits from scaling, such as the space between paragraphs.

The principle to follow is maximize readability, regardless of zoom or preferred font size. A resource I usually share that explains this: The Surprising Truth About Pixels and Accessibility.

Actually, lately I've started experimenting using pc instead of px since, when 1rem = 16px, then 1rem = 1pc. From the spec this seems exactly equivalent so I hope it's fine, lol.

[𒎏Wii 🏳️‍⚧️]

The downside of using rem as a default is that you can't add up font sizes, whereas with em you do. Say you have h2 { font-size: 1.6em } and then .important { font-size: 1.2em }, putting an <h2> inside a <section class="important"> will still maintain the proportion of header size to body size. With rem you don't get that, which can sometimes make life more difficult. Embrace the cascade 👍

[Luke Inglis]

I know I'm a little late to the discussion here but it's great that you highlight this.

This is one of the prime use cases of using em instead of rem. However, I don't think it's an argument against using rem as the default. Both em and rem are proportional to something. 'rem by default' just means proportional to the root element font size.

Using your example of a header we might have the following 'component'.

<article>
  <h3>When to use em and when to use rem</h3>
  <div>
    <p>Paragraph discussing the em unit</p>
    <p>Another paragraph discussing the rem unit.</p>
  </div>
</article>

<article class="important">
  <h3>When to use em and when to use rem</h3>
  <div>
    <p>Paragraph discussing the em unit</p>
    <p>Another paragraph discussing the rem unit.</p>
  </div>
</article>

And the styles here. N.B. that .important uses rem and the header uses em. This mean that the article font size is proportional to whatever the default font-size. (In this case it's equal.) While an h3 contained by an article is 50% bigger than whatever the article font size is.

html {
  font-size: 12px;
}

article {
  font-size: 1rem;
}

article > h3 {
  font-size: 1.5em;
}

.important {
  font-size: 1.5rem;
}

[𒎏Wii 🏳️‍⚧️]

Yea, the point I'd make is that it's a better approach to assume you want em and only use rem when you actually want to ignore the surrounding context and very specifically use the root font size.

In most cases it's safe to assume that something .important should probably be important in relation to whatever surrounds it, not to the document root. If I put a <span class="important">important</span> inside a <h2>, I probably want to mark that section of text as important in relation to the rest of the text of the heading (although I'd probably use <strong> for that instead), so I would want that text at 1.5em (probably less though), so bigger than the surrounding, not at 1.5rem, which might actually make the "important" section smaller than the surrounding content.

So yea, rem definitely has its place, but the no-brain option really should be em, and rem should be used when you specifically want to fix something to a global length rather than dependent on context.

[Ben Sinclair]

The only time I tend to touch px is for doing things like setting border-width: 1px where I don't want it to scale with display size.

[𒎏Wii 🏳️‍⚧️]

There is almost no reason why you'd ever want to use px unless you very specifically want something to be independent of font size. Maybe for line-widths in certain cases, but for anything related to spacing, em is just better in almost all situations.

[Nicholas Stimpson]

px gained something of a bad reputation from the behaviour of Internet Explorer 6, which dominated the browser market of its day, and didn't scale px dimensions well making for poor accessibility. But those days have long passed. Yes, for modern browsers, px is fine.

[𒎏Wii 🏳️‍⚧️]

It might be fine to use when its behaviour is actually desired, but how many situations are there where you really want a width to be completely independent from the size of the text?

Most stuff, like borders or gaps or whatnot, you usually want to scale alongside the text.

[Pxlmastr]

I always seem to use px for stuff like header size and length of a widget, but i try to avoid it in fonts.

[Kaamkiya]

I use em usually, but I also love to use the Canvas API, for which I use px.

[Massimo Artizzu]

I usually use px when it comes to borders/outlines, but it's usually in conjunction with something like max(1px, 0.1em), so that we have at least a border that's not hidden by sub-pixel rendering.

Other usages include: sizing images/canvases/svgs, computed absolute sizes and positions. Essentially nothing else.

[Adaptive Shield Matrix]

If you use Tailwind, then you do not have to choose :)
Tailwind has done the choice for you with their own custom unit of 1 = 4px.

[Massimo Artizzu]

That's not correct: one Tailwind "unit" is 0.25rem. Which is usually equivalent to 4px, but not always.

The fact that Tailwind users tend to mix those concepts so often is one of the downsides of Tailwind. That, and actually restricting length measures to only rems, when there are many more that fit.

Yes, there are ways to use them. But it's such a bother that none cares.

[Christian Fried]

I didn't think I'd get any response really! Thank you all!!

[Tobi]

+1 for border with