diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index 4d72afaf51dd..f448733bbc5e 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -15,52 +15,40 @@
 
 // Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
-@include mat-core();
-@include angular-material-mdc-typography(mat-mdc-typography-config());
-@include mat-popover-edit-typography(mat-typography-config());
-
-// Include base styles for strong focus indicators.
-.demo-strong-focus {
-  @include mat-strong-focus-indicators();
-  @include mat-mdc-strong-focus-indicators();
-}
-
-// Define the default theme (same as the example above).
+// Define the default (light) theme.
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
 $candy-app-theme: mat-light-theme((
-  color: (
-    primary: $candy-app-primary,
-    accent: $candy-app-accent
-  )
+    // Define the default colors for our app.
+    color: (
+        primary: $candy-app-primary,
+        accent: $candy-app-accent
+    ),
+    // Define the default typography for our app.
+    typography: mat-mdc-typography-config(),
+    // Define the default density level for our app.
+    density: 0,
 ));
 
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include mat-core($candy-app-theme);
+
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
 @include angular-material-mdc-theme($candy-app-theme);
 @include mat-column-resize-theme($candy-app-theme);
 @include mat-popover-edit-theme($candy-app-theme);
-
 // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
 @include mat-mdc-slider-theme($candy-app-theme);
 
-// Define an alternate dark theme.
-$dark-primary: mat-palette($mat-blue-grey);
-$dark-accent: mat-palette($mat-amber, A200, A100, A400);
-$dark-warn: mat-palette($mat-deep-orange);
-$dark-theme: mat-dark-theme((
-  color: (
-    primary: $dark-primary,
-    accent: $dark-accent,
-    warn: $dark-warn
-  )
-));
-
-// Include the default theme for focus indicators.
 .demo-strong-focus {
+  // Include base styles for strong focus indicators.
+  @include mat-strong-focus-indicators();
+  @include mat-mdc-strong-focus-indicators();
+
+  // Include the default theme for focus indicators.
   @include mat-strong-focus-indicators-theme($candy-app-theme);
   @include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
 }
@@ -70,17 +58,25 @@ $dark-theme: mat-dark-theme((
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include angular-material-color($dark-theme);
-  @include angular-material-mdc-color($dark-theme);
-  @include mat-column-resize-color($dark-theme);
-  @include mat-popover-edit-color($dark-theme);
-  @include mat-mdc-slider-color($dark-theme);
-}
+  // Create the color palettes used in our dark theme.
+  $dark-primary: mat-palette($mat-blue-grey);
+  $dark-accent: mat-palette($mat-amber, A200, A100, A400);
+  $dark-warn: mat-palette($mat-deep-orange);
+  $dark-colors: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-// Include the dark theme for focus indicators.
-.demo-unicorn-dark-theme.demo-strong-focus {
-  @include mat-strong-focus-indicators-color($dark-theme);
-  @include mat-mdc-strong-focus-indicators-color($dark-theme);
+  // Include the dark theme color styles.
+  @include angular-material-color($dark-colors);
+  @include angular-material-mdc-color($dark-colors);
+  @include mat-column-resize-color($dark-colors);
+  @include mat-popover-edit-color($dark-colors);
+  // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
+  @include mat-mdc-slider-color($dark-colors);
+
+  // Include the dark theme colors for focus indicators.
+  .demo-strong-focus {
+    @include mat-strong-focus-indicators-color($dark-colors);
+    @include mat-mdc-strong-focus-indicators-color($dark-colors);
+  }
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.
diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
index 16c706fbac83..1bb882d9b5ca 100644
--- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
+++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
@@ -1,6 +1,7 @@
 @import '@material/menu-surface/mixins.import';
 @import '@material/list/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-autocomplete-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -11,7 +12,7 @@
 }
 
 @mixin mat-mdc-autocomplete-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 
diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
index 8a45866656eb..d0c6474d9967 100644
--- a/src/material-experimental/mdc-button/_button-theme.scss
+++ b/src/material-experimental/mdc-button/_button-theme.scss
@@ -5,6 +5,7 @@
 @import '@material/icon-button/mixins.import';
 @import '@material/theme/mixins.import';
 @import '../../material/core/ripple/ripple';
+@import '../../material/core/typography/typography';
 @import '../mdc-helpers/mdc-helpers';
 
 // Selector for the element that has a background color and opacity applied to its ::before and
@@ -167,7 +168,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-button-without-ripple($query: $mat-typography-styles-query);
   }
