The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Please explain this code to me-ems and px

  • # December 7, 2012 at 2:30 pm

    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 {
    font:100%/1.5 Cambria, Georgia, serif; /* 16px */

    h1 {
    font:bold 1.75em/1.1429 ‘Proxima Nova Bold’,sans-serif; /* 28px/32px */
    margin:0.8571em 0 0; /* 24px 0 0 */

    # December 7, 2012 at 2:40 pm

    This reply has been reported for inappropriate content.

    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).

    # December 7, 2012 at 2:41 pm

    1) The 1.5 is the line height. [Check it out.]( “CSS-Tricks: Font shorthand”) 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.)

    # December 7, 2012 at 3:08 pm

    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?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed