Responsive Type Scale with Sass

index.html

<div class="container">
  
  <h1 class="level4">Heading Level 1</h1>

  <p>Lorem ipsum dolor sit amet, consetetursa 45 | 45 gelitr, sed diam nonu 75 | 75 de tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Now we know what they mean by 'advanced' tactical training. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. The look in your eyes, I recognize it. You used to have it for me. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion?</p>

  <h2 class="level3">Heading Level 2</h2>

  <p>I recommend you don't fire until you're within 40,000 kilometers. Did you come here for something in particular or just general Riker-bashing? Ensign Babyface! Computer, lights up! I'm afraid I still don't understand, sir. Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody.</p>
  
  This is an ordered list:
  
  <ol>
    <li>Some list item</li>  
    <li>Some list item</li>  
    <li>Some list item</li>  
    <li>Some list item</li>  
    <li>Some list item</li>  
  </ol>

  This is an unordered list:
  
  <ul>
    <li>Some list item</li>  
    <li>Some list item</li>  
    <li>Some list item</li>  
    <li>Some list item</li>  
    <li>Some list item</li>  
  </ul>
  
  <p>Sweet biscuit cake lemon drops powder powder cotton candy topping. Gummies halvah chupa chups chocolate bar gummi bears lollipop apple pie chocolate bar. Jelly beans sugar plum croissant pudding. Candy tiramisu gingerbread brownie tiramisu. Applicake gingerbread faworki danish fruitcake cheesecake cheesecake wafer. Chocolate cake bear claw bear claw pie lollipop bear claw powder marzipan jelly-o. Icing muffin muffin. Caramels donut tiramisu toffee dessert chupa chups. Chocolate cake faworki liquorice apple pie. Powder chocolate marzipan. Fruitcake powder chocolate cake. Chocolate cupcake candy canes oat cake icing ice cream sesame snaps. Applicake marzipan ice cream tootsie roll marzipan apple pie carrot cake sugar plum.<p>

  <h3 class="level2">Heading Level 3 He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</h3>
  
  <blockquote>Blockquote I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. Could someone survive inside a transporter buffer for 75 years? Maybe we better talk out here; the observation lounge has turned into a swamp. Now, how the hell do we defeat an enemy that knows us better than we know ourselves?</blockquote>

  <p>From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>

  <h4 class="level1">Heading Level 4 tootsie roll bear claw liquorice cookie cake biscuit danish sweet roll</h4>

  <p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

  <hr>

  <div class="type-scale">
    <div class="step-3">$ms-level-3</div>
    <div class="step-2">$ms-level-2</div>
    <div class="step-1">$ms-level-1</div>
    <div class="step0">$ms-level0</div>
    <div class="step1">$ms-level1</div>
    <div class="step2">$ms-level2</div>
    <div class="step3">$ms-level3</div>
    <div class="step4">$ms-level4</div>
    <div class="step5">$ms-level5</div>
    <div class="step6">$ms-level6</div>
  </div>

</div>

Sass-Type-Scale-with-Vertical-Rhythm.markdown

Responsive Type Scale with Sass

A Pen by Felix Fischer on CodePen.

License.

style.scss

@import "compass/css3";
/*
 * Variables
 */

$base-font-family: "Roboto", sans-serif;

$fms-bp-first:   360px;
$fms-bp-last:   1200px;
$fms-bp-count:       7;

$fms-font-min:      14;
$fms-font-max:      20;

$fms-scale-min:    1.2;
$fms-scale-max:    1.3;

$fms-lh:           1.4;


/*
 * Automagic stuff
 */

$scale: append((), ('', $fms-font-min, $fms-lh, $fms-scale-min));

$fms-bp-step:    ($fms-bp-last - $fms-bp-first) / $fms-bp-count;
$fms-scale-step: ($fms-scale-max - $fms-scale-min) / $fms-bp-count;
$fms-font-step:  ($fms-font-max - $fms-font-min) / $fms-bp-count;


@for $i from 1 through $fms-bp-count {
  $w:   round($fms-bp-first + $i * $fms-bp-step);
  $bfs: round($i * $fms-font-step + $fms-font-min);
  $lh:  $fms-lh;
  $s:   $i * $fms-scale-step + $fms-scale-min;
  $scale: append($scale, ($w, $bfs, $lh, $s));
}

@mixin gen-bp($min-width) {
    @if $min-width == '' {
      @content;
    } @else {
      @media (min-width: $min-width) {
        @content;
      }
    }
 }

@each $point in $scale {
  //@error $point;
  $min-width:     nth($point, 1);
  $font-size:     nth($point, 2);
  $line-height:   nth($point, 3);
  $scale:         nth($point, 4);
  @include gen-bp($min-width) {
    @for $i from -3 through 6 {
      .step#{$i} {
        $fs: pow($scale, $i) * $font-size;
        $lh: $font-size * $line-height / $fs;
	      @while $lh < 1 {
	        $lh: $lh + $lh;
	      }
        font-size: round($fs) + px;
        font-size: $fs / 16 + rem;
        font-size: unitless($font-size);
        line-height: $lh;
      }
    }
  }
}

body {
  font-family: $base-font-family;
  padding: 1em;
}

h1    { @extend .step4; }
h2    { @extend .step3; }
h3    { @extend .step2; }
h4    { @extend .step1; }
body  { @extend .step0; }
small { @extend .step-1; }
.tiny { @extend .step-2; }

p, blockquote {
  margin: 1em 0;
}

blockquote {
  padding: 1em;
}