@@ -253,7 +254,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-fab-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
   }
@@ -326,7 +327,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-icon-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
   }
diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss
index ba596c5bc2eb..a12b9a24f904 100644
--- a/src/material-experimental/mdc-card/_card-theme.scss
+++ b/src/material-experimental/mdc-card/_card-theme.scss
@@ -3,6 +3,7 @@
 @import '@material/card/variables.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-card-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -32,7 +33,7 @@
 }
 
 @mixin mat-mdc-card-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-card-without-ripple($query: $mat-typography-styles-query);
 
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
index eb44c922a575..7b0a2b28ce9b 100644
--- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
+++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
@@ -8,6 +8,7 @@
 @import '@material/ripple/variables.import';
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
@@ -110,7 +111,7 @@
 }
 
 @mixin mat-mdc-checkbox-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
index d3c906916cf0..0b5b728fec4d 100644
--- a/src/material-experimental/mdc-chips/_chips-theme.scss
+++ b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -1,6 +1,7 @@
 @import '@material/chips/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/theme/functions.import';
+@import '../../material/core/typography/typography';
 
 @mixin _selected-color($color) {
   @include mdc-chip-fill-color($color, $query: $mat-theme-styles-query);
@@ -70,7 +71,7 @@
 }
 
 @mixin mat-mdc-chips-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
   @include mat-using-mdc-typography($config) {
     @include mdc-chip-without-ripple($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss
index dee79df87107..f183b51e1d87 100644
--- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss
+++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss
@@ -4,6 +4,8 @@
 @import '@material/theme/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';
+@import '../../../material/core/typography/typography';
+
 
 @mixin mat-mdc-optgroup-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -20,7 +22,7 @@
 }
 
 @mixin mat-mdc-optgroup-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
 }
 
 @mixin mat-mdc-optgroup-density($config-or-theme) {
diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss
index 2994f60606b3..7891e82e51d5 100644
--- a/src/material-experimental/mdc-core/option/_option-theme.scss
+++ b/src/material-experimental/mdc-core/option/_option-theme.scss
@@ -5,6 +5,7 @@
 @import '@material/typography/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';
+@import '../../../material/core/typography/typography';
 
 @mixin mat-mdc-option-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -43,7 +44,7 @@
 }
 
 @mixin mat-mdc-option-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
 
   @include mat-using-mdc-typography($config) {
     // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss
index 22f85a5a9d47..e0c7ecf84c57 100644
--- a/src/material-experimental/mdc-dialog/_dialog-theme.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss
@@ -1,5 +1,6 @@
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/dialog/mixins.import';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-dialog-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -9,7 +10,7 @@
 }
 
 @mixin mat-mdc-dialog-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-dialog-core-styles($query: $mat-typography-styles-query);
   }
diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss
index 32589e1b4ddf..461afa6bddaa 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -6,6 +6,7 @@
 @import '@material/textfield/variables.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 @import 'form-field-density';
 @import 'form-field-subscript';
 @import 'form-field-focus-overlay';
@@ -60,7 +61,7 @@
 }
 
 @mixin mat-mdc-form-field-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
index 7d2cfa75be61..a0bb89f2ea7f 100644
--- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss
+++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
@@ -17,84 +17,26 @@ $mat-base-styles-without-animation-query:
 $mat-theme-styles-query: color;
 $mat-typography-styles-query: typography;
 
