1. 29

  2. 5

    Most of this advice is great, but the use of em is actually generally discouraged. There are very select times it’s appropriate, but since it’s always adjusting based on the parent element, recursively, it rapidly becomes borderline impossible to figure out what size you’re actually dealing with. (And also very brittle, since adding a new containing <div> can change all measurement sizes within.) rem does not suffer this problem.

    And even there, while rem is great for handling things that really and truly need to be font-size specific (like space between paragraphs), there’s not actually any big deal with using px. It’s a reference pixel, not a screen pixel, which matters because it will indeed actually change as users zoom in and out, and it’s much easier to think about general layout in terms of reference pixels than whatever rem ends up being.

    1. 1

      Another problem with ems (and all relative CSS sizes) is that they’re based on the browser’s default font size, which may be modified by the user.

      Suppose that a user prefers web pages to use Georgia, size 13, unless the pages specify a custom font. Now, say you design a web page like this:

      html { font-size: 62.5%; }
      body { font: 1.2em/1.3 Verdana, sans-serif; }

      You probably expect the body font to be Verdana at a size equivalent to 12 pixels, because 16 px * 62.5% * 1.2em = 12 px. But the user doesn’t use 16 px, he uses 13 px, and so the body font size will actually be equivalent to 13 px * 62.5% * 1.2em = 9.75 px.

      That’s why you should always use pixels (or points), especially if you’re using font sizes smaller than 16 pixels.

    2. 2

      I know pretty much all of this, but it is also useful to bring up the obvious to remember some of these things too. I cannot even remember when I learned about this - but it definitely wasn’t at the beginning.

      1. 2

        This seems like a good starting point for people looking to thoroughly learn CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

        1. 1

          I didn’t know about the ch unit. Seems pretty niche but interesting! Thanks for sharing.

          1. 1

            The interesting thing about ch and, on the vertical direction, the ex unit is they depend on the font’s metrics, so they’re useful to set micro-level things, such as letter-spacing or text-underline-offset.