diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index 48cbeb066954..cbee8797ac72 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -15,56 +15,43 @@
 @use '../material/core/core';
 @use '../material/core/theming/palette';
 @use '../material/core/theming/theming';
-@use '../material/core/typography/typography';
 
 // 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 core.core();
-@include all-typography.angular-material-mdc-typography(all-typography.config());
-@include popover-edit.typography(typography.config());
-
-// Include base styles for strong focus indicators.
-.demo-strong-focus {
-  @include focus-indicators-focus-indicators.strong-focus-indicators();
-  @include focus-indicators.strong-focus-indicators();
-}
-
-// Define the default theme (same as the example above).
+// Define the default (light) theme.
 $candy-app-primary: theming.palette(palette.$indigo);
 $candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
 $candy-app-theme: theming.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: all-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 core.core($candy-app-theme);
+
 // Include the default theme styles.
 @include theming-all-theme.angular-material-theme($candy-app-theme);
 @include all-theme.angular-material-mdc-theme($candy-app-theme);
 @include column-resize.theme($candy-app-theme);
 @include popover-edit.theme($candy-app-theme);
-
 // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
 @include slider-theme.theme($candy-app-theme);
 
-// Define an alternate dark theme.
-$dark-primary: theming.palette(palette.$blue-grey);
-$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
-$dark-warn: theming.palette(palette.$deep-orange);
-$dark-theme: theming.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 focus-indicators-focus-indicators.strong-focus-indicators();
+  @include focus-indicators.strong-focus-indicators();
+
+  // Include the default theme for focus indicators.
   @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
   @include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
 }
