h1-6 .alpha-.zeta line-height calculation

[drrobotnik]

I'm trying to understand the logic around @mixin font-size(). More specifically how you came to the calculation on the line-height.

  @mixin font-size($font-size, $line-height:true){
      font-size:$font-size;
      font-size:($font-size / $base-font-size)*1rem;
      @if $line-height == true{
          line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
      }
  }

I would think that you would want to preserve the standardized vertical rhythm you created within the defaults:

  $line-height-ratio: $base-line-height / $base-font-size;

Below I have a visual example where I've changed all headings in _headings.scss to set line-height to false. Before and after.

To explain, in the example i'm using giga, h1, and p tags. the h1 tag has a condensed line-height applied from _headings.scss. Because of this h1 has almost the same line-height as the standard p tag.

I'd like to avoid modifying these files since we're supposed to apply overrides or defaults within _vars. In this case I don't have any other solution.

[sqpdln]

+1 on this.

Especially when the $font-size goes from above to below the $base-line-height, in the example below 18px, the resulting line-height doesn't make sense:

/* line 11, ../sass/inuit.css/base/_headings.scss */
h1, .alpha { font-size: 20px; font-size: 1.66667rem; line-height: 1.8; }

/* line 14, ../sass/inuit.css/base/_headings.scss */
h2, .beta { font-size: 19px; font-size: 1.58333rem; line-height: 1.89474; }

/* line 17, ../sass/inuit.css/base/_headings.scss */
h3, .gamma { font-size: 18px; font-size: 1.5rem; line-height: 1; }

/* line 20, ../sass/inuit.css/base/_headings.scss */
h4, .delta { font-size: 17px; font-size: 1.41667rem; line-height: 1.05882; }

/* line 23, ../sass/inuit.css/base/_headings.scss */
h5, .epsilon { font-size: 16px; font-size: 1.33333rem; line-height: 1.125; }

[csswizardry]

Please see #291.

Thank you.