21

Ask DN: Which unit do you use? rem, em or px?

over 6 years ago from , Product owner for Gravit Designer

I used to use rem for all of my units with a px fallback, but the more I think about, the more I question this approach. Chris Coyer for example suggest to use px (or percent) for the html, rem for components and em inside the components (http://css-tricks.com/rems-ems).

I also ask, because most of the websites I inspected today ignore this whole "responsive" typography and just use px, which is a real bad practice, no matter how you put it.

How do you approach this problem, what do you use?

56 comments

  • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

    Pixels and percents. I know some love ems and rems, but I’ve never had an issue with pixels and percents.

    CSS pixels are an abstracted measurement unit, just one that also correlates to the display’s pixels (but not always 1:1). They’re awesome.

    Just remember to use box-sizing: border-box and all will be good.

    27 points
    • Matthew KosloskiMatthew Kosloski, over 6 years ago

      Agreed. I don't see what all the fuss is about with ems and rems.

      5 points
    • Christian Krammer, over 6 years ago

      The thing with px is, that it is not easily resizable. Because these days it's pretty common to blow up the whole website, or at least the font sizes, for bigger screens. With px you need to reset every font size, with rem you just reset the font size at the and everything else gets scaled accordingly.

      3 points
      • Marc EdwardsMarc Edwards, over 6 years ago

        The thing with px is, that it is not easily resizable.

        I honestly haven’t found it to be an issue for RWD. Not once.

        3 points
        • Christian Krammer, over 6 years ago

          So you resize every element, that you need to "blow up", individually with its own media query? I imagine that this can lead to bloat.

          0 points
          • Marc EdwardsMarc Edwards, over 6 years ago

            Nope.

            Here’s some examples. Have at it:

            http://bjango.com/articles/adjustmentlayers/http://bjango.com/mac/istatmenus/

            Please also keep in mind that I don’t do front end dev anywhere near full time. :P

            1 point
            • Tiago DuarteTiago Duarte, over 6 years ago (edited over 6 years ago )

              When you resize the window on the iStat Menus page, do you notice how the "iStat Menus 5" title resizes? That's the effect one is supposed to achieve with responsive design, except on this situation you're doing it with an image, where all you need is a "max-width: 100%".

              However to achieve the same effect with text, for example, you could do it like Christian said using PX, which would mean changing the font-size multiple times using multiple @media-queries for multiple elements.

              Or, if you use REM's or EM's throughout, you can just change the font-size on the body element and it will change the size proportionally on all the other elements! :)

              1 point
              • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

                However to achieve the same effect with text

                I’m happy using an SVG for it, so I don’t need to embed a webfont (which would also mean more JS and HTTP requests).

                I don’t see any upside to that being live text. The downsides are many. The rendering and wrapping could vary in different browsers.

                Or, if you use REM's or EM's throughout, you can just change the font-size on the body element and it will change the size proportionally on all the other elements! :)

                I haven’t ever wanted to change all the text on an entire page like that. I like having far more precise control.

                Worth noting: I’m not suggesting others shouldn’t use ems and rems. I’m just saying for the projects I’ve worked on, I’ve found px and percents a far better way to go. Do whatever works for you.

                3 points
                • Hamish TaplinHamish Taplin, over 6 years ago (edited over 6 years ago )

                  Although I don't really disagree about using an svg here, the problem is that your potentially creating more http requests on a site with lots of this. At least with a webfont it gets download once and then cached. By using images on every page you're creating additional requests every time. Probably doesn't matter here though as you're only using it once per page.

                  However, theres not alt text on them which is a bit naughty accessibility wise as a screenreader has no idea what that says. Also, theres no <h1> which makes things even worse :O

                  Probably doesn't matter so much for a product site (unless your bosses care about SEO/accessibility) but you'd get hammered for doing that with client work. ;)

                  3 points
                  • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

                    the problem is that your potentially creating more http requests on a site with lots of this

                    Fair point. Those 2 SVGs are 18,325 bytes in total though.

                    I’m not sure how much it helps, but I base64 encoded the (quite simple) SVGs for the header and footer into a single 40K CSS file. I think our site is fairly light on HTTP requests. If anything, it’s the big, Retina sized bitmaps that will cause slow page loads for us.

                    However, theres not alt text on them which is a bit naughty accessibility wise as a screenreader has no idea what that says.

                    Also a fair point. Just fixed that. The page was built in 1.5 days. :D We’re in a position where these things need to be done quickly, so I usually stick to techniques I know I can implement in a short amount of time without issues.

                    Probably doesn't matter so much for a product site (unless your bosses care about SEO/accessibility)

                    I don’t think we have any issues with SEO. Trying searching for one of our products. :D

                    0 points
                • Tiago DuarteTiago Duarte, over 6 years ago

                  Marc, I wasn't trying to suggest that you should've use text rather than SVG.

                  I was just trying to explain that if you had used text, em's or rem's could've made your process easier if you wanted to achieve the same effect.

                  As for the precise control, that's one way of doing it. If you use em's, you can do it on a component level, for example, which still makes it faster (and actually more precise) than using px's.

                  But as you said, we should use whatever we work better with (Sketch vs Photoshop, anyone?).

                  1 point
              • Chris ArmstrongChris Armstrong, over 6 years ago (edited over 6 years ago )

                Or, if you use REM's or EM's throughout, you can just change the font-size on the body element and it will change the size proportionally on all the other elements! :)

                I’ve been a die-hard EM user for years for this very reason (even wrote about it a couple of times http://alistapart.com/article/the-infinite-grid/ , http://goldilocksapproach.com/article/) but have recently moved back to using pixels (at least for typographic elements). I've never actually found myself increasing the body size to 'scale' a layout up, but I have found myself repeatedly running into typesetting issues caused by browser rounding errors.

                3 points
                • Chris NewtonChris Newton, over 6 years ago

                  Even if you do want global scaling like that, with any of the main CSS generators it’s common to define your scale of text sizes using variables, and it’s easy to set the values as multipliers of a common base size. That works for any units you prefer, including px.

                  1 point
    • Luke MurphyLuke Murphy, over 6 years ago

      It's actually illegal to use px for type in Europe because of disability laws (although it's one of those 'not actually enforced' kind of laws).

      Once I got my head around ems to begin with they are awesome for everything type/typesetting related. Also the scalability of it, especially when doing responsive, makes ems come into their own. Ems and percentages ftw.

      2 points
      • Adrian HowardAdrian Howard, over 6 years ago (edited over 6 years ago )

        It's actually illegal to use px for type in Europe because of disability laws (although it's one of those 'not actually enforced' kind of laws).

        [citation needed]

        As somebody living and working in the EU this is not true to the best of my knowledge.

        4 points
        • Daniel SteinDaniel Stein, over 6 years ago

          Correct. It is merely a standard suggested by WC3, http://www.w3.org/WAI/

          However, that does not keep individuals and organisations from suing companies not complying

          "Disabled Sue Over Web Shopping" http://online.wsj.com/news/articles/SB10001424127887324373204578374483679498140

          0 points
          • Adrian HowardAdrian Howard, over 6 years ago

            Folk can, do, and should (IMHO) sue over inaccessible sites. However that has little, if anything, to do with the unit used. The px vs em vs rem decision will form a very, very small part of the general accessibility of a site.

            To quote from the technique recommendation pages:

            "Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0."

            1 point
      • Marc EdwardsMarc Edwards, over 6 years ago

        It's actually illegal to use px for type in Europe because of disability laws (although it's one of those 'not actually enforced' kind of laws).

        Because... why? All modern browsers can increase the font size. Not sure why it would be an issue.

        3 points
    • Hamish TaplinHamish Taplin, over 6 years ago

      What happens to users who have their default font-size increased for accessibility reasons?

      1 point
  • Surjith S MSurjith S M, over 6 years ago

    Started using Rem from em. So far so good. If you give html font size 62.5%. More fun.

    Eg:

    html { font-size:62.5%; }

    .element { font-size:18px; font-size:1.8rem; }

    .element2 { font-size:24px; font-size:2.4rem; }

    You don't need a calculator. :-)

    4 points
  • Christopher MoodyChristopher Moody, over 6 years ago

    I use cm and in indiscriminately.

    Punk Rock Web Development.

    3 points
  • Ricardo MagalhãesRicardo Magalhães, over 6 years ago

    ems are incredibly useful for media queries; now that support for rem is good, I use them for typography. Everything else, I tend to go with percentages; avoiding setting heights and widths on elements is a good practice anyway! :)

    3 points
  • Cihad TurhanCihad Turhan, over 6 years ago

    I love integers so I'm fine with pixels and percentages. However, for some font-related properties like line-height, I usually use em

    2 points
  • Mike TysonMike Tyson, over 6 years ago

    That is great.

    2 points
  • Daniel AdamsDaniel Adams, over 6 years ago

    While the nesting of em is a pain in the ass I'm using rem for relative statements. Though for shadows, borders and the like I'm still using px. There is no right or wrong, anyone should use what leads to the best results (from a users pov) and what fits best in their workflow/grid.

    2 points
  • Lee MunroeLee Munroe, over 6 years ago

    px

    1 point
  • Geoff YuenGeoff Yuen, over 6 years ago (edited over 6 years ago )

    I use all of them as they all have their uses:

    I use px on my html element to set a base font-size which increases (slightly) on larger displays.

    I use ems to size text so it scales as it's parents change via media queries.

    I use rems for consistent padding and margins (I use a Grunt task for rem fallbacks for IE).

    I use percents for column widths and sometimes for positioning items absolutely.

    1 point
    • Taylor Van OrdenTaylor Van Orden, over 6 years ago

      FYI, if you use a pre-processor, there are a ton of rem -> px fallback mixins that you can use instead of the Grunt task.

      0 points
      • Geoff YuenGeoff Yuen, over 6 years ago

        I prefer to write prefixless just because it's a more future-proof and readable (to other devs). When a browser eventually drops a prefix a mixin is doing unnecessary work whereas something like autoprefix is looking up caniuse.com to see if you need a prefix everytime you process your sass. Just my opinion.

        0 points
  • Jodi WarrenJodi Warren, over 6 years ago

    I will admit that for fixed lengths, I tend to use rems with a px fallback, but it's ultimately down to context. The important thing is understanding what px, rem, em, percentage, and vw/vh actually mean.

    This will allow you to make judgements on the best unit for the piece of CSS you're writing at that precise time.

    For instance, a piece of decoration that needs to scale to sit comfortably on a <p> or an <h1> could inherit it's spacing based on the type size - so use ems.

    You may have a layout where the items will need to have a fixed width padding (rem/px) whilst having 25% width of their container.

    Etc, etc.

    1 point
  • Luis La TorreLuis La Torre, over 6 years ago

    rem seems intense. em is for me.

    0 points
  • Caleb WintersCaleb Winters, over 6 years ago (edited over 6 years ago )

    I like to use rems, but I prefer to think in pixels, if that makes sense. I usually have a converter function in Sass that I'll use.

    $rem-base: 16; @function rem-calc($num) { @return $num / $rem-base * 1rem; } h1 { font-size: rem-calc(35); }
    0 points
  • Casey BrittCasey Britt, over 6 years ago

    px and % for everything but font-size and line-height. For those I use ems.

    0 points
  • Chris LoweChris Lowe, over 6 years ago

    I use sass mixins that output REMs and PX for fall backs. I find this pretty useful for scaling UI by adjusting HTML font-size.

    0 points
  • David HickoxDavid Hickox, over 6 years ago

    rems

    0 points
  • Jake Lazaroff, over 6 years ago

    I use rem with a px fallback for most things, and vw for aligning to my columns.

    0 points
  • Ryan GloverRyan Glover, over 6 years ago

    Recently ran into this on a project and the final verdict was: pixels/percentages. I'd been using em's throughout the entire project and it was producing values that were slightly off (I was doing a Sketch -> Front-End conversion). In the end, the results were more-or-less the same and code management was much easier.

    0 points
  • Aaron GrandoAaron Grando, over 6 years ago

    I prefer to use rem for its ease of scaling – for responsive work I'm usually able to do a global adjustment and fine tune just a few rules.

    However, I still often find myself stuck in IE8 compatibility hell, and polyfilling rems is too performance intensive for production. So, in those cases, I to stick to px. Ems are useful sometimes, but generally I find CSS easier to wield, without the relativity of em.

    0 points
  • Anton LantzAnton Lantz, over 6 years ago

    One important thing when using em/rem for text is to make sure that fixed-size elements containing text are set with em/rem as well to prevent text from disappearing/overflowing when a device changes the baseline.

    I see this alot.

    Em/rem is not only for text-size but everything dependent on it.

    0 points
  • Matt SistoMatt Sisto, over 6 years ago

    Sassline + Rems. Fastest path to good type and space.

    0 points
  • Weston VierreggerWeston Vierregger, over 6 years ago (edited over 6 years ago )

    Set the root percent and use rems all the way down. Best part: you can change the size of all elements proportionally by only changing the root percent.

    For instance, my personal site resizes perfectly with only these rules:

    @media screen and (max-width: 1024px) {

    html { font-size:60% } }

    @media screen and (max-width: 960px) {

    html { font-size:55% } }
    0 points
  • David DarnesDavid Darnes, over 6 years ago

    I've used ems in the past, but its not a good idea as things can get complicated when thinking about context.

    I believe I was told by CSS Wizardry that using rem with px fallbacks is the best approach, and I would say he's right as I'm sure he's tested several units and methods.

    The projects I work on now use px though, we need to so that we are sure we're getting the right units.

    0 points
  • Vlad-Ștefan HarbuzVlad-Ștefan Harbuz, over 6 years ago (edited over 6 years ago )

    rems are really good for vertical rhythm and they allow you to better integrate typography with everything else (instead of always multiplying your font size or line height in pixels).

    0 points
  • Steve McKinneySteve McKinney, over 6 years ago

    I use em's mostly. It's probably a lesser used thing but I like the fact when you zoom in it shows the appropriate view based on your media queries.

    You can scale the font-size from the body element so you can serve appropriate font sizes easier.

    I like the idea of rems but I only use them where consistency is needed with margins/padding. I don't have any trouble with nesting ems and getting caught off guard with font sizes. I also don't like the pixel fallback thing.

    0 points
  • Daniel FischerDaniel Fischer, over 6 years ago

    I use em for typography and rems for components.

    0 points
  • Hamish TaplinHamish Taplin, over 6 years ago

    I use ems for everything including media queries. The only exception is if I don't want something to scale (such as bitmap).

    0 points
    • Christian Krammer, over 6 years ago

      What do you do about inheritance? For example if you have list-item inside a list-item? Or a component inside another component? Calculations can get pretty hairy then.

      And one thing I always find hard about ems is the the calculation of values. Because there are times when you absolutely need to convert px to em, and that can get complicated.

      0 points
      • Hamish TaplinHamish Taplin, over 6 years ago

        I never set a font-size on anything other than the element directly containing the text node unless I want to cascade the font-size. If I wanted avoid cascade but absolutely had to set a font size on a container (I never run in to this issue for some reason) I would probably just use rems there.

        0 points
  • Account deleted over 6 years ago

    I use REMs for modern browsers, EMs for older ones. I prefer to design with proportions rather than pixel-perfect measurements. But then, I tend to design in the browser rather than churning out static comps. I suspect the PX/% : EM/REM issue will divide along similar lines.

    0 points
  • Oskar RoughOskar Rough, over 6 years ago

    Fuss? The beauty is that em and rem scale with the parent or root font-size relatively, whereas pixels don't.

    If you build a component with scalable units (not pixels) you can have a small, medium and large version with the same code just by changing the base font-size. Not possible with pixels.

    A few thoughts here http://codesandnotes.com/scaling-components/ and here http://codesandnotes.com/modern-css-sizing-advice/

    0 points