Responsive typography

typography.scss

@import "breakpoint";
@import 'modular-scale';

// Responsive variables

// Breakpoints

$breakpoint-to-ems: true;

$phone: 32em;
$tablet: 48em;
$laptop: 64em;
$large: 75em;

// Font sizes.

$ms-base: 1.2rem;
$ms-ratio: 1.414;

$p_size: ms(0);

$title_size: ms(3);

$header_1_size: ms(3);
$header_2_size: ms(2);
$header_3_size: ms(1);
$sub_footer_size: ($p_size * .75);

// Line heights

$title_line: ms(4);

$h1_line: ms(4);
$h2_line: ms(3);
$h3_line: ms(2);

$p_line: ms(1.5);
$sub_footer_line: ms(1);

// Responsive typography mixin

@mixin sizer ($font_size, $line_size, $padding) {
  @include breakpoint($laptop){
    font-size: $font_size;
    line-height: $line_size;
    padding: 0 0 $padding 0;
  }

  @include breakpoint($tablet){
    font-size: ($font_size * .9);
    line-height: ($line_size * .9);
    padding: 0 0 ($padding * .9) 0;
  }

  @include breakpoint($phone){
  font-size: ($font_size * .8);
  line-height: ($line_size * .8);
  padding: 0 0 ($padding * .8) 0;
  }
}

// Typography

h1 {
	@include sizer ($header_1_size, $h1_line, $h1_line )
	}

h2 {
	@include sizer ($header_2_size, $h2_line, $h2_line )		
	}

h3 {
	@include sizer ($header_3_size, $h3_line, $h3_line )
	}
	
p {
	@include sizer ($p_size, $p_line, $p_line )
	}