typography

.my-component {
  margin: em(10px) em(5px);
}

// Output
.my-component {
  margin: 0.625em 0.3125em;
}

.my-component {
  margin: rem(10px) rem(5px);
}

// Output
.my-component {
  margin: 0.625rem 0.3125rem;
}

.my-component {
  margin: px(3rem);
}

// Output
.my-component {
  margin: 48px;
}

$main_navigation: type-style(
   $font-size: rem(14px),
   $font-weight: 600,
   $letter-spacing: rem(.1px),
   $line-height: rem(14px),
   $text-transform: none,
);

// Use the type-style() mixin to consume the new type style produced from the type-style() function.
.main-nav {
  @include type-style($main_navigation);
}

// First define type styles to use
$my-body-1: type-style(
   $font-size: rem(14px),
);

// Use the type style map to override one of the existing maps
$type-scale: type-scale(
  ...
  $body-1: $my-body-1,
  ...
);

$h1-type-scale: type-scale-category($type-scale, 'h1');

.fancy-h1 {
   @include type-style('h1');

   color: mediumvioletred;
}

$h1-style: type-scale-category($type-scale, 'h1');
@include type-style-vars('h1', $h1-style);

.ig-typography {
  @include type-style-elements();
}

.ig-typography {
  @include type-style-classes();
}

$h1-style: type-scale-category($type-scale, 'h1');
@include font-var('h1-font', $h1-style);

@include typography('Roboto', $my-type-scale);