Responsive Ratio-Based Typography SASS Mixin

index.html

<h1>Responsive Ratio-Based Typography SASS Mixin</h1>

<hr>
<h2>How it works:</h2>
<p>This SASS Mixin takes one parameter: font size. When the mixin is used in conjunction with media queries you can easily make intricate responsive typographical styles very quickly.</p>

<h3>How to use it:</h3>
<code>
  <pre>
//0px - first breakpoint:
@media (max-width: 299px){
  @include typography(12px);
}

//start of mobile first breakpoints:
@media (min-width: 300px){
  @include typography(14px);
}

...
</pre>
</code>
<small>Check out the mixin in the Codepen CSS pane!</small>
<h3>What is looks like in action:</h3>
<hr>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.</p>

<ul>
  <li>Unordered List Item</li>
  <li>Unordered List Item</li>
  <li>Unordered List Item</li>
  <li>Unordered List Item</li>
</ul>
<ol>
  <li>Ordered List Item</li>
  <li>Ordered List Item</li>
  <li>Ordered List Item</li>
  <li>Ordered List Item</li>
</ol>


<p>Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<hr>
<small>The mixin is based off of <a href="http://www.gridlover.net/" alt="Gridlovers" title="Gridlovers">Gridlovers</a> and <a href="http://www.pearsonified.com/typography/" alt="Pearsonified's Golden Ratio Typography Calculator" title="Pearsonified's Golden Ratio Typography Calculator">Pearsonified's Golden Ratio Typography Calculator</a> tools.</small>
<small>Also in use: Normalize.css</small>

responsive-ratio-based-typography-sass-mixin.markdown

Responsive Ratio-Based Typography SASS Mixin

This SASS Mixin takes one parameter: font size. When the mixin is used in conjunction with media queries you can easily make intricate responsive typographical styles very quickly.

A Pen by Derek Palladino on CodePen.

License.

style.scss

/* ------ The Mixin ------ */
@mixin typography($font-size){
  $base-line-height: $font-size * $ratio;
  $margin: $base-line-height;
  body{
    font-size: $font-size;
    line-height: ($font-size * $ratio);
  }
  h1{
    font-size: ((($font-size * $ratio) * $ratio) * $ratio);
    line-height: ($font-size * $ratio) * 3;
    margin-top: $margin * 2;
    margin-bottom: $margin;
  }

  h2{
    font-size: (($font-size * $ratio) * $ratio);
    line-height: ($font-size * $ratio) * 2;
    margin-top: $margin;
    margin-bottom: $margin;
  }

  h3{
    font-size: $font-size * $ratio;
    line-height: ($font-size * $ratio);
    margin-top: $margin;
    margin-bottom: $margin;
  }
  h4{
    font-size: $font-size;
    line-height: ($font-size * $ratio);
    margin-top: $margin;
    margin-bottom: $margin;
  }
  p, ul, ol, pre, table, blockquote{
    margin-top: $margin;
    margin-bottom: $margin;
  }
}

/* ------ The Set Up ------ */
//Step 1) Pick your ratio
//example: 1.618 = Golden Ratio
$ratio: 1.618;

//Step 2) Pick your base font size per breakpoint using the mixin
//example: @include typography(16px);

//0 - first breakpoint
@media (max-width: 299px){
  @include typography(12px);
}
//start of mobile first breakpoints
@media (min-width: 300px){
  @include typography(14px);
}
@media(min-width: 600px){
  @include typography(15px);
}
@media(min-width: 800px){
  @include typography(16px);
}
@media(min-width: 1000px){
  @include typography(19px);
}
@media(min-width: 1200px){
  @include typography(21px);
}
@media(min-width: 1400px){
  @include typography(23px);
}
@media(min-width: 1600px){
  @include typography(25px);
}


/* ------ Demo styles ------ */
html{
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased !important;
	text-rendering: optimizelegibility;
	-moz-osx-font-smoothing: grayscale;
}
body{
  font-family: 'Roboto', sans-serif;
  color: rgb(33,33,33);
  width: 90%;
  margin: 0 auto 2em;
}
p, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6{
  transition: all 200ms ease-in-out;
}
code{
  background: #ccc;
  display: inline-block;
}
pre, code{
  width: 100%;
}
pre{
  margin: 1em;
}