1. 9
  1.  

  2. 5

    I’m not experienced at all with CSS, but mathematically speaking, percentages are also unitless…

    1. 4

      I think most of the time a unitless number is great for line-height, and likely what you want. However consider the following example (and many like it):

      h1 {
        font-size: 34pt;
        line-height: 100vh;
      }
      @media (min-width: 500px) {
        h1 {
          font-size: 72pt;
        }
      }
      

      Using a unit-based line-height value keeps the text positioned in the same place while the font-size is free to change independently. Not always, but quite a bit more often than ‘never’ this is in fact what we want to do! Add in the tantalizing idea of element-based units (if they were ever to be added to CSS) and this advice could become very limiting, even bad advice.

      You should use whatever units make sense for solving what you’re trying to do, and not try to tell people what they should do when solving problems you’re not looking at. There are valid reasons you can use numbers with units for line-height, there’s no benefit to be gained by ignoring them and pretending they don’t exist.

      This article could be improved by being named: “Hmmm. Hmmm. Hmmm… Is a Unit on Line-Height Really What You Need?” and then explaining the cases the author does understand where a unit doesn’t make sense.

      1. 3

        I was about to complain that there are scenarios where, if the user has a sufficiently high text-scaling setting, this would result in cropping the header.

        Then I realized that the line-height you specified is 100vh. Carry on. :)