Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Please explain this code to me-ems and px

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41225
    chickentulip
    Member

    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 */
    }

    #116682
    Jerad
    Participant

    1) The 1.5 is the line height. [Check it out.](https://css-tricks.com/snippets/css/font-shorthand/ “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.)

    #116683
    chickentulip
    Member

    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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.