-// Mappings between Angular Material and MDC's typography levels.
-// TODO: delete once all MDC components have migrated to using the 2018 mappings.
-$mat-typography-2014-level-mappings: (
-  mdc-to-mat: (
-    headline1: display-4,
-    headline2: display-3,
-    headline3: display-2,
-    headline4: display-1,
-    headline5: headline,
-    headline6: title,
-    subtitle1: subheading-2,
-    subtitle2: subheading-1,
-    body1: body-2,
-    body2: body-1,
+// Mappings from Angular Material's typography levels to MDC's typography levels.
+$mat-typography-mdc-level-mappings: (
+    headline-1: headline1,
+    headline-2: headline2,
+    headline-3: headline3,
+    headline-4: headline4,
+    headline-5: headline5,
+    headline-6: headline6,
+    subtitle-1: subtitle1,
+    subtitle-2: subtitle2,
+    body-1: body1,
+    body-2: body2,
     caption: caption,
     button: button,
-    overline: null
-  ),
-  mat-to-mdc: (
-    display-4: headline1,
-    display-3: headline2,
-    display-2: headline3,
-    display-1: headline4,
-    headline: headline5,
-    title: headline6,
-    subheading-2: subtitle1,
-    subheading-1: subtitle2,
-    body-2: body1,
-    body-1: body2,
-    caption: caption,
-    button: button,
-    input: null
-  )
-);
-
-// Mappings between Angular Material and MDC's typography levels.
-$mat-typography-2018-level-mappings: (
-    // Maps from MDC typography levels (e.g. body1) to Angular Material typography levels
-    // (e.g. body-1).
-    mdc-to-mat: (
-        headline1: headline-1,
-        headline2: headline-2,
-        headline3: headline-3,
-        headline4: headline-4,
-        headline5: headline-5,
-        headline6: headline-6,
-        subtitle1: subtitle-1,
-        subtitle2: subtitle-2,
-        body1: body-1,
-        body2: body-2,
-        caption: caption,
-        button: button,
-        overline: overline
-    ),
-    // Maps from Angular Material typography levels (e.g. body-1) to MDC typography levels
-    // (e.g. body1).
-    mat-to-mdc: (
-        headline-1: headline1,
-        headline-2: headline2,
-        headline-3: headline3,
-        headline-4: headline4,
-        headline-5: headline5,
-        headline-6: headline6,
-        subtitle-1: subtitle1,
-        subtitle-2: subtitle2,
-        body-1: body1,
-        body-2: body2,
-        caption: caption,
-        button: button,
-        overline: overline
-    )
+    overline: overline
 );
 
 // Converts an Angular Material typography level config to an MDC one.
 @function mat-typography-level-config-to-mdc($mat-config, $mat-level) {
-  $mappings: if(mat-private-typography-is-2018-config($mat-config),
-      $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
-  $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level);
+  $mdc-level: map-get($mat-typography-mdc-level-mappings, $mat-level);
 
   @return map-merge(
       if($mdc-level,
@@ -119,13 +61,10 @@ $mat-typography-2018-level-mappings: (
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function mat-typography-config-to-mdc($mat-config: mat-typography-config()) {
+@function mat-typography-config-to-mdc($mat-config) {
   $mdc-config: ();
 
-  $mappings: if(mat-private-typography-is-2018-config($mat-config),
-      $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
-
-  @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) {
+  @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
     $mdc-config: map-merge(
         $mdc-config,
         ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level)));
diff --git a/src/material-experimental/mdc-input/_input-theme.scss b/src/material-experimental/mdc-input/_input-theme.scss
index 00f6ee264955..360c79568eaf 100644
--- a/src/material-experimental/mdc-input/_input-theme.scss
+++ b/src/material-experimental/mdc-input/_input-theme.scss
@@ -1,4 +1,5 @@
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-input-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -6,7 +7,7 @@
 }
 
 @mixin mat-mdc-input-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {}
 }
 
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
index 1299c23da730..90e26eeb8e6d 100644
--- a/src/material-experimental/mdc-list/_list-theme.scss
+++ b/src/material-experimental/mdc-list/_list-theme.scss
@@ -5,6 +5,7 @@
 @import './interactive-list-theme';
 @import './list-option-theme';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 
 // TODO: implement mat-list[dense] once density system is in master
@@ -52,7 +53,7 @@
 }
 
 @mixin mat-mdc-list-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-list-without-ripple($query: $mat-typography-styles-query);
     @include mat-mdc-private-list-option-typography-styles();
diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss
index 8e8c40d83b01..86b57de40a61 100644
--- a/src/material-experimental/mdc-menu/_menu-theme.scss
+++ b/src/material-experimental/mdc-menu/_menu-theme.scss
@@ -6,6 +6,7 @@
 @import '@material/theme/mixins.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-menu-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -44,7 +45,7 @@
 }
 
 @mixin mat-mdc-menu-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 
diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss
index baeec5434dc6..3d9ff03f0a90 100644
--- a/src/material-experimental/mdc-paginator/_paginator-theme.scss
+++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss
@@ -2,6 +2,7 @@
 @import '@material/typography/mixins.import';
 @import '../../material/core/theming/theming';
 @import '../../material/core/density/private/compatibility';
+@import '../../material/core/typography/typography';
 @import '../mdc-helpers/mdc-helpers';
 @import './paginator-variables';
 
@@ -47,7 +48,7 @@
 }
 
 @mixin mat-mdc-paginator-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
 
   @include mat-using-mdc-typography($config) {
     .mat-mdc-paginator {
diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
index 09f32a3776fa..fd32eb763bbd 100644
--- a/src/material-experimental/mdc-radio/_radio-theme.scss
+++ b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -3,6 +3,7 @@
 @import '@material/radio/mixins';
 @import '@material/radio/variables';
 @import '@material/theme/functions.import';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-radio-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -41,7 +42,7 @@
 }
 
 @mixin mat-mdc-radio-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-radio-without-ripple($query: $mat-typography-styles-query);
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss
index 9e0530afd1af..8b12f4fc2854 100644
--- a/src/material-experimental/mdc-select/_select-theme.scss
+++ b/src/material-experimental/mdc-select/_select-theme.scss
@@ -4,6 +4,7 @@
 @import '@material/select/variables.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {
@@ -81,7 +82,7 @@
 }
 
 @mixin mat-mdc-select-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 
diff --git a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
index 84de2e67a678..9b77210fefc2 100644
--- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
+++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
@@ -4,6 +4,8 @@
 @import '@material/ripple/variables.import';
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
+
 
 @mixin mat-mdc-slide-toggle-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -79,7 +81,7 @@
 }
 
 @mixin mat-mdc-slide-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-switch-without-ripple($query: $mat-typography-styles-query);
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-slider/_slider-theme.scss b/src/material-experimental/mdc-slider/_slider-theme.scss
index abe967b1dd9b..8f6ca52d9416 100644
--- a/src/material-experimental/mdc-slider/_slider-theme.scss
+++ b/src/material-experimental/mdc-slider/_slider-theme.scss
@@ -1,6 +1,7 @@
 // TODO: disabled until we implement the new MDC slider.
 // @import '@material/slider/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-slider-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -23,7 +24,7 @@
 }
 
 @mixin mat-mdc-slider-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     // TODO: disabled until we implement the new MDC slider.
     // @include mdc-slider-core-styles($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
