WordPress.org

Support

Support » Themes and Templates » [Resolved] line-height: 3.692307692; ??? [twentytwelve]

[Resolved] line-height: 3.692307692; ??? [twentytwelve]

  • I understand the basic concept of how the line-heights are normally assigned. But the explanation in the notes section of style.css does not really do a great job of explaining why this is necessary…

    line-height: 3.692307692;

    This is, of course, from

    article.sticky .featured-post {
    border-top: 4px double #ededed;
    border-bottom: 4px double #ededed;
    color: #757575;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 3.692307692;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    text-align: center;
    }

    and…

    .main-navigation li a {
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
    }

    I am assuming that this has something to do with preserving the vertical rhythm. That’s all fine, but how does one arrive at this number? I understand there is this 12px variable having to do with the font size, and the number 24, which is the base value for $line-height… But what I don’t understand his how the formula works here. I’ve tried it a couple of ways and I can get back to the number, but it still doesn’t make sense totally. If someone could just show me how it’s done, I would really, really appreciate it. I’ve search Google and it’s not turning up anything except one other frustrated seeker of answers from Twitter.

Viewing 15 replies - 1 through 15 (of 22 total)
  • In which theme is this? It looks like it’s added by JavaScript.

    notes section of style.css does not really do a great job of explaining why this is necessary…

    General CSS queries can be asked in general CSS forums such as;
    http://csscreator.com/forum
    http://www.cssforum.com.pk/
    http://css-tricks.com/forums/
    http://www.welovecss.com/
    http://www.codingforums.com/

    This is straight out of twentytwelve.

    Why are you marking this resolved? Not cool.

    Why are you marking this resolved? Not cool

    I think that’s a bug in the forums http://wordpress.org/support/topic/can-i-test-out-a-forum-bug?replies=1

    Right. Okay. Sorry.

    Anyway, this is a stock twentytwelve question, and it’s something that’s meant, I guess, to be a good thing. So as it’s new, it would be great if someone could explain it, and perhaps include it in the notes section of styles.css so it’s understood. I realize all the clues are probably there, but I’m just not getting it, so would appreciate some help from anyone that’s clued up.

    Specialmachine, try this article for an explanation of the line height and search for the text excerpt, “For instance, almost right off the bat in style.css we see:”.

    esmi

    @esmi

    Forum Moderator

    Straight from the Twenty Twelve theme:

    /* =Notes
    ————————————————————–
    This stylesheet uses rem values with a pixel fallback. The rem
    values (and line heights) are calculated using two variables:

    $rembase: 14;
    $line-height: 24;

    ———- Examples

    * Use a pixel value with a rem fallback for font-size, padding, margins, etc.
    padding: 5px 0;
    padding: 0.357142857rem 0; (5 / $rembase)

    * Set a font-size and then set a line-height based on the font-size
    font-size: 16px
    font-size: 1.142857143rem; (16 / $rembase)
    line-height: 1.5; ($line-height / 16)

    ———- Vertical spacing

    Vertical spacing between most elements should use 24px or 48px
    to maintain vertical rhythm:

    .my-new-div {
    margin: 24px 0;
    margin: 1.714285714rem 0; ( 24 / $rembase )
    }

    ———- Further reading

    http://snook.ca/archives/html_and_css/font-size-with-rem
    http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

    Yeah, you’re not really answering the question. I know how the line-height thing works. I’m asking how did they arrive at this number when in the example they use the font size, which is in this case would be 12px to arrive at the line-height.

    line-height: 2; ($line-height / 12)

    That is, if i wanted to assign a line height of 12px!! But why are they assigning this seemingly crazy figure of 3.692307692? I just want to know what the formula was to arrive at this number. You can keep posting links, but if you don’t know, just don’t answer.

    12 x 3.692307692 = 44.307692304

    That’s not even a round number. So what’s the point? It’s not 48px (or 24px top and bottom).

    If you use 12px font, your line height would be 2 because
    you divide $line-height (24) by the font size value.

    24 / 12 = 2

    I just wrote that. That’s the only clear thing here, but I am not trying to assign a line-height of 2. I am asking why the default line-height for the elements I posted above are as they are. And how, using this formula, one achieves that number and why?

    When you do the math, as I’ve done there for you to see, it would be as if, in px, the author wanted to assign 44.307692304px as the line height. That doesn’t make sense to me.

    Moderator Michael

    @alchymyth

    Forum Moderator

    assuming the font-size is 13px at that point, then the number would result in precisely 13 x 3.692307692 = 48 [px] line height;

    the theme’s author could have chosen any other way of expressing the line height – http://www.w3schools.com/cssref/pr_dim_line-height.asp

    however, those numbers with a precision of 9 decimals are simply a tribute to ‘hail o digital calculator’;

    assuming
    a monitor pixel density of about 100 ppi (pixels per inch)
    and
    a ‘rem’ base of 14px;

    then a letter with the size of
    1rem is about 3.5mm high (on the screen);

    0.001rem is about 3.5micrometer (less than the tenth of the diamater of a human hair);

    0.000001rem is in the range of nano meters;

    0.000000001rem is in the range of pico meters – less the a tenth of the size of a single helium atom.

    whoever has written those numbers into style.css of Twenty Twelve, certainly loved precison …

    any css size with a precision of more than two decimal figures is just not realistic.

    Thank you, sir!!!

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Resolved] line-height: 3.692307692; ??? [twentytwelve]’ is closed to new replies.