@@ -74,17 +61,25 @@ $dark-theme: theming.dark-theme((
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include color-all-color.angular-material-color($dark-theme);
-  @include all-color.angular-material-mdc-color($dark-theme);
-  @include column-resize.color($dark-theme);
-  @include popover-edit.color($dark-theme);
-  @include slider-theme.color($dark-theme);
-}
+  // Create the color palettes used in our dark theme.
+  $dark-primary: theming.palette(palette.$blue-grey);
+  $dark-accent: theming.palette(palette.$amber, A200, A100, A400);
+  $dark-warn: theming.palette(palette.$deep-orange);
+  $dark-colors: theming.dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-// Include the dark theme for focus indicators.
-.demo-unicorn-dark-theme.demo-strong-focus {
-  @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme);
-  @include focus-indicators.strong-focus-indicators-color($dark-theme);
+  // Include the dark theme color styles.
+  @include color-all-color.angular-material-color($dark-colors);
+  @include all-color.angular-material-mdc-color($dark-colors);
+  @include column-resize.color($dark-colors);
+  @include popover-edit.color($dark-colors);
+  // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
+  @include slider-theme.color($dark-colors);
+
+  // Include the dark theme colors for focus indicators.
+  .demo-strong-focus {
+    @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-colors);
+    @include focus-indicators.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/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss
index e5588d0f139c..1db7940a2cfe 100644
--- a/src/material-experimental/popover-edit/_popover-edit.scss
+++ b/src/material-experimental/popover-edit/_popover-edit.scss
@@ -4,6 +4,7 @@
 @use '../../material/core/style/private';
 @use '../../material/core/theming/palette';
 @use '../../material/core/theming/theming';
+@use '../../material/core/typography/typography';
 @use '../../material/core/typography/typography-utils';
 
 @function mat-edit-hover-content-background($direction, $background-color) {
@@ -145,7 +146,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   [mat-edit-title] {
     @include typography-utils.level-to-styles($config, title);
   }
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index 8ef6800a4de5..74c77ff62a22 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -6,6 +6,7 @@
 @use 'sass:meta';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../../cdk/a11y/a11y';
 
@@ -191,7 +192,7 @@ $large-size: $default-size + 6;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-badge-content {
     font-weight: $font-weight;
     font-size: $font-size;
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
index 93d9ca69137a..3661597cda36 100644
--- a/src/material/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
@@ -17,7 +18,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-bottom-sheet-container {
     @include typography-utils.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 0c5d74ca502f..878f7b039494 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/src/material/button-toggle/_button-toggle-theme.scss
@@ -3,6 +3,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/density/private/compatibility';
 @use './button-toggle-variables';
@@ -86,7 +87,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-button-toggle {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 83b150e6e6ae..4d2fd4b626d0 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '../core/theming/theming';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 $_mat-button-ripple-opacity: 0.1;
@@ -163,7 +164,7 @@ $_mat-button-ripple-opacity: 0.1;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.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 c0537d452233..aed472906ca2 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -27,7 +28,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-card {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index d78f8147e7b2..8accdb1187f0 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -97,7 +98,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-checkbox {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index 55a4e4f7d81b..96fa04f53e41 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -3,6 +3,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 $chip-remove-font-size: 18px;
@@ -90,7 +91,7 @@ $chip-remove-font-size: 18px;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-chip {
     font-size: typography-utils.font-size($config, body-2);
     font-weight: typography-utils.font-weight($config, body-2);
diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss
index dc74195fe596..c30e8b1cdd8e 100644
--- a/src/material/core/option/_optgroup-theme.scss
+++ b/src/material/core/option/_optgroup-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../theming/palette';
 @use '../theming/theming';
+@use '../typography/typography';
 @use '../typography/typography-utils';
 
 @mixin color($config-or-theme) {
@@ -17,7 +18,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-optgroup-label {
     @include typography-utils.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 86067802e9e0..899e37344ba0 100644
--- a/src/material/core/option/_option-theme.scss
+++ b/src/material/core/option/_option-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../theming/palette';
 @use '../theming/theming';
+@use '../typography/typography';
 @use '../typography/typography-utils';
 
 @mixin color($config-or-theme) {
@@ -48,7 +49,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-option {
     font: {
       family: typography-utils.font-family($config);
diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss
index 921580af35ff..9933cd7e5320 100644
--- a/src/material/core/typography/_typography.scss
+++ b/src/material/core/typography/_typography.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'typography-utils';
+@use '../theming/theming';
 
 // Represents a typography level from the Material design spec.
 @function level(
@@ -84,22 +85,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 typography-to-2014-config($config) {
-  @if typography-is-2018-config($config) {
-    @return 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 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 config($non-null-args...);
   }
   @return $config;
 }
@@ -109,6 +123,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 typography-to-2018-config($config) {
+  @if $config == null {
+    @return null;
+  }
   @if typography-is-2014-config($config) {
     @return (
         headline-1: map.get($config, display-4),
@@ -123,6 +140,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),
+            level(12px, 32px, 500)
+        )
     );
   }
   @return $config;
@@ -130,7 +150,9 @@
 
 // Adds the base typography styles, based on a config.
 /* stylelint-disable-next-line material/theme-mixin-api */
-@mixin base-typography($config, $selector: '.mat-typography') {
+@mixin base-typography($config-or-theme, $selector: '.mat-typography') {
+  $config: typography-to-2014-config(theming.get-typography-config($config-or-theme));
+
   .mat-h1, .mat-headline, #{$selector} h1 {
     @include typography-utils.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 fbc0c3204d69..9d5fae630c38 100644
--- a/src/material/datepicker/_datepicker-theme.scss
+++ b/src/material/datepicker/_datepicker-theme.scss
@@ -5,6 +5,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -183,7 +184,7 @@ $calendar-weekday-table-font-size: 11px !default;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-calendar {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss
index 21c740431aad..6550cfef6151 100644
--- a/src/material/dialog/_dialog-theme.scss
+++ b/src/material/dialog/_dialog-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -18,7 +19,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-dialog-title {
     @include typography-utils.level-to-styles($config, title);
   }
diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss
index 8dfeb4164b0c..b2e0a4bcf242 100644
--- a/src/material/expansion/_expansion-theme.scss
+++ b/src/material/expansion/_expansion-theme.scss
@@ -3,6 +3,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use './expansion-variables';
 @use './expansion-mixins';
@@ -55,7 +56,7 @@
 }
 
 @mixin panel-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-expansion-panel-header {
     font: {
       family: typography-utils.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 c57f2b88c709..8c21bfbc3336 100644
--- a/src/material/form-field/_form-field-fill-theme.scss
+++ b/src/material/form-field/_form-field-fill-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -58,7 +59,7 @@ $fill-dedupe: 0;
 }
 
 @mixin fill-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: typography-utils.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 a4975dc05e7e..d8888558a882 100644
--- a/src/material/form-field/_form-field-legacy-theme.scss
+++ b/src/material/form-field/_form-field-legacy-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -70,7 +71,7 @@ $legacy-dedupe: 0;
 }
 
 @mixin legacy-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: typography-utils.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 1b5d1c94e2dc..b1fb6f9feb64 100644
--- a/src/material/form-field/_form-field-outline-theme.scss
+++ b/src/material/form-field/_form-field-outline-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -81,7 +82,7 @@ $outline-dedupe: 0;
 }
 
 @mixin outline-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: typography-utils.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 2803f2d4792a..c450193d0b12 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 @use './form-field-fill-theme.scss';
@@ -131,7 +132,7 @@ $dedupe: 0;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: typography-utils.height($config, input);
 
diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss
index 07060468def8..6783e76c1f71 100644
--- a/src/material/grid-list/_grid-list-theme.scss
+++ b/src/material/grid-list/_grid-list-theme.scss
@@ -1,5 +1,6 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/style/list-common';
 
@@ -8,7 +9,7 @@
 @mixin color($config-or-theme) {}
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-grid-tile-header,
   .mat-grid-tile-footer {
     @include list-common.base(typography-utils.font-size($config, caption));
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index 45ab7cce5cf5..af991589a5c0 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/style/vendor-prefixes';
 
@@ -60,7 +61,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: typography-utils.height($config, input);
 
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index b616d6754479..b6ae78f20714 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/style/list-common';
 
@@ -44,7 +45,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   $font-family: typography-utils.font-family($config);
 
   .mat-list-item {
diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss
index 52ff0c4ac41e..652dc643548f 100644
--- a/src/material/menu/_menu-theme.scss
+++ b/src/material/menu/_menu-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -44,7 +45,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-menu-item {
     font: {
       family: typography-utils.font-family($config, body-1);
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index cabcf7c759b1..9b5391132665 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/density/private/compatibility';
 @use './paginator-variables';
@@ -41,7 +42,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.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 ef53db2a7184..ef37c365003f 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 @mixin _mat-radio-color($palette) {
@@ -69,7 +70,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-radio-button {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss
index de5c67a52873..5a7c5ea6eddc 100644
--- a/src/material/select/_select-theme.scss
+++ b/src/material/select/_select-theme.scss
@@ -3,6 +3,7 @@
 @use '../core/theming/theming';
 @use '../core/style/private';
 @use '../core/style/form-common';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -65,7 +66,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   // The unit-less line-height from the font config.
   $line-height: typography-utils.height($config, input);
 
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 1b12b1f3c571..8600cfdf72d8 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
@@ -74,7 +75,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-slide-toggle-content {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index bed3d377bba7..49579a42da21 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 @mixin _mat-slider-inner-content-theme($palette) {
@@ -166,7 +167,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-slider-thumb-label-text {
     font: {
       family: typography-utils.font-family($config);
diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss
index 4c98160d3586..2434825ff83e 100644
--- a/src/material/snack-bar/_snack-bar-theme.scss
+++ b/src/material/snack-bar/_snack-bar-theme.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/theming/theming';
 @use '../core/theming/palette';
@@ -24,7 +25,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-simple-snackbar {
     font: {
       family: typography-utils.font-family($config, body-1);
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index 50ba996be2f0..8706fbee2980 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/density/private/compatibility';
 @use './stepper-variables';
@@ -106,7 +107,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-stepper-vertical, .mat-stepper-horizontal {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss
index 658703296bce..6d98649f18e7 100644
--- a/src/material/table/_table-theme.scss
+++ b/src/material/table/_table-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 @mixin color($config-or-theme) {
@@ -34,7 +35,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-table {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index b5b831811b97..5f70b394dbab 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 @mixin color($config-or-theme) {
@@ -136,7 +137,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-tab-group {
     font-family: typography-utils.font-family($config);
   }
diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss
index 02d24694d9af..674bccaddc9d 100644
--- a/src/material/toolbar/_toolbar-theme.scss
+++ b/src/material/toolbar/_toolbar-theme.scss
@@ -3,6 +3,7 @@
 @use '../core/style/variables';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use './toolbar-variables';
 
@@ -69,7 +70,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.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 67ccf6bb2de0..39b6534f9567 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 $target-height: 22px;
@@ -22,7 +23,7 @@ $handset-vertical-padding:
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-tooltip {
     font-family: typography-utils.font-family($config);
     font-size: $font-size;
diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss
index 8019796356e2..d1b8760f3aa4 100644
--- a/src/material/tree/_tree-theme.scss
+++ b/src/material/tree/_tree-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/density/private/compatibility';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use './tree-variables';
 
@@ -21,7 +22,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-tree {
     font-family: typography-utils.font-family($config);
   }
diff --git a/tools/stylelint/theme-mixin-api.ts b/tools/stylelint/theme-mixin-api.ts
index fc5169efbb30..3d3c8fff3597 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-get-typography-config($config-or-theme)',
         );
       }
       let configExtractionNode: Declaration|null = null;