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?
Global contains these two lines:
and also the following body declaration:
Why is
line-height
1? Shouldn't that beline-height: $base-line-height
? This confused me, especially as Foundation for Sites has the similar soundingline-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 is1.6
, headers are1.4
, and labels and menu links are1
? 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
?