zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

Why is $base-line-height never used anywhere? #737

Open zakdances opened 8 years ago

zakdances commented 8 years ago

Global contains these two lines:

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height: 1.5 !default;

and also the following body declaration:

 // Default body styles
  body {
    background: $body-background;
    color: $body-font-color;
    padding: 0;
    margin: 0;
    font-family: $body-font-family;
    font-weight: $body-font-weight;
    font-style: $body-font-style;
    line-height: 1;
    position: relative;

    @if $body-antialiased {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

Why is line-height 1? Shouldn't that be line-height: $base-line-height? This confused me, especially as Foundation for Sites has the similar sounding line-height: $global-lineheight in the same place. So then I thought, maybe I'm misunderstanding the variable name. Maybe it's not directly related to Foundation's typography, but used only for the grid mixin. But nope, it's not in _grid.scss either. It's not actually anywhere that I could find. It's one and only mention seems to be it's own declaration in global.

So what is the purpose of this variable? What does "base-line-height" mean? How is that difference from "global-lineheight"? What is the significance of the number 1.5 when paragraph line height is 1.6, headers are 1.4, and labels and menu links are 1? Is there some sort of 1.4 → 1.5 → 1.6 numerological system I'm missing?

Foundation for Apps typography has left me a bit stumped because there's no description of your modular scale, only a passing reference to it. Can you help me understand $base-line-height, your modular scale, and how you're selecting specific values such as .2rem and .5rem?