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

  • Resolved specialmachine

    (@specialmachine)


    11 years, 10 months ago

    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 7 replies - 16 through 22 (of 22 total)
  • Thread Starter specialmachine

    (@specialmachine)

    So the font size should really be 13px and not 12px? Because it’s 12px if you look at hte computed styles. Could that be a mistake, or does the rem base of 14px throw things into a bit of a wobble? I have no idea if the rem base figures in here somewhere with regard to this number. Because 12 x 3.692307692 = 44.307692304 [px].

    Sorry. ??

    Thank you for all these posts – I have been trying to read up on the rem usage but I too am baffled by the depth of precision in these figures.

    I also had the question – why $rembase: 14; ?

    Would it not be much easier to calculate rem sizes throughout the theme with a base of 10? Am I missing something here? Was the number 14 chosen for a specific reason?

    I also had the question – why $rembase: 14; ?

    because in the /* =Basic structure section, the theme Twenty Twelve uses this style:

    body {
	font-size: 14px;
	font-size: 1rem;
...

    ahh – ok, Since those lines start at line 484 of the stylesheet it was sort of a Which came first, the chicken or the egg? feeling.

    in extending this further, in the reset near the top of the stylesheet the “html” font-size is set to 100% and then on line 481 html font-size is 87.5%

    is this related too or does it affect (or is affected by) the rembase calculated font sizes?

    Once I am comfortable in how they work together I can maybe move over to a rembase of 10 so that I can work with the theme easily (sans calculator).

    Thread Starter specialmachine

    (@specialmachine)

    Well, the default font size is 16px, as I understand it. So 87.5% of 16 is 14. I don’t know if there’s some smarty pants reason for choosing 14. Why not 10, as has been mentioned? Then it would be 10/16 = 62.5%

    ??

    Thank you all for the input. It’s starting to fall into place for me.

    I don’t fully understand typography’s vertical-rhythm, but here are my thoughts.
    Rem units (“root em” applied to the html element) are used instead of em units, to avoid tracking an elements hierarchical context as how a user will “nest” elements in a CMS cannot be predicted.

    The pixel units are provided for a fallback for older browser that do not support rem units . The pixel units are written first in the CSS “cascade” so newer browsers that support rem overwrite the pixel units.

    The baseline rem units is normally equivalent to about 16px for what I have read. So I was at first puzzled why the theme was using 14px ($rembase). It appears that html element is then styled with 87.5% , instead of 100% (the ration of 14 to 16). I think this is done to make maintenance of vertical rhythm easier by applying the theme’s suggested top and bottom margins of 24px or 48px (vs 27.428571429px and 54.857142857px).

    The precision several decimal places out may be due to CSS preprocessing using something like LESS, SASS or Stylus. Browsers are capable of reading this precision. Best practices I have read suggest not rounding these values.

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