treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Please explain this code to me-ems and px

  • I was wondering if CSS gurus could answer my questions about the code below which I found on the www.

    1. What does 1.5 mean in the following line?

      font:100%/1.5 Cambria, Georgia, serif; /* 16px */
      
    2. In the line below, I kind of have the same question ( what does 1.1429 mean), but at the same time I want to know why this figure equals to 32px for the author of the code(see his CSS comments)

      font:bold 1.75em/1.1429 'Proxima Nova Bold',sans-serif; /* 28px/32px */

    Thank you so much for your help. This is the full code:

    body {
        color:#333;
        font:100%/1.5 Cambria, Georgia, serif; /* 16px */
    }
    
    
    
    h1 {
        color:#2c1c16;
        font:bold 1.75em/1.1429 'Proxima Nova Bold',sans-serif; /* 28px/32px */
        margin:0.8571em 0 0; /* 24px 0 0 */
    }
    
  • I believe that the number after the / would be your line height. So for the h1, 1.75em would be your font size and the 1.1429 would be your line height. His comment is probably just what those values equal in pixels since they are easier to keep track of then ems (at least in my opinion).

  • 1) The 1.5 is the line height. Check it out. 1.5 is the same as 150%. So in this case, if the font-size is 16px, a line-height of 1.5 = 24px.

    2) 32px = 28px * 1.1429. (It's actually 32.0012, but close enough.)

  • Thank you so much!!! Now I understand. I was always wondering about the relationship between the font size and the line height. What are the criteria to determine what line height would be suitable for a certain font-size?