DEV Community

Cover image for πŸ›‘ Stop using pixels in CSS
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

πŸ›‘ Stop using pixels in CSS

I may be the worst advocate for actually doing this, but let me try and be a better person from now on.

And please, you too!

Let's all get away from pixels

But, don't take just my word for it:

Why no pixels?

From back in the days, we started using pixels for web development, and for a long time this was good enough.

So what makes them so bad you ask?

  • A pixel in font size is not actually a pixel on the screen
  • Accessibility becomes better if we as developers don't define what the "default" font-size must be
  • There are nowadays pixels densities (retina etc)

Ok, then what?

Well, we can choose between em and rem for font-size.
CSS3 came with rem which is a relative size to the root html element and is supported by 98,22% of the browsers!

So the cool part about this is people can have their default browser setting set to something else, then the defined 16px's, and we will just scale for them.

Side note: REM is also a cool band!

Converting pixels to rem

To calculate the pixels to rem we have to understand that the default font size for an HTML document is 16 pixels...

We as developers, should never update that. It's something the user can do.

So talking that in account it means that 1rem = 16px, and 2rem = 32px.

To make it super easy. I made this calculator for you guys:

Let us please all be aware this is the future πŸ›Έ.

Browser Support

The cursor is pretty well supported! The function has been around, some mobile browsers don't go about it, but you must see this as an "extra".

CSS REM support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (13)

Collapse
 
matttunney profile image
Matt Tunney

I mentioned this elsewhere but...

If you reset the HTML font size to 62.5%, you can then declare REM’s in values that seem much more familiar.

 html {
    font-size:  62.5%; /* equal to 10px */
}

body {
    font-size: 1.6rem;  /* equal to 16px */
}

Less mucking about trying to remember any ratios.

In some cases it also makes setting unitless line heights easier to under stand I relation to the declared font-size

 html {
    font-size:  62.5%; /* equal to 10px */
}

body {
    font-size: 1.6rem;  /* equal to 16px */
    line-height: 1.5; /* equal to 24px */
}

Collapse
 
dailydevtips1 profile image
Chris Bongers

That is actually a very nice way to do it!

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin

Am I allowed to use pixels in media queries? πŸ˜‰

Collapse
 
dailydevtips1 profile image
Chris Bongers

I still use them in Media Queries and for Borders,
I do read a lot of changing those to em's but pixels make a bit more sense to me there?

Collapse
 
xowap profile image
RΓ©my πŸ€–

I don't get the point. If your media queries are in pixels because the screen has pixels and the designs were made in pixels, what's the point of converting? Browsers can zoom, desktops have system-wide magnification settings. Is it still relevant in 2020?

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

It is. Browsers have the option to set a default font size (without having to increase the page zoom). Out of the box it is 16px in most browsers, but users can override it to any value. If developers code with px values, the user-set value does not apply and the user experience is impacted.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Exactly and some mobile devices/screen readers choose to show a bigger font by default, hence where our pixels would not be relevant.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Oh lord... That Twitter thread has so much misinformation.

  1. There is no reason to exclusively use rem over em. In fact, what you usually want is em because an element's padding and margins are 100% dependent on that element's own size. Elements with larger text will need to scale their spacing accordingly. Good luck doing that with rem if you ever need to change an element's font size.

  2. em allows you to style local regions of a page with greater ease. rem always resets you back to the root font size. This is annoying (see #1).

  3. Both em and rem can be used for responsive typography. I saw this point come up a lot, where people argue that rem is better. Noβ€”no it's not. There's no difference. As long as you use ems consistently from top to bottom, your UI will still scale, just as it would with rem.

  4. rem and em both have their uses. There's no reason to choose one over the other exclusively, though I find myself using em far more often (#1-3).

Collapse
 
dailydevtips1 profile image
Chris Bongers

I don't think that's the point, it's more about using rem or em, I personally use rem, but em would work just as well.

I do thank you for this detailed explanation, wasn't aware of these points in rem vs em.

So is there any case that you still use pixels?
(Media-queries/borders?)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Yup! I still use pixels for borders and border radii. I also use them for media queries, though it really depends on where the breakpoint falls. If it falls within a screen width where my font is still scaling up/down responsively between two extremes that I've set up, then I'll use pixels to be more precise.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Oke makes sense yes!

 
dailydevtips1 profile image
Chris Bongers

Oke, so there are accessibility extensions that will do it differently.
And another example: phone's will use a larger font by default.

Those are just some examples. The only reason for me to stick to px would be because I'm "used" to it.

 
dailydevtips1 profile image
Chris Bongers

For me now they make sense, like sad I'm reading about changing to EM, but not that far yet.

Pixels seem to make sense since a device contains certain pixels, that doesn't change?

But perhaps you have a great article on doing it otherwise? 🀟