2

Px vs Ems vs Rems vs Percents vs *explodes*

7 years ago from , Design System Lead at YouCaring

I'm starting a new project today and I want to make sure I set up the type scale in a future-forward way. I've been Googling around for what the most modern method for it would be.

I really like this method http://css-tricks.com/rems-ems/. Setting to a standard pixel size, using rems for components and then ems for everything inside.

I also read that setting to a pixel size screws up zooming at least up to IE9. But also setting it to a percentage is unreliable, depending on browser defaults.

I know people who swear by percentages only. I also know people with Deal With It shades on using only pixels.

Oh my gosh, my brain is hurting.

What do you all do?

6 comments

  • Dave GreenDave Green, 7 years ago (edited 7 years ago )

    I'm currently building a personal site as I'm a front-end developer and I want to advertise what I do.

    It's a fully responsive design, so I'm using REM units for font size, margin, padding and widths. I use EM units for line-height, and then a sprinkling of percentages for things like padding on my outer containers etc.

    Using REMs for most things just makes the responsive side SO much easier: the entire design just scales beautifully. :)

    I'd say 90% of my SASS contains REM units. It's just the way forward. To cater for older versions of IE, you could manually enter pixel fallbacks (SASS can help here) or use something like: https://github.com/chuckcarpenter/REM-unit-polyfill

    Hope this helps!

    Cheers, Dave

    2 points
    • Matt Felten, 7 years ago

      I haven't seen that polyfill before. Thanks Dave!

      0 points
      • Dave GreenDave Green, 7 years ago

        It's really, really useful. I maintain a boilerplate for my employer and we've had to bake in a lot of legacy browser (read: IE) support so it's very helpful! Glad to help! :)

        0 points
  • Jesse DobbelaereJesse Dobbelaere, 7 years ago (edited 7 years ago )

    I mostly use some lightweight Sass mixins where you can specify the text dimensions like font-size, line-height, margins, paddings. It then generates the CSS with rem's and a px fallback (uncomment the highlighted lines).

    Oh and it calculates the values according to the baseline that you've configured in the settings file. And you can also use a modular scale :-) This is the official Chopstick website

    0 points
    • Matt Felten, 7 years ago

      Yeah, I have a couple different pixels-to-rem Sass mixins lying around that I might use. I just want to make sure there's not some better method out there that I haven't ran across.

      I've never seen Chopstick before. Thanks for the link.

      0 points