typo.scss

// Set Font-Sizes for Elements

$responsivetypo: (

  // Default Breakpoint (Mobile First)
  'default': (
    'tiny': (
      'fs': 12px, 'lh': 1.5,
    ),
    'p': (
      'fs': 14px, 'lh': 1.5,
    ),
    'h1': (
      'fs': 35px, 'lh': 1.25,
    ),
    'h2': (
      'fs': 25px, 'lh': 1.25,
    ),
    'h3': (
      'fs': 18px, 'lh': 1.25,
    ),
    'h4': (
      'fs': 14px, 'lh': 1.25,
    ),
  ),

  // Breakpoint Small
  'small': (
    'tiny': (
      'fs': 12px, 'lh': 1.5,
    ),
    'p': (
      'fs': 16px, 'lh': 1.5,
    ),
    'h1': (
      'fs': 80px, 'lh': 1.15,
    ),
    'h2': (
      'fs': 45px, 'lh': 1.15,
    ),
    'h3': (
      'fs': 20px, 'lh': 1.15,
    ),
    'h4': (
      'fs': 16px, 'lh': 1.25,
    ),
  )
);


@mixin typo($break: 'default', $type: 'p', $map: $responsivetypo) {
  // Get the Submap
  // $submap    : map-get(map-get($map, $break), $type); // Shorthand Version

  $firstlevel   : map-get($map, $break);        // get Breakpoint
  $secondlevel  : map-get($firstlevel, $type);  // get Element

  // Generate the Declaration
  font-size     : map-get($secondlevel,'fs');   // get font-size
  line-height   : map-get($secondlevel, 'lh');  // get line-height
}

// Example for Headlines

h1, h2, h3, h4, h5, h6 {
  font-family: font('headline');
  @include typo('default', 'p');
  text-transform: uppercase;
}

h1 {
  @include typo('default', 'h1');

  @include breakpoint('small') {
    @include typo('small', 'h1');
  }
}

h2 {
  @include typo('default', 'h2');

  @include breakpoint('small') {
    @include typo('small', 'h2');
  }
}

h3 {
  @include typo('default', 'h3');

  @include breakpoint('small') {
    @include typo('small', 'h3');
  }
}

h4 {
  @include typo('default', 'h4');

  @include breakpoint('small') {
    @include typo('small', 'h4');
  }
}