index 87788d939ac3..079f704b07ea 100644
--- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
+++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
@@ -2,6 +2,7 @@
 @import '@material/theme/functions.import';
 @import '@material/snackbar/variables.import';
 @import '@material/snackbar/mixins.import';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-snack-bar-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -40,7 +41,7 @@
 }
 
 @mixin mat-mdc-snack-bar-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-snackbar-core-styles($query: $mat-typography-styles-query);
   }
diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss
index 083294d1d6cc..264c13d5a3f4 100644
--- a/src/material-experimental/mdc-table/_table-theme.scss
+++ b/src/material-experimental/mdc-table/_table-theme.scss
@@ -2,6 +2,7 @@
 @import '@material/theme/functions.import';
 @import '@material/data-table/variables.import';
 @import '@material/data-table/mixins.import';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-table-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -43,7 +44,7 @@
 }
 
 @mixin mat-mdc-table-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-data-table-core-styles($query: $mat-typography-styles-query);
   }
diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss
index 14851e61ea0c..9cf74f01ed5a 100644
--- a/src/material-experimental/mdc-tabs/_tabs-theme.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss
@@ -5,6 +5,7 @@
 @import '@material/tab/variables.import';
 @import '@material/tab-bar/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-tabs-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -102,7 +103,7 @@
 }
 
 @mixin mat-mdc-tabs-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-tab-without-ripple($query: $mat-typography-styles-query);
     @include mdc-tab-indicator-core-styles($query: $mat-typography-styles-query);
