_mixins.scss

// https://github.com/jakearchibald/sass-ie/

$fix-mqs: false !default;

@mixin respond-min($width) {
	@if $fix-mqs {
		@if $fix-mqs >= $width {
			@content;
		}
	}
	@else {
		@media screen and (min-width: $width) {
			@content;
		}
	}
}

_typography.scss

// http://typecast.com/blog/a-more-modern-scale-for-web-typography

h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
  
  @include respond-min(min-width: 43.75em) {
      font-size: 2.5em;
      /* 2.5x body copy size = 40px */
      line-height: 1.125;
  }
  
  @include respond-min(min-width: 56.25em) {
      font-size: 3em;
      /* 3x body copy size = 48px */
      line-height: 1.05;
      /* keep to a multiple of the 20px line height 
      and something more appropriate for display headings */
  }

}