Tim Pietrusky

I love (r)emmmmmm because px suck

Why do I hate px?

  1. not responsive
  2. not scalable

What simurai thinks about px?

Well, by sneaking a Trojan horse into your components and use it to control all the size related CSS properties.

What Trojan horse? Good ol’ font-size, hooked up to EM based units.

Read the article: Sizing (Web) components

Lyza Gardner is using em and media-queries

As I zoom in, that is, make the text larger in my browser, I’m no longer at a 14pt/16px baseline. 100%/1em in my world is now a different number, maybe 18pt, maybe 32px.

Read the article: The EMs have it: Proportional Media Queries FTW!

What Jonathan Snook thinks about px?

There are two main techniques that are extolled:
  • Size with px
  • Size with em
Let's review these two approaches before I reveal the magical third.

Read the article: Font sizing with rem

Lucas Bonomi writes about em vs px

You all probably knows those good ol’ pixels right?

So today we have to talk about your new best-friend, of course I mean the EM measure unit!

Read the article: em vs px

5 web craftsman = 1 choice

Luky, Kevin, Felix, Jan & Kaushalya say:

emmmmmm.com

It's the new religion for web crafter around the interwebs for the next 2 years (or less)!

What Bali Balo thinks about px?

I think rem is better than em. I prefer it in many cases.

You can find Bali Balo on CodePen.

What does the W3C think about px?

To make it even easier to make style rules that depend only on the default font size, a new unit is in development: the rem. The rem (for "root em") is the font size of the root element of the document.

Unlike the em, which may be different for each element, the rem is constant throughout the document.

You can find it on W3C spec.

What I think about px!

Every answer is about em or rem. Why? Because the web craftswoman/man of 2013 doesn't use pixel anymore.

emmmmmm.com


Example

This is a CSS creation build with 100% em. Just open it and change the font-size on the body element in SCSS. The whole object scales without any problem.


Check out this Pen!

codepen.io/TimPietrusky/pen/rfHyl


What do you think about px?

You have a good example why em is better than px? Please let me know in the comments!

July 15, 2013 | [update] July 22, 2013

Comments