diff --git a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss
index 5501e3833592..3fcb97bffd1a 100644
--- a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss
+++ b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss
@@ -1,16 +1,18 @@
 @import '../all-theme';
 @import '../../mdc-typography/all-typography';
 
-// Include non-theme styles for core.
-@include mat-core();
-
 // Define a theme.
 $primary: mat-palette($mat-indigo);
 $accent:  mat-palette($mat-pink, A200, A100, A400);
 
-$theme: mat-light-theme($primary, $accent);
+$theme: (
+    color: mat-light-theme($primary, $accent),
+    typography: mat-mdc-typography-config()
+);
+
+// Include non-theme styles for core.
+@include mat-core($theme);
 
 // Include all theme styles for the components.
-@include angular-material-mdc-theme($theme);
-@include angular-material-mdc-typography();
 @include mat-core-theme($theme);
+@include angular-material-mdc-theme($theme);
diff --git a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
index dd7887a692c5..c3f5c1ca3502 100644
--- a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
+++ b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
@@ -9,7 +9,7 @@
 }
 
 @mixin mat-mdc-tooltip-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include tooltip.core-styles($query: $mat-typography-styles-query);
   }
diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss
index ef77c4ce61b3..71bfc5387f06 100644
--- a/src/material-experimental/popover-edit/_popover-edit.scss
+++ b/src/material-experimental/popover-edit/_popover-edit.scss
@@ -3,6 +3,7 @@
 @import '../../material/core/style/private';
 @import '../../material/core/theming/palette';
 @import '../../material/core/theming/theming';
+@import '../../material/core/typography/typography';
 @import '../../material/core/typography/typography-utils';
 
 @function mat-edit-hover-content-background($direction, $background-color) {
@@ -143,7 +144,7 @@
 }
 
 @mixin mat-popover-edit-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   [mat-edit-title] {
     @include mat-typography-level-to-styles($config, title);
   }
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index 44613fa7110f..aa5a06272e2e 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -3,6 +3,7 @@
 // no style sheet support for directives.
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../../cdk/a11y/a11y';
 
@@ -188,7 +189,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 }
 
 @mixin mat-badge-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-badge-content {
     font-weight: $mat-badge-font-weight;
     font-size: $mat-badge-font-size;
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
index e3e175ce615d..43cc0d13affe 100644
--- a/src/material/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
@@ -16,7 +17,7 @@
 }
 
 @mixin mat-bottom-sheet-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-bottom-sheet-container {
     @include mat-typography-level-to-styles($config, body-1);
   }
diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
index 7c2633a40293..11fae8141635 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/src/material/button-toggle/_button-toggle-theme.scss
@@ -2,6 +2,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/density/private/compatibility';
 @import './button-toggle-variables';
@@ -85,7 +86,7 @@
 }
 
 @mixin mat-button-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-button-toggle {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 9605e5e5bb5a..544ef0d3f198 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/theming';
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 $_mat-button-ripple-opacity: 0.1;
@@ -161,7 +162,7 @@ $_mat-button-ripple-opacity: 0.1;
 }
 
 @mixin mat-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
   .mat-flat-button, .mat-fab, .mat-mini-fab {
     font: {
diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss
index c4cd92551cd6..227cd555513c 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -26,7 +27,7 @@
 }
 
 @mixin mat-card-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-card {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index f438ee69535e..13234bfccb03 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -96,7 +97,7 @@
 }
 
 @mixin mat-checkbox-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-checkbox {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index 309a55e058dd..ccab71cad70a 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 $mat-chip-remove-font-size: 18px;
@@ -87,7 +88,7 @@ $mat-chip-remove-font-size: 18px;
 }
 
 @mixin mat-chips-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-chip {
     font-size: mat-font-size($config, body-2);
     font-weight: mat-font-weight($config, body-2);
diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss
index 763702b92075..c8f0f85f0623 100644
--- a/src/material/core/option/_optgroup-theme.scss
+++ b/src/material/core/option/_optgroup-theme.scss
@@ -1,5 +1,6 @@
 @import '../theming/palette';
 @import '../theming/theming';
+@import '../typography/typography';
 @import '../typography/typography-utils';
 
 @mixin mat-optgroup-color($config-or-theme) {
@@ -16,7 +17,7 @@
 }
 
 @mixin mat-optgroup-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-optgroup-label {
     @include mat-typography-level-to-styles($config, body-2);
   }
diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss
index 7fc1a8c9d8c7..103659530c1c 100644
--- a/src/material/core/option/_option-theme.scss
+++ b/src/material/core/option/_option-theme.scss
@@ -1,5 +1,6 @@
 @import '../theming/palette';
 @import '../theming/theming';
+@import '../typography/typography';
 @import '../typography/typography-utils';
 
 @mixin mat-option-color($config-or-theme) {
@@ -47,7 +48,7 @@
 }
 
 @mixin mat-option-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-option {
     font: {
       family: mat-font-family($config);
diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss
index 22b4650b2f00..f1c545e47844 100644
--- a/src/material/core/typography/_typography.scss
+++ b/src/material/core/typography/_typography.scss
@@ -83,22 +83,35 @@
 // produces a normalized typography config for the 2014 Material Design typography system.
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
 @function mat-private-typography-to-2014-config($config) {
-  @if mat-private-typography-is-2018-config($config) {
-    @return mat-typography-config(
-        $display-4: map-get($config, headline-1),
-        $display-3: map-get($config, headline-2),
-        $display-2: map-get($config, headline-3),
-        $display-1: map-get($config, headline-4),
-        $headline: map-get($config, headline-5),
-        $title: map-get($config, headline-6),
-        $subheading-2: map-get($config, subtitle-1),
-        $subheading-1: map-get($config, subtitle-2),
-        $body-2: map-get($config, body-1),
-        $body-1: map-get($config, body-2),
-        $button: map-get($config, button),
-        $caption: map-get($config, caption),
+  @if $config == null {
+    @return null;
+  }
+  @if not mat-private-typography-is-2014-config($config) {
+    $args: (
+        display-4: map-get($config, headline-1),
+        display-3: map-get($config, headline-2),
+        display-2: map-get($config, headline-3),
+        display-1: map-get($config, headline-4),
+        headline: map-get($config, headline-5),
+        title: map-get($config, headline-6),
+        subheading-2: map-get($config, subtitle-1),
+        subheading-1: map-get($config, subtitle-2),
+        body-2: map-get($config, body-1),
+        body-1: map-get($config, body-2),
+        button: map-get($config, button),
+        caption: map-get($config, caption),
     );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map-merge($non-null-args, ($key: $value));
+      }
+    }
+    @return mat-typography-config($non-null-args...);
   }
   @return $config;
 }
@@ -108,6 +121,9 @@
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
 @function mat-private-typography-to-2018-config($config) {
+  @if $config == null {
+    @return null;
+  }
   @if mat-private-typography-is-2014-config($config) {
     @return (
         headline-1: map-get($config, display-4),
@@ -122,6 +138,9 @@
         body-2: map-get($config, body-1),
         button: map-get($config, button),
         caption: map-get($config, caption),
+        overline: if(map-get($config, overline), map-get($config, overline),
+            mat-typography-level(12px, 32px, 500)
+        )
     );
   }
   @return $config;
@@ -129,7 +148,9 @@
 
 // Adds the base typography styles, based on a config.
 /* stylelint-disable-next-line material/theme-mixin-api */
-@mixin mat-base-typography($config, $selector: '.mat-typography') {
+@mixin mat-base-typography($config-or-theme, $selector: '.mat-typography') {
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
+
   .mat-h1, .mat-headline, #{$selector} h1 {
     @include mat-typography-level-to-styles($config, headline);
     margin: 0 0 16px;
diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss
index 12687a3bc7ea..d7b941fe483c 100644
--- a/src/material/datepicker/_datepicker-theme.scss
+++ b/src/material/datepicker/_datepicker-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -179,7 +180,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 }
 
 @mixin mat-datepicker-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-calendar {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss
index fb6d8a425807..ec4656e7e6b1 100644
--- a/src/material/dialog/_dialog-theme.scss
+++ b/src/material/dialog/_dialog-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -17,7 +18,7 @@
 }
 
 @mixin mat-dialog-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-dialog-title {
     @include mat-typography-level-to-styles($config, title);
   }
diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss
index 5f52f956822c..c3023993685c 100644
--- a/src/material/expansion/_expansion-theme.scss
+++ b/src/material/expansion/_expansion-theme.scss
@@ -2,6 +2,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import './expansion-variables';
 @import './expansion-mixins';
@@ -54,7 +55,7 @@
 }
 
 @mixin mat-expansion-panel-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-expansion-panel-header {
     font: {
       family: mat-font-family($config, subheading-1);
diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss
index a20f317f4214..b3b14d56d238 100644
--- a/src/material/form-field/_form-field-fill-theme.scss
+++ b/src/material/form-field/_form-field-fill-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/form-common';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -57,7 +58,7 @@ $mat-form-field-fill-dedupe: 0;
 }
 
 @mixin mat-form-field-fill-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
   // The amount to scale the font for the floating label and subscript.
diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss
index 91ff3b23299e..80db0a7399cd 100644
--- a/src/material/form-field/_form-field-legacy-theme.scss
+++ b/src/material/form-field/_form-field-legacy-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/form-common';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -69,7 +70,7 @@ $mat-form-field-legacy-dedupe: 0;
 }
 
 @mixin mat-form-field-legacy-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
   // The amount to scale the font for the floating label and subscript.
diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss
index 088845169d5c..41bc281bbfae 100644
--- a/src/material/form-field/_form-field-outline-theme.scss
+++ b/src/material/form-field/_form-field-outline-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/form-common';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -80,7 +81,7 @@ $mat-form-field-outline-dedupe: 0;
 }
 
 @mixin mat-form-field-outline-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
   // The amount to scale the font for the floating label and subscript.
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index 74ace20528eb..b87ab4698b02 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/form-common';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 @import './form-field-fill-theme.scss';
@@ -130,7 +131,7 @@ $mat-form-field-dedupe: 0;
 }
 
 @mixin mat-form-field-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
 
diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss
index cb8d98a8b406..c09ccc3ad21a 100644
--- a/src/material/grid-list/_grid-list-theme.scss
+++ b/src/material/grid-list/_grid-list-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/style/list-common';
 
@@ -8,7 +9,7 @@
 @mixin mat-grid-list-color($config-or-theme) {}
 
 @mixin mat-grid-list-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-grid-tile-header,
   .mat-grid-tile-footer {
     @include mat-line-base(mat-font-size($config, caption));
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index 6e728383df2b..355356d42be2 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/form-common';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/style/vendor-prefixes';
 
@@ -59,7 +60,7 @@
 }
 
 @mixin mat-input-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
 
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index e49df6cd64c0..880b33c93845 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/style/list-common';
 
@@ -43,7 +44,7 @@
 }
 
 @mixin mat-list-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   $font-family: mat-font-family($config);
 
   .mat-list-item {
diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss
index f4d982b29283..bf30ae64e124 100644
--- a/src/material/menu/_menu-theme.scss
+++ b/src/material/menu/_menu-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -43,7 +44,7 @@
 }
 
 @mixin mat-menu-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-menu-item {
     font: {
       family: mat-font-family($config, body-1);
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index 8ca4570552d9..22ce4fd6b2b7 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/density/private/compatibility';
 @import './paginator-variables';
@@ -40,7 +41,7 @@
 }
 
 @mixin mat-paginator-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-paginator,
   .mat-paginator-page-size .mat-select-trigger {
     font: {
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index b211ae2d77ac..b27f0cae4da6 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 @mixin _mat-radio-color($palette) {
@@ -68,7 +69,7 @@
 }
 
 @mixin mat-radio-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-radio-button {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss
index c64a029f682d..28c40e500287 100644
--- a/src/material/select/_select-theme.scss
+++ b/src/material/select/_select-theme.scss
@@ -2,6 +2,7 @@
 @import '../core/theming/theming';
 @import '../core/style/private';
 @import '../core/style/form-common';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -64,7 +65,7 @@
 }
 
 @mixin mat-select-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
 
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 9d45d46078ca..fc8dc66bea54 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
@@ -73,7 +74,7 @@
 }
 
 @mixin mat-slide-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-slide-toggle-content {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index facd274e72c0..51ebbbf5b62f 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 @mixin _mat-slider-inner-content-theme($palette) {
@@ -164,7 +165,7 @@
 }
 
 @mixin mat-slider-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-slider-thumb-label-text {
     font: {
       family: mat-font-family($config);
diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss
index 7ead10607829..c97d88af5336 100644
--- a/src/material/snack-bar/_snack-bar-theme.scss
+++ b/src/material/snack-bar/_snack-bar-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/theming/theming';
 @import '../core/theming/palette';
@@ -23,7 +24,7 @@
 }
 
 @mixin mat-snack-bar-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-simple-snackbar {
     font: {
       family: mat-font-family($config, body-1);
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index e8c197c465b2..1e18e96fd29f 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/density/private/compatibility';
 @import './stepper-variables';
@@ -105,7 +106,7 @@
 }
 
 @mixin mat-stepper-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-stepper-vertical, .mat-stepper-horizontal {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss
index 962f07ca6a13..30818d2dfc8e 100644
--- a/src/material/table/_table-theme.scss
+++ b/src/material/table/_table-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 @mixin mat-table-color($config-or-theme) {
@@ -33,7 +34,7 @@
 }
 
 @mixin mat-table-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-table {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index 7f2e43df6a39..c0112e253c31 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 @mixin mat-tabs-color($config-or-theme) {
@@ -135,7 +136,7 @@
 }
 
 @mixin mat-tabs-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-tab-group {
     font-family: mat-font-family($config);
   }
diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss
index 025237fee89b..8bb5cae6976a 100644
--- a/src/material/toolbar/_toolbar-theme.scss
+++ b/src/material/toolbar/_toolbar-theme.scss
@@ -2,6 +2,7 @@
 @import '../core/style/variables';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import './toolbar-variables';
 
@@ -68,7 +69,7 @@
 }
 
 @mixin mat-toolbar-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-toolbar,
   .mat-toolbar h1,
   .mat-toolbar h2,
diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index 1d5250433687..83efeeae27ee 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 $mat-tooltip-target-height: 22px;
@@ -21,7 +22,7 @@ $mat-tooltip-handset-vertical-padding:
 }
 
 @mixin mat-tooltip-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-tooltip {
     font-family: mat-font-family($config);
     font-size: $mat-tooltip-font-size;
diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss
index 9f9a059d9934..371f034d94a9 100644
--- a/src/material/tree/_tree-theme.scss
+++ b/src/material/tree/_tree-theme.scss
@@ -1,6 +1,7 @@
 @import '../core/density/private/compatibility';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import  './tree-variables';
 
@@ -20,7 +21,7 @@
 }
 
 @mixin mat-tree-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-tree {
     font-family: mat-font-family($config);
   }
diff --git a/tools/stylelint/theme-mixin-api.ts b/tools/stylelint/theme-mixin-api.ts
index fc5169efbb30..9a11c60f88b2 100644
--- a/tools/stylelint/theme-mixin-api.ts
+++ b/tools/stylelint/theme-mixin-api.ts
@@ -157,8 +157,10 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
       const expectedProperty = type === 'density' ? '$density-scale' : '$config';
       const expectedValues = [`mat-get-${type}-config($config-or-theme)`];
       if (type === 'typography') {
+        expectedValues.shift();
         expectedValues.unshift(
-            'mat-private-typography-normalized-config(mat-get-typography-config($config-or-theme))'
+            'mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme))',
+            'mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme))',
         );
       }
       let configExtractionNode: Declaration|null = null;