From b763a5b649f11eaeebac63e1b48e96e9ea4a7cac Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 24 May 2022 17:47:32 +0530
Subject: [PATCH 01/12] Add space between typography controls

---
 .../src/customizer/components/google-fonts-control/style.css  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index a80e2b4f8..2cb266261 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -59,6 +59,10 @@
 		padding: 8px 0 8px 8px;
 	}
 
+	.google-fonts-control-child + .google-fonts-control-child {
+		margin-top: 20px;
+	}
+
 	.components-google-fonts-control__select {
 		flex-direction: row;
 		align-items: center;

From b4424294602c9ff35c97a27b8cdd30a800059eaa Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 24 May 2022 17:48:29 +0530
Subject: [PATCH 02/12] Change control order: Move font size as first

---
 .../components/google-fonts-control/item.js   | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index cb25cd5c6..0efa74feb 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -59,28 +59,27 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
-							{ lineHeight.label }
+							{ size.label }
 						</label>
 						<input
-							id={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
+							value={ size.value || size.default }
+							min={ size.min }
+							max={ size.max }
 							onChange={ event => {
-								const lineHeightValue = event.target.value;
+								const sizeValue = event.target.value;
 
 								onChange( {
 									id,
-									lineHeightValue,
+									sizeValue,
 									trackingValue: tracking.value,
-									sizeValue: size.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
@@ -90,27 +89,28 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
 						>
-							{ size.label }
+							{ lineHeight.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-line-height-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ size.value || size.default }
-							min={ size.min }
-							max={ size.max }
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
 							onChange={ event => {
-								const sizeValue = event.target.value;
+								const lineHeightValue = event.target.value;
 
 								onChange( {
 									id,
-									sizeValue,
+									lineHeightValue,
 									trackingValue: tracking.value,
+									sizeValue: size.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>

From 95c344d996fca219c7c04eb680f524782f3addf7 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 24 May 2022 20:00:00 +0530
Subject: [PATCH 03/12] Update test snapshot

---
 .../__snapshots__/item.test.js.snap           | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 1ffeb8f49..9cb9c2ad0 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -20,20 +20,19 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-line-height-control-headline-large"
-          id="inspector-line-height-label-headline-large"
+          htmlFor="inspector-size-control-headline-large"
+          id="inspector-size-label-headline-large"
         >
-          Line height
+          Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-line-height-control-headline-large"
-          max={64}
-          min={0}
+          id="inspector-size-control-headline-large"
+          max={96}
+          min={2}
           onChange={[Function]}
-          step="0.01"
           type="number"
-          value={0}
+          value={96}
         />
       </div>
     </div>
@@ -45,19 +44,20 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-size-control-headline-large"
-          id="inspector-size-label-headline-large"
+          htmlFor="inspector-line-height-control-headline-large"
+          id="inspector-line-height-label-headline-large"
         >
-          Size
+          Line height
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-size-control-headline-large"
-          max={96}
-          min={2}
+          id="inspector-line-height-control-headline-large"
+          max={64}
+          min={0}
           onChange={[Function]}
+          step="0.01"
           type="number"
-          value={96}
+          value={0}
         />
       </div>
     </div>

From bd46ac841553a559e70e644fa357e53b7de01112 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Thu, 26 May 2022 20:40:07 +0530
Subject: [PATCH 04/12] Revert "Merge pull request #348 from
 material-components/m3/typography"

This reverts commit 03644852116a2938f30532abb23d7c9b6800e61b, reversing
changes made to 367caaf2b22b10d17c3f1290ba847129e25306ab.
---
 plugin/assets/css/src/components/material.css |  40 +-
 plugin/assets/css/src/front-end.css           |   2 -
 plugin/assets/css/src/getting-started.css     |   2 +-
 plugin/assets/css/src/gsm/base.css            |  20 +-
 plugin/assets/css/src/material-components.css |   1 +
 plugin/assets/css/src/mixins.css              |  38 +-
 plugin/assets/css/src/overrides.css           |  54 ++
 plugin/assets/css/src/settings.css            |   2 +-
 plugin/assets/css/src/settings/base.css       |  18 +-
 plugin/assets/css/src/typography.css          |  94 ----
 plugin/assets/css/src/wizard.css              |   2 +-
 plugin/assets/css/src/wizard/base.css         |  11 +-
 plugin/assets/css/src/wizard/content.css      |  12 +-
 plugin/assets/importer/demo-content.xml       |   2 +-
 .../src/block-editor/blocks/button/block.json |   3 +-
 .../blocks/card/components/card-primary.js    |   8 +-
 .../card/components/card-supporting-text.js   |   4 +-
 .../components/card-header.js                 |   4 +-
 .../components/vertical-card-layout.js        |   2 +-
 .../src/block-editor/blocks/tab-bar/save.js   |   9 +-
 .../components/google-fonts-control/index.js  |  10 +-
 .../components/google-fonts-control/item.js   |  72 +--
 .../components/google-fonts-control/style.css |  18 +-
 .../components/material-library/index.js      |  44 +-
 .../material-library/sections/buttons.js      |   2 +-
 .../material-library/sections/cards.js        |  11 +-
 .../material-library/sections/checkboxes.js   |   2 +-
 .../material-library/sections/chips.js        |   2 +-
 .../material-library/sections/fields.js       |   2 +-
 .../material-library/sections/image-lists.js  |   2 +-
 .../material-library/sections/lists.js        |   2 +-
 .../material-library/sections/radios.js       |   2 +-
 .../material-library/sections/switch.js       |   2 +-
 .../material-library/sections/tab-bar.js      |   2 +-
 .../material-library/sections/table.js        |   2 +-
 .../components/material-library/styles.js     |  23 +-
 .../src/customizer/customize-controls.js      |   2 -
 .../src/customizer/customize-preview.js       |   8 +-
 .../components/content/customize.js           |  36 +-
 .../components/content/learn-content.js       |   4 +-
 .../components/content/learn.js               |   2 +-
 .../components/content/overview.js            |   4 +-
 .../components/content/updates.js             |   2 +-
 .../components/content/wizard.js              |   2 +-
 .../src/getting-started/components/index.js   |   2 +-
 .../components/navigation/index.js            |   2 +-
 .../assets/src/settings/components/index.js   |   2 +-
 .../settings/components/integrations/index.js |  10 +-
 .../components/integrations/updater.js        |   8 +-
 .../src/wizard/components/content/addons.js   |   6 +-
 .../src/wizard/components/content/welcome.js  |   2 +-
 .../src/wizard/components/content/work.js     |   2 +-
 .../src/wizard/components/header/index.js     |   2 +-
 plugin/php/class-admin.php                    |   2 +-
 plugin/php/class-migration.php                |  99 ----
 plugin/php/class-plugin.php                   |  10 -
 plugin/php/customizer/class-controls.php      | 498 +++++++-----------
 .../php/templates/partials/card-content.php   |   2 +-
 plugin/php/templates/partials/card-header.php |   4 +-
 .../block-editor/blocks/render/blocks.html    | 155 +++---
 .../card/__snapshots__/edit.test.js.snap      |  32 +-
 .../card/__snapshots__/save.test.js.snap      |  32 +-
 .../__snapshots__/card-primary.test.js.snap   |  32 +-
 .../card-supporting-text.test.js.snap         |   8 +-
 .../horizontal-card-layout.test.js.snap       |  32 +-
 .../vertical-card-layout.test.js.snap         | 112 ++--
 .../__snapshots__/edit.test.js.snap           | 120 ++---
 .../__snapshots__/save.test.js.snap           |  32 +-
 .../edit-with-select.test.js.snap             |  40 +-
 .../__snapshots__/edit.test.js.snap           |  40 +-
 .../__snapshots__/card-header.test.js.snap    |  20 +-
 .../__snapshots__/card-image.test.js.snap     |   8 +-
 .../horizontal-card-layout.test.js.snap       |  48 +-
 .../__snapshots__/posts-list.test.js.snap     |  64 +--
 .../__snapshots__/single-post.test.js.snap    |  32 +-
 .../vertical-card-layout.test.js.snap         | 136 ++---
 .../__snapshots__/edit.test.js.snap           |  24 +-
 .../__snapshots__/edit.test.js.snap           |  24 +-
 .../tab-bar/__snapshots__/save.test.js.snap   |   8 +-
 .../material-library.test.js.snap             |  68 +--
 .../__snapshots__/item.test.js.snap           |  57 +-
 .../google-fonts-control/item.test.js         |  78 +--
 .../__snapshots__/index.test.js.snap          | 116 ++--
 .../__snapshots__/customize.test.js.snap      | 108 ++--
 .../__snapshots__/overview.test.js.snap       |  12 +-
 .../__snapshots__/wizard.test.js.snap         |   4 +-
 .../__snapshots__/index.test.js.snap          |   4 +-
 .../__snapshots__/updater.test.js.snap        |  16 +-
 .../wizard/__snapshots__/index.test.js.snap   |   4 +-
 .../content/__snapshots__/addons.test.js.snap |  12 +-
 .../content/__snapshots__/index.test.js.snap  |   4 +-
 .../content/__snapshots__/works.test.js.snap  |  20 +-
 .../js/wizard/components/header/index.test.js |  12 +-
 .../phpunit/php/class-test-block-types.php    |   1 -
 .../php/class-test-blocks-frontend.php        |   6 +-
 .../tests/phpunit/php/class-test-importer.php |   2 +-
 .../php/customizer/class-test-controls.php    |  75 ++-
 ...-test-reset-card-style-rest-controller.php |   4 +-
 theme/404.php                                 |   2 +-
 theme/archive.php                             |   4 +-
 theme/assets/css/src/base/typography.css      |  56 +-
 .../assets/css/src/components/top-app-bar.css |   2 +-
 theme/assets/css/src/conf/mixins.css          |  38 +-
 theme/assets/css/src/conf/variables.css       |  28 +-
 theme/assets/css/src/editor.css               |   6 +-
 theme/assets/css/src/material-components.css  |   1 +
 theme/comments.php                            |   4 +-
 theme/functions.php                           |   4 +-
 theme/inc/class-walker-comment.php            |   6 +-
 theme/inc/template-tags.php                   |  10 +-
 theme/search.php                              |   2 +-
 theme/template-parts/content-none.php         |   2 +-
 theme/template-parts/content.php              |   8 +-
 theme/template-parts/footer.php               |   2 +-
 theme/template-parts/single-page.php          |   4 +-
 theme/template-parts/single.php               |   6 +-
 theme/template-parts/site-title.php           |   8 +-
 117 files changed, 1219 insertions(+), 1813 deletions(-)
 delete mode 100644 plugin/assets/css/src/typography.css
 delete mode 100644 plugin/php/class-migration.php

diff --git a/plugin/assets/css/src/components/material.css b/plugin/assets/css/src/components/material.css
index 503b76cd7..e79a093a3 100644
--- a/plugin/assets/css/src/components/material.css
+++ b/plugin/assets/css/src/components/material.css
@@ -36,9 +36,31 @@
 	}
 }
 
+/* Typography */
+.mdc-typography--headline1 {
+	font-style: var(--mdc-typography-headline1-font-style, normal);
+}
+
+.mdc-typography--headline2 {
+	font-style: var(--mdc-typography-headline2-font-style, normal);
+}
+
+.mdc-typography--headline3 {
+	font-style: var(--mdc-typography-headline3-font-style, normal);
+}
+
+.mdc-typography--headline4 {
+	font-style: var(--mdc-typography-headline4-font-style, normal);
+}
+
+.mdc-typography--headline5 {
+	font-style: var(--mdc-typography-headline5-font-style, normal);
+}
+
+.mdc-typography--headline6,
 .mdc-drawer__title,
 .mdc-top-app-bar__title {
-	font-style: var(--md-sys-typescale-title-medium-style, normal);
+	font-style: var(--mdc-typography-headline6-font-style, normal);
 }
 
 .mdc-typography--subtitle1,
@@ -49,18 +71,18 @@
 .mdc-select__selected-text,
 .mdc-text-field__input,
 .mdc-text-field__affix {
-	font-style: var(--md-sys-typescale-label-large-style, normal);
+	font-style: var(--mdc-typography-subtitle1-font-style, normal);
 }
 
-.label-medium,
+.mdc-typography--subtitle2,
 .mdc-data-table__header-cell,
 .mdc-drawer .mdc-list-item,
 .mdc-slider .mdc-slider__value-indicator-text {
-	font-style: var(--md-sys-typescale-label-medium-style, normal);
+	font-style: var(--mdc-typography-subtitle2-font-style, normal);
 }
 
 .mdc-typography--body1 {
-	font-style: var(--md-sys-typescale-body-large-style, normal);
+	font-style: var(--mdc-typography-body1-font-style, normal);
 }
 
 .mdc-typography--body2,
@@ -73,7 +95,7 @@
 .mdc-drawer__subtitle,
 .mdc-form-field,
 .mdc-list-item__secondary-text {
-	font-style: var(--md-sys-typescale-body-medium-style, normal);
+	font-style: var(--mdc-typography-body2-font-style, normal);
 }
 
 .mdc-typography--caption,
@@ -82,17 +104,17 @@
 .mdc-text-field-helper-text,
 .mdc-text-field-character-counter,
 .mdc-tooltip__surface {
-	font-style: var(--md-sys-typescale-body-small-style, normal);
+	font-style: var(--mdc-typography-caption-font-style, normal);
 }
 
 .mdc-typography--button,
 .mdc-button,
 .mdc-tab {
-	font-style: var(--md-sys-typescale-label-large-style, normal);
+	font-style: var(--mdc-typography-button-font-style, normal);
 }
 
 .mdc-typography--overline {
-	font-style: var(--md-sys-typescale-label-medium-style, normal);
+	font-style: var(--mdc-typography-overline-font-style, normal);
 }
 
 /* Image List */
diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css
index 3c5604062..1b822fbc2 100644
--- a/plugin/assets/css/src/front-end.css
+++ b/plugin/assets/css/src/front-end.css
@@ -19,7 +19,6 @@
  */
 @import "./base/variables.css";
 @import "./conf/index.css";
-@import "typography.css";
 @import "./material-components.css";
 @import "./components/contact-form.css";
 @import "./components/masonry-grid.css";
@@ -28,4 +27,3 @@
 @import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
 @import "../../src/block-editor/blocks/card/style.css";
 @import "./block/style/masonry.css";
-@import "overrides.css";
diff --git a/plugin/assets/css/src/getting-started.css b/plugin/assets/css/src/getting-started.css
index 29fb349bd..968b79f20 100644
--- a/plugin/assets/css/src/getting-started.css
+++ b/plugin/assets/css/src/getting-started.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "typography.css";
+@import "@material/typography/dist/mdc.typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/button/dist/mdc.button.css";
 @import "@material/ripple/dist/mdc.ripple.css";
diff --git a/plugin/assets/css/src/gsm/base.css b/plugin/assets/css/src/gsm/base.css
index 04519d48d..1f7cfc3d6 100644
--- a/plugin/assets/css/src/gsm/base.css
+++ b/plugin/assets/css/src/gsm/base.css
@@ -15,6 +15,20 @@
  */
 
 .material-gsm {
+	--mdc-typography-headline1-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline2-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline3-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline4-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline5-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline6-font-family: "Roboto", sans-serif;
+	--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
+	--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
+	--mdc-typography-font-family: "Roboto", sans-serif;
+	--mdc-typography-body1-font-family: "Roboto", sans-serif;
+	--mdc-typography-body2-font-family: "Roboto", sans-serif;
+	--mdc-typography-caption-font-family: "Roboto", sans-serif;
+	--mdc-typography-button-font-family: "Roboto", sans-serif;
+	--mdc-typography-overline-font-family: "Roboto", sans-serif;
 	--material-design-gsm-primary-color: #212121;
 	--material-design-gsm-primary-text: #fff;
 	--material-design-gsm-background-color: #fff;
@@ -35,15 +49,9 @@
 	}
 
 	& h1,
-	& h2,
 	& h3,
 	& h4 {
 		margin-top: 0;
-		margin-bottom: 0;
-	}
-
-	.material-gsm__content-actions + h2 {
-		margin-top: 2rem;
 	}
 
 	& p {
diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css
index 271510f28..485f78053 100644
--- a/plugin/assets/css/src/material-components.css
+++ b/plugin/assets/css/src/material-components.css
@@ -30,5 +30,6 @@
 @import "@material/tab-indicator/dist/mdc.tab-indicator.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
 @import "@material/textfield/dist/mdc.textfield.css";
+@import "@material/typography/dist/mdc.typography.css";
 @import "@material/tooltip/dist/mdc.tooltip.css";
 @import "./components/material.css";
diff --git a/plugin/assets/css/src/mixins.css b/plugin/assets/css/src/mixins.css
index 56ad84476..184263781 100644
--- a/plugin/assets/css/src/mixins.css
+++ b/plugin/assets/css/src/mixins.css
@@ -17,31 +17,31 @@
 /* stylelint-disable */
 
 @define-mixin fontvars $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $tracking: 0.25, $font-style: normal {
-	--md-sys-typescale-$(type)-size: calc($font-size * 16)px;
-	--md-sys-typescale-$(type)-line-height: $line-height;
-	--md-sys-typescale-$(type)-style: $font-style;
-	--md-sys-typescale-$(type)-weight: $font-weight;
-	--md-sys-typescale-$(type)-tracking: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
+	--mdc-typography-$(type)-font-size: calc($font-size * 16)px;
+	--mdc-typography-$(type)-line-height: calc($line-height * 16)px;
+	--mdc-typography-$(type)-font-style: $font-style;
+	--mdc-typography-$(type)-font-weight: $font-weight;
+	--mdc-typography-$(type)-letter-spacing: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
 }
 
 @define-mixin typography $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
-	.$(type) $child {
-		font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
-		font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
-		line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
-		font-style: var(--md-sys-typescale-$(type)-style, $font-style);
-		font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
-		letter-spacing: var(--md-sys-typescale-$(type)-tracking);
-	}
+.mdc-typography--$type $child {
+	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
+	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em) !important;
+	line-height: var(--mdc-typography-$(type)-line-height, $(line-height)em) !important;
+	font-style: var(--mdc-typography-$(type)-font-style, $font-style) !important;
+	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight) !important;
+	letter-spacing: var(--mdc-typography-$(type)-letter-spacing) !important;
+}
 }
 
 @define-mixin selector-typography $selector, $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
 $selector $child {
-	font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
-	font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
-	line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
-	font-style: var(--md-sys-typescale-$(type)-style, $font-style);
-	font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
-	letter-spacing: var(--md-sys-typescale-$(type)-tracking);
+	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
+	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em) !important;
+	line-height: var(--mdc-typography-$(type)-line-height, $(line-height)em) !important;
+	font-style: var(--mdc-typography-$(type)-font-style, $font-style) !important;
+	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight) !important;
+	letter-spacing: var(--mdc-typography-$(type)-letter-spacing) !important;
 }
 }
diff --git a/plugin/assets/css/src/overrides.css b/plugin/assets/css/src/overrides.css
index 371c2c6d7..76dfe0986 100644
--- a/plugin/assets/css/src/overrides.css
+++ b/plugin/assets/css/src/overrides.css
@@ -14,6 +14,60 @@
  * limitations under the License.
  */
 
+/*
+ * Frontend CSS to override other theme styles
+ * which impact the material components.
+ */
+
+@import "./mixins.css";
+
+/*
+ * Set the typography vars by calculating with base font-size of 16px (browser default)
+ * to override any theme font rem declaration on html element.
+ * Material typography vars can be found at
+ * https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L60
+ */
+html {
+
+	@mixin fontvars headline1, 6, 6, 300, -1.5;
+	@mixin fontvars headline2, 3.75, 3.75, 300, -.5;
+	@mixin fontvars headline3, 3, 3.125, 400, 0;
+	@mixin fontvars headline4, 2.125, 2.5, 400, .25;
+	@mixin fontvars headline5, 1.5, 2, 400, 0;
+	@mixin fontvars headline6, 1.25, 2, 500, 0.15;
+	@mixin fontvars subtitle1, 1, 1.75, 400, .15;
+	@mixin fontvars subtitle2, 0.875, 1.375, 500, .1;
+	@mixin fontvars body1, 1, 1.5, 400, .5;
+	@mixin fontvars body2, 0.875, 1.25, 400, .25;
+	@mixin fontvars caption, 0.75, 1.25, 400, .4;
+	@mixin fontvars button, 0.875, 2.25, 500, 1.25;
+	@mixin fontvars overline, 0.75, 2, 500, 1.5;
+}
+
+@mixin typography headline1, 6, 6, 300;
+@mixin typography headline2, 3.75, 3.75, 300;
+@mixin typography headline3, 3, 3.125, 400;
+@mixin typography headline4, 2.125, 2.5, 400;
+@mixin typography headline5, 1.5, 2, 400;
+@mixin typography headline6, 1.25, 2, 500;
+@mixin typography subtitle1, 1, 1.75, 400;
+@mixin typography subtitle2, 0.875, 1.375, 500;
+@mixin typography body1, 1, 1.5, 400;
+@mixin typography body2, 0.875, 1.25, 400;
+@mixin typography caption, 0.75, 1.25, 400;
+@mixin typography button, 0.875, 2.25, 500;
+@mixin typography overline, 0.75, 2, 500;
+
+/* For `body` types typography should be applied to child elements as well */
+@mixin typography body1, 1, 1.5, 400, *;
+@mixin typography body2, 0.875, 1.25, 400, *;
+
+/* Additional selectors requiring typography styles */
+@mixin selector-typography .mdc-button, button, 0.875, 2.25, 500;
+@mixin selector-typography .mdc-button .mdc-button__label, button, 0.875, 2.25, 500;
+@mixin selector-typography .mdc-list-item__primary-text, body1, 1, 1.5, 400;
+@mixin selector-typography .mdc-list-item__secondary-text, body2, 0.875, 1.25, 400;
+
 /* Material Design Icons */
 .material-icons {
 	font-family: var(--mdc-icons-font-family) !important;
diff --git a/plugin/assets/css/src/settings.css b/plugin/assets/css/src/settings.css
index 94a5dad7d..27afc1c3e 100644
--- a/plugin/assets/css/src/settings.css
+++ b/plugin/assets/css/src/settings.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "typography.css";
+@import "@material/typography/dist/mdc.typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/ripple/dist/mdc.ripple.css";
 @import "@material/switch/dist/mdc.switch.css";
diff --git a/plugin/assets/css/src/settings/base.css b/plugin/assets/css/src/settings/base.css
index 50d9f4c08..71a3c503f 100644
--- a/plugin/assets/css/src/settings/base.css
+++ b/plugin/assets/css/src/settings/base.css
@@ -15,10 +15,20 @@
  */
 
 .material-settings {
-	--md-sys-typescale-headline-large-line-height: 2em;
-	--md-sys-typescale-headline-medium-line-height: 2em;
-	--md-sys-typescale-headline-small-line-height: 2em;
-
+	--mdc-typography-headline1-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline2-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline3-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline4-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline5-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline6-font-family: "Roboto", sans-serif;
+	--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
+	--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
+	--mdc-typography-font-family: "Roboto", sans-serif;
+	--mdc-typography-body1-font-family: "Roboto", sans-serif;
+	--mdc-typography-body2-font-family: "Roboto", sans-serif;
+	--mdc-typography-caption-font-family: "Roboto", sans-serif;
+	--mdc-typography-button-font-family: "Roboto", sans-serif;
+	--mdc-typography-overline-font-family: "Roboto", sans-serif;
 	--material-design-settings-background-color: #fff;
 	--material-design-settings-primary-color: #212121;
 	--material-design-settings-primary-text: #fff;
diff --git a/plugin/assets/css/src/typography.css b/plugin/assets/css/src/typography.css
deleted file mode 100644
index a5fdf7ef9..000000000
--- a/plugin/assets/css/src/typography.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- * Frontend CSS to override other theme styles
- * which impact the material components.
- */
-
-@import "./mixins.css";
-
-/*
- * Set the typography vars by calculating with base font-size of 16px (browser default)
- * to override any theme font rem declaration on html element.
- * Material typography vars can be found at
- * https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L60
- */
-html {
-
-	@mixin fontvars display-large, 7.5, 6, 300, -1.5;
-	@mixin fontvars display-medium, 6.875, 6, 300, -1.5;
-	@mixin fontvars display-small, 6, 6, 300, -1.5;
-	@mixin fontvars headline-large, 3.75, 3.75, 300, -.5;
-	@mixin fontvars headline-medium, 3, 3.125, 400, 0;
-	@mixin fontvars headline-small, 2.125, 2.5, 400, .25;
-	@mixin fontvars title-large, 1.5, 2, 400, 0;
-	@mixin fontvars title-medium, 1.25, 2, 500, 0.15;
-	@mixin fontvars label-large, 1, 1.75, 400, .15;
-	@mixin fontvars label-medium, 0.875, 1.375, 500, .1;
-	@mixin fontvars label-small, 0.75, 2, 500, 1.5;
-	@mixin fontvars body-large, 1, 1.5, 400, .5;
-	@mixin fontvars body-medium, 0.875, 1.25, 400, .25;
-	@mixin fontvars body-small, 0.75, 1.25, 400, .4;
-}
-
-@mixin typography display-large, 7.5, 6, 300;
-@mixin typography display-medium, 6.875, 6, 300;
-@mixin typography display-small, 6, 6, 300;
-@mixin typography headline-large, 3.75, 3.75, 300;
-@mixin typography headline-medium, 3, 3.125, 400;
-@mixin typography headline-small, 2.125, 2.5, 400;
-@mixin typography title-large, 1.5, 2, 400;
-@mixin typography title-medium, 1.25, 2, 500;
-@mixin typography title-small, 0.875, 1.57, 500;
-@mixin typography label-large, 1, 1.75, 400;
-@mixin typography label-medium, 0.875, 1.375, 500;
-@mixin typography body-large, 1, 1.5, 400;
-@mixin typography body-medium, 0.875, 1.25, 400;
-@mixin typography body-small, 0.75, 1.25, 400;
-@mixin typography label-large, 0.875, 2.25, 500;
-@mixin typography label-medium, 0.75, 2, 500;
-
-/* For `body` types typography should be applied to child elements as well */
-@mixin typography body-large, 1, 1.5, 400, *;
-@mixin typography body-medium, 0.875, 1.25, 400, *;
-
-/* Additional selectors requiring typography styles */
-@mixin selector-typography .mdc-button, label-large, 0.875, 2.25, 500;
-@mixin selector-typography .mdc-button .mdc-button__label, label-large, 0.875, 2.25, 500;
-@mixin selector-typography .mdc-list-item__primary-text, body-large, 1, 1.5, 400;
-@mixin selector-typography .mdc-list-item__secondary-text, body-medium, 0.875, 1.25, 400;
-
-/* Backward compatibility for old typography classes. */
-@mixin selector-typography .mdc-typography--headline1, display-small, 6, 6, 300;
-@mixin selector-typography .mdc-typography--headline2, headline-large, 3.75, 3.75, 300;
-@mixin selector-typography .mdc-typography--headline3, headline-medium, 3, 3.125, 400;
-@mixin selector-typography .mdc-typography--headline4, headline-small, 2.125, 2.5, 400;
-@mixin selector-typography .mdc-typography--headline5, title-large, 1.5, 2, 400;
-@mixin selector-typography .mdc-typography--headline6, title-medium, 1.25, 2, 500;
-@mixin selector-typography .mdc-typography--subhead1, title-medium, 1.25, 2, 500;
-@mixin selector-typography .mdc-typography--subhead2, title-small, 0.875, 1.57, 500;
-@mixin selector-typography .mdc-typography--body1, body-large, 1, 1.5, 400;
-@mixin selector-typography .mdc-typography--body2, body-medium, 0.875, 1.25, 400;
-@mixin selector-typography .mdc-typography--caption, body-small, 0.75, 1.25, 400;
-@mixin selector-typography .mdc-typography--button, label-large, 1, 1.75, 400;
-@mixin selector-typography .mdc-typography--overline, label-medium, 0.875, 1.375, 500;
-@mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400;
-@mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500;
-
-/* Backward compat: For `body` types typography should be applied to child elements as well */
-@mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400;
-@mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400;
diff --git a/plugin/assets/css/src/wizard.css b/plugin/assets/css/src/wizard.css
index f268c6dc5..8ab2fb5db 100644
--- a/plugin/assets/css/src/wizard.css
+++ b/plugin/assets/css/src/wizard.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "typography.css";
+@import "@material/typography/dist/mdc.typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/button/dist/mdc.button.css";
 @import "@material/switch/dist/mdc.switch.css";
diff --git a/plugin/assets/css/src/wizard/base.css b/plugin/assets/css/src/wizard/base.css
index 89483d6fa..a1e9db49d 100644
--- a/plugin/assets/css/src/wizard/base.css
+++ b/plugin/assets/css/src/wizard/base.css
@@ -15,11 +15,7 @@
  */
 
 .material-wizard {
-	--md-sys-typescale-headline-large-line-height: 2em;
-	--md-sys-typescale-headline-medium-line-height: 2em;
-	--md-sys-typescale-headline-small-line-height: 2em;
-	--md-sys-typescale-title-large-font: "Roboto Mono", monospace;
-
+	--mdc-typography-headline5-font-family: "Roboto Mono", monospace;
 	--material-design-wizard-primary-color: #212121;
 	--material-design-wizard-primary-text: #fff;
 	max-width: 1024px;
@@ -51,5 +47,10 @@
 }
 
 #material-onboarding-wizard {
+	--mdc-typography-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline3-font-family: "Roboto", sans-serif;
+	--mdc-typography-headline4-font-family: "Roboto", sans-serif;
+	--mdc-typography-body1-font-family: "Roboto", sans-serif;
+	--mdc-typography-button-font-family: "Roboto", sans-serif;
 	margin-top: -32px;
 }
diff --git a/plugin/assets/css/src/wizard/content.css b/plugin/assets/css/src/wizard/content.css
index 26c085591..474b5ac66 100644
--- a/plugin/assets/css/src/wizard/content.css
+++ b/plugin/assets/css/src/wizard/content.css
@@ -20,11 +20,13 @@
 	padding: 2.5rem;
 
 	& p {
-		font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
-		font-size: var(--md-sys-typescale-body-large-size, 1rem);
-		line-height: var(--md-sys-typescale-body-large-line-height, 1.5);
-		font-weight: var(--md-sys-typescale-body-large-weight, 400);
-		letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.03125em);
+		font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto,));
+		font-size: var(--mdc-typography-body1-font-size, 1rem);
+		line-height: var(--mdc-typography-body1-line-height, 1.5);
+		font-weight: var(--mdc-typography-body1-font-weight, 400);
+		letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
+		text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
+		text-transform: var(--mdc-typography-body1-text-transform, inherit);
 	}
 
 	& hr {
diff --git a/plugin/assets/importer/demo-content.xml b/plugin/assets/importer/demo-content.xml
index 77c4f5d42..c0861820f 100644
--- a/plugin/assets/importer/demo-content.xml
+++ b/plugin/assets/importer/demo-content.xml
@@ -538,7 +538,7 @@
 <!-- /wp:heading -->
 
 <!-- wp:material/cards-collection {"style":"grid","cardsProps":[{"contentLayout":"text-under-media","title":"Nulla libero ex","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":false,"imageSourceUrl":"https://images.unsplash.com/photo-1558906217-200fade11db0?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=900\u0026q=60","isImageEditMode":false,"displayImage":true,"supportingText":"Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":false,"displaySecondaryActionButton":false},{"contentLayout":"text-under-media","title":"Praesent non convallis","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":false,"imageSourceUrl":"https://images.unsplash.com/photo-1558905586-d9bc8798d488?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=2612\u0026q=80","isImageEditMode":false,"displayImage":true,"supportingText":"Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":false,"displaySecondaryActionButton":false}],"displaySecondaryText":false,"displayActions":false} -->
-<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558906217-200fade11db0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=900&amp;q=60" alt="Nulla libero ex"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography--headline6">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography--body2">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558905586-d9bc8798d488?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2612&amp;q=80" alt="Praesent non convallis"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography--headline6">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography--body2">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>
+<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558906217-200fade11db0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=900&amp;q=60" alt="Nulla libero ex"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558905586-d9bc8798d488?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2612&amp;q=80" alt="Praesent non convallis"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>
 <!-- /wp:material/cards-collection -->
 
 <!-- wp:cover {"customOverlayColor":"#f3f3f3","align":"full"} -->
diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json
index a31451d63..9b1e0dfaf 100644
--- a/plugin/assets/src/block-editor/blocks/button/block.json
+++ b/plugin/assets/src/block-editor/blocks/button/block.json
@@ -77,5 +77,6 @@
       "type": "string",
       "default": "normal"
     }
-  }
+  },
+  "apiVersion": 2
 }
diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-primary.js b/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
index a29fa6605..bc94371b6 100644
--- a/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
+++ b/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
@@ -49,7 +49,7 @@ const CardPrimary = ( {
 				{ displayTitle && (
 					<RichText
 						tagName="h2"
-						className="material-design-card__title title-large"
+						className="material-design-card__title mdc-typography mdc-typography--headline6"
 						value={ title }
 						onChange={ value =>
 							setter( 'title', value, cardIndex )
@@ -63,7 +63,7 @@ const CardPrimary = ( {
 				{ displaySecondaryText && (
 					<RichText
 						tagName="h3"
-						className="material-design-card__secondary-text label-medium"
+						className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
 						value={ secondaryText }
 						onChange={ value =>
 							setter( 'secondaryText', value, cardIndex )
@@ -78,12 +78,12 @@ const CardPrimary = ( {
 		) : (
 			<>
 				{ displayTitle && (
-					<h2 className="material-design-card__title title-large">
+					<h2 className="material-design-card__title mdc-typography mdc-typography--headline6">
 						{ title }
 					</h2>
 				) }
 				{ displaySecondaryText && (
-					<h3 className="material-design-card__secondary-text label-medium">
+					<h3 className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">
 						{ secondaryText }
 					</h3>
 				) }
diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js b/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js
index 77b60b342..99f230115 100644
--- a/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js
+++ b/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js
@@ -52,7 +52,7 @@ const CardSupportingText = ( {
 					'material-design-card__supporting-text',
 					`material-design-card__supporting-text_${ contentLayout }`,
 					'mdc-typography',
-					'body-medium'
+					'mdc-typography--body2'
 				) }
 				value={ supportingText }
 				onChange={ value =>
@@ -66,7 +66,7 @@ const CardSupportingText = ( {
 					'material-design-card__supporting-text',
 					`material-design-card__supporting-text_${ contentLayout }`,
 					'mdc-typography',
-					'body-medium'
+					'mdc-typography--body2'
 				) }
 			>
 				{ supportingText }
diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js
index ead38a16e..70a77d24e 100644
--- a/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js
+++ b/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js
@@ -34,7 +34,7 @@ import { RawHTML } from '@wordpress/element';
  */
 const CardHeader = ( { titleTrimmed, displayPostDate, post, dateFormat } ) => (
 	<div className="single-post-card__primary">
-		<h2 className="single-post-card__title title-large">
+		<h2 className="single-post-card__title mdc-typography mdc-typography--headline6">
 			{ titleTrimmed ? (
 				<RawHTML>{ titleTrimmed }</RawHTML>
 			) : (
@@ -42,7 +42,7 @@ const CardHeader = ( { titleTrimmed, displayPostDate, post, dateFormat } ) => (
 			) }
 		</h2>
 		{ displayPostDate && (
-			<h3 className="single-post-card__subtitle label-medium">
+			<h3 className="single-post-card__subtitle mdc-typography mdc-typography--subtitle2">
 				<time dateTime={ format( 'Y-m-d h:i:s', post.date_gmt ) }>
 					{ dateI18n( dateFormat, post.date_gmt ) }
 				</time>
diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js
index 3e1858d65..658a85475 100644
--- a/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js
+++ b/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js
@@ -107,7 +107,7 @@ const VerticalCardLayout = props => {
 							'single-post-card__secondary',
 							`single-post-card__secondary-${ contentLayout }`,
 							'mdc-typography',
-							'body-medium'
+							'mdc-typography--body2'
 						) }
 					>
 						<RawHTML key="html">
diff --git a/plugin/assets/src/block-editor/blocks/tab-bar/save.js b/plugin/assets/src/block-editor/blocks/tab-bar/save.js
index 8fc77d202..49b7449ff 100644
--- a/plugin/assets/src/block-editor/blocks/tab-bar/save.js
+++ b/plugin/assets/src/block-editor/blocks/tab-bar/save.js
@@ -58,9 +58,12 @@ const TabBarSave = ( { attributes: { tabs, iconPosition } } ) => {
 				{ tabs.map( ( tab, index ) => (
 					<RawHTML
 						key={ tab.label + tab.position }
-						className={ classNames( 'mdc-tab-content body-large', {
-							'mdc-tab-content--active': index === 0,
-						} ) }
+						className={ classNames(
+							'mdc-tab-content mdc-typography--body1',
+							{
+								'mdc-tab-content--active': index === 0,
+							}
+						) }
 					>
 						{ tab.content &&
 							Array.isArray( tab.content ) &&
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/index.js b/plugin/assets/src/customizer/components/google-fonts-control/index.js
index 2fac7361f..472b0e986 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/index.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/index.js
@@ -80,8 +80,6 @@ const GoogleFontsControl = props => {
 		const settings = {
 			size: child.sizeValue,
 			weight: child.weightValue,
-			tracking: child.trackingValue,
-			lineHeight: child.lineHeightValue,
 		};
 
 		childControl.setting.set( JSON.stringify( settings ) );
@@ -99,20 +97,16 @@ const GoogleFontsControl = props => {
 		}
 
 		const newChildren = children.map( child => {
-			const { size, weight, tracking, lineHeight } = child;
+			const { size, weight } = child;
 
 			setChildValues( {
 				id: child.id,
 				sizeValue: size.default,
 				weightValue: weight.default,
-				trackingValue: tracking.default,
-				lineHeightValue: lineHeight.default,
 			} );
 
 			size.value = size.default;
 			weight.value = weight.default;
-			tracking.value = tracking.default;
-			lineHeight.value = lineHeight.default;
 
 			return child;
 		} );
@@ -130,8 +124,6 @@ const GoogleFontsControl = props => {
 
 			child.size.value = values.sizeValue;
 			child.weight.value = values.weightValue;
-			child.tracking.value = values.trackingValue;
-			child.lineHeight.value = values.lineHeightValue;
 
 			return child;
 		} );
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index cb25cd5c6..4a9207fd5 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -30,7 +30,7 @@ import { SelectControl } from '@wordpress/components';
 import { STYLES } from './styles';
 
 const Item = props => {
-	const { label, size, weight, lineHeight, id, onChange, tracking } = props;
+	const { label, size, weight, id, onChange } = props;
 	const [ choices, setChoices ] = useState( [] );
 
 	useEffect( () => {
@@ -59,44 +59,13 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
-						>
-							{ lineHeight.label }
-						</label>
-						<input
-							id={ `inspector-line-height-control-${ id }` }
-							className="components-google-fonts-control__number"
-							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
-							onChange={ event => {
-								const lineHeightValue = event.target.value;
-
-								onChange( {
-									id,
-									lineHeightValue,
-									trackingValue: tracking.value,
-									sizeValue: size.value,
-									weightValue: weight.value,
-								} );
-							} }
-						/>
-					</div>
-				</div>
-				<div className="components-base-control">
-					<div className="components-base-control__field">
-						<label
-							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-number-control-${ id }` }
+							id={ `inspector-number-label-${ id }` }
 						>
 							{ size.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-number-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
 							value={ size.value || size.default }
@@ -108,44 +77,13 @@ const Item = props => {
 								onChange( {
 									id,
 									sizeValue,
-									trackingValue: tracking.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
 					</div>
 				</div>
-				<div className="components-base-control">
-					<div className="components-base-control__field">
-						<label
-							className="components-base-control__label"
-							htmlFor={ `inspector-tracking-control-${ id }` }
-							id={ `inspector-tracking-label-${ id }` }
-						>
-							{ tracking.label }
-						</label>
-						<input
-							id={ `inspector-tracking-control-${ id }` }
-							className="components-google-fonts-control__number"
-							type="number"
-							value={ tracking.value || tracking.default }
-							min={ tracking.min }
-							max={ tracking.max }
-							onChange={ event => {
-								const trackingValue = event.target.value;
 
-								onChange( {
-									id,
-									trackingValue,
-									sizeValue: size.value,
-									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
-								} );
-							} }
-						/>
-					</div>
-				</div>
 				<SelectControl
 					className="components-google-fonts-control__select"
 					value={ weight.value || weight.default }
@@ -155,9 +93,7 @@ const Item = props => {
 						onChange( {
 							id,
 							sizeValue: size.value,
-							trackingValue: tracking.value,
 							weightValue: value,
-							lineHeightValue: lineHeight.value,
 						} )
 					}
 				/>
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index a80e2b4f8..a3d8260e4 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -27,21 +27,19 @@
 
 	.google-fonts-control__values {
 		display: flex;
-		flex-direction: column;
-		gap: 20px;
 	}
 
 	.components-base-control {
+		width: 40%;
 
-		&:last-child .components-base-control__field {
-			display: block;
+		&:last-child {
+			width: 52%;
 		}
 	}
 
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
-		justify-content: space-between;
 
 		& input {
 			max-width: 50%;
@@ -59,16 +57,6 @@
 		padding: 8px 0 8px 8px;
 	}
 
-	.components-google-fonts-control__select {
-		flex-direction: row;
-		align-items: center;
-
-		& .components-input-control__container {
-			flex: auto;
-			max-width: 50%;
-		}
-	}
-
 	.components-google-fonts-control__select select {
 		max-width: 80%;
 	}
diff --git a/plugin/assets/src/customizer/components/material-library/index.js b/plugin/assets/src/customizer/components/material-library/index.js
index bd933f6b7..7e0d2b19b 100644
--- a/plugin/assets/src/customizer/components/material-library/index.js
+++ b/plugin/assets/src/customizer/components/material-library/index.js
@@ -45,40 +45,25 @@ import colorUtils from '../../../common/color-utils';
  * Adds link tag with appropriate google fonts to head.
  *
  * @param {string} headings Import headings font
- * @param {string} headline Import headline font
  * @param {string} body     Import body font
- * @param {string} display  Import display font
- * @param {string} label    Import label font
  *
  * @return {HTMLLinkElement} Link to google fonts.
  */
-const googleFontsUrl = ( headings, headline, body, display, label ) => {
+const googleFontsUrl = ( headings, body ) => {
 	const join = str => str.replace( ' ', '+' );
 	const link = document.createElement( 'link' );
 
-	const fonts = [ headline, headings, body, display, label ];
-
-	// Make fonts unique.
-	const uniqueFonts = [ ...new Set( fonts ) ];
-
-	// Clean up empty fonts.
-	const cleanFonts = uniqueFonts.filter( font => font );
-
-	// Join fonts into string as pipe.
-	const fontString = join( cleanFonts.join( '|' ) );
-
 	link.rel = 'stylesheet';
-	link.href = `https://fonts.googleapis.com/css?family=${ fontString }`;
+	link.href = `https://fonts.googleapis.com/css?family=${ join(
+		headings
+	) }|${ join( body ) }`;
 
 	return link;
 };
 
 const MaterialLibrary = ( {
 	bodyFontFamily,
-	labelFontFamily,
-	headlineFontFamily,
-	displayFontFamily,
-	titleFontFamily,
+	headFontFamily,
 	iconCollection,
 	primaryColor,
 	onPrimaryColor,
@@ -97,13 +82,7 @@ const MaterialLibrary = ( {
 	theme,
 } ) => {
 	const [ link ] = useState(
-		googleFontsUrl(
-			titleFontFamily,
-			headlineFontFamily,
-			bodyFontFamily,
-			displayFontFamily,
-			labelFontFamily
-		)
+		googleFontsUrl( headFontFamily, bodyFontFamily )
 	);
 
 	const iconStyle = materialIconClass( iconCollection );
@@ -116,11 +95,8 @@ const MaterialLibrary = ( {
 	return (
 		<>
 			<Overrides
-				headline={ headlineFontFamily }
+				headings={ headFontFamily }
 				body={ bodyFontFamily }
-				title={ bodyFontFamily }
-				display={ displayFontFamily }
-				label={ labelFontFamily }
 				primaryColor={ primaryColor }
 				secondaryColor={ secondaryColor }
 				onPrimaryColor={ onPrimaryColor }
@@ -143,11 +119,11 @@ const MaterialLibrary = ( {
 			/>
 
 			<div id="material-library-preview">
-				<h2 className="headline-large">
+				<h2 className="mdc-typography--headline2">
 					{ __( 'Material Components', 'material-design' ) }
 				</h2>
 				<section>
-					<h3 className="headline-medium">
+					<h3 className="mdc-typography--headline3">
 						{ __( 'Blocks', 'material-design' ) }
 					</h3>
 					<p>
@@ -181,7 +157,7 @@ const MaterialLibrary = ( {
 				<hr />
 
 				<section style={ { marginTop: '100px' } }>
-					<h3 className="headline-medium">
+					<h3 className="mdc-typography--headline3">
 						{ __( 'Components', 'material-design' ) }
 					</h3>
 					<p>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/buttons.js b/plugin/assets/src/customizer/components/material-library/sections/buttons.js
index c80282626..99f030444 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/buttons.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/buttons.js
@@ -27,7 +27,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Buttons = ( { radius, iconStyle, primaryColor } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Buttons', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/buttons"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/cards.js b/plugin/assets/src/customizer/components/material-library/sections/cards.js
index 50cf23c0a..6e007d0bf 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/cards.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/cards.js
@@ -27,7 +27,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Cards = ( { radius, buttonRadius } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Cards', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/cards"></IconButtonLink>
@@ -59,13 +59,13 @@ const Cards = ( { radius, buttonRadius } ) => (
 					></div>
 					<div style={ { padding: '16px' } }>
 						<h2
-							className="title-large material-design-card__title"
+							className="mdc-typography mdc-typography--headline6 material-design-card__title"
 							style={ { margin: 0, marginBottom: '5px' } }
 						>
 							{ __( 'Our Changing Planet', 'material-design' ) }
 						</h2>
 						<h3
-							className="material-design-card__secondary-text"
+							className="mdc-typography material-design-card__secondary-text"
 							style={ {
 								fontSize: '0.875rem',
 								fontWeight: 500,
@@ -76,7 +76,10 @@ const Cards = ( { radius, buttonRadius } ) => (
 							{ __( 'by John Smith', 'material-design' ) }
 						</h3>
 					</div>
-					<div className="body-medium" style={ { padding: '16px' } }>
+					<div
+						className="mdc-typography mdc-typography--body2"
+						style={ { padding: '16px' } }
+					>
 						{ __(
 							'Visit ten places on our planet that are undergoing the biggest changes today.',
 							'material-design'
diff --git a/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js b/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js
index 4d2f7ea59..d53d5fae0 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Checkboxes = () => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Checkboxes', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/develop/web/components/input-controls/checkboxes"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/chips.js b/plugin/assets/src/customizer/components/material-library/sections/chips.js
index e441566c3..e2c31889c 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/chips.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/chips.js
@@ -33,7 +33,7 @@ import IconButtonLink from '../common/icon-button-link';
  */
 const Chips = ( { radius } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Chips', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/chips"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/fields.js b/plugin/assets/src/customizer/components/material-library/sections/fields.js
index 09cccc4dd..95cc860fd 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/fields.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/fields.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Fields = ( { radius } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Text fields', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/text-fields"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/image-lists.js b/plugin/assets/src/customizer/components/material-library/sections/image-lists.js
index 009d2fd0d..d4f799e8a 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/image-lists.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/image-lists.js
@@ -27,7 +27,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const ImageLists = ( { radius } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Gallery (Image Lists)', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/image-lists"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/lists.js b/plugin/assets/src/customizer/components/material-library/sections/lists.js
index e1f625f03..54a31d7e5 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/lists.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/lists.js
@@ -31,7 +31,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Lists = ( { iconStyle } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Lists', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/lists"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/radios.js b/plugin/assets/src/customizer/components/material-library/sections/radios.js
index 7ece299f9..4602b6510 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/radios.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/radios.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Radios = () => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Radio buttons', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/develop/web/components/input-controls/radio-buttons"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/switch.js b/plugin/assets/src/customizer/components/material-library/sections/switch.js
index 0a1305380..8a8568e5e 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/switch.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/switch.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Switch = () => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Switches', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/develop/web/components/input-controls/switches"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js b/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js
index 474754f2e..e56ef4f14 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js
@@ -31,7 +31,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const TabBar = ( { iconStyle } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Tabs', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/tabs"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/table.js b/plugin/assets/src/customizer/components/material-library/sections/table.js
index a8af25c88..ceaf994d4 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/table.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/table.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Table = ( { radius } ) => (
 	<div>
-		<h4 className="headline-small" style={ { margin: 0 } }>
+		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
 			{ __( 'Data Tables', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/data-tables"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/styles.js b/plugin/assets/src/customizer/components/material-library/styles.js
index 6f862d74d..29c1caf15 100644
--- a/plugin/assets/src/customizer/components/material-library/styles.js
+++ b/plugin/assets/src/customizer/components/material-library/styles.js
@@ -26,21 +26,8 @@ import colorUtils from '../../../common/color-utils';
 
 export const Overrides = createGlobalStyle`
 	:root {
-		--md-sys-typescale-headline-large-font: ${ props => props.headline };
-		--md-sys-typescale-headline-medium-font: ${ props => props.headline };
-		--md-sys-typescale-headline-small-font: ${ props => props.headline };
-		--md-sys-typescale-body-large-font: ${ props => props.body };
-		--md-sys-typescale-body-medium-font: ${ props => props.body };
-		--md-sys-typescale-body-small-font: ${ props => props.body };
-		--md-sys-typescale-display-large-font: ${ props => props.display };
-		--md-sys-typescale-display-medium-font: ${ props => props.display };
-		--md-sys-typescale-display-small-font: ${ props => props.display };
-		--md-sys-typescale-label-large-font: ${ props => props.label };
-		--md-sys-typescale-label-medium-font: ${ props => props.label };
-		--md-sys-typescale-label-small-font: ${ props => props.label };
-		--md-sys-typescale-title-large-font: ${ props => props.title };
-		--md-sys-typescale-title-medium-font: ${ props => props.title };
-		--md-sys-typescale-title-small-font: ${ props => props.title };
+    	--body-font: ${ props => props.body };
+    	--heading-font: ${ props => props.headings };
 
 		--mdc-theme-primary: ${ props => props.primaryColor };
 		--mdc-theme-secondary: ${ props => props.secondaryColor };
@@ -66,7 +53,7 @@ export const Overrides = createGlobalStyle`
 		--mdc-theme-text-icon-on-background: rgba(--mdc-theme-on-background-rgb, 0.38);
 	}
 
-	#mcb-material-library-preview .{
+	#mcb-material-library-preview .mdc-typography {
 		font-family: var(--heading-font) !important;
 	}
 
@@ -80,7 +67,7 @@ export const Overrides = createGlobalStyle`
 	#mcb-material-library-preview input[type="text"],
 	#mcb-material-library-preview button:not([class*="material-icons"]),
 	#mcb-material-library-preview span:not([class*="material-icons"]) {
-		font-family: var(--md-sys-typescale-body-large-font) !important;
+		font-family: var(--body-font) !important;
 		font-size: 16px;
 	}
 
@@ -89,7 +76,7 @@ export const Overrides = createGlobalStyle`
 	#mcb-material-library-preview h3,
 	#mcb-material-library-preview h4 {
 		color: var(--mdc-theme-on-background) !important;
-		font-family: var(--md-sys-typescale-title-large-font);
+		font-family: var(--heading-font);
 	}
 
 	#mcb-material-library-preview .mdc-list-item__secondary-text {
diff --git a/plugin/assets/src/customizer/customize-controls.js b/plugin/assets/src/customizer/customize-controls.js
index 8ad36416c..8968ff1d0 100644
--- a/plugin/assets/src/customizer/customize-controls.js
+++ b/plugin/assets/src/customizer/customize-controls.js
@@ -652,8 +652,6 @@ import handleGlobalStyleResetButtonClick from './components/reset-card-style';
 
 				child.size.value = valueObject.size;
 				child.weight.value = valueObject.weight;
-				child.tracking.value = valueObject.tracking;
-				child.lineHeight.value = valueObject.lineHeight;
 
 				return child;
 			} );
diff --git a/plugin/assets/src/customizer/customize-preview.js b/plugin/assets/src/customizer/customize-preview.js
index d0ebd6f8e..5d56ea759 100644
--- a/plugin/assets/src/customizer/customize-preview.js
+++ b/plugin/assets/src/customizer/customize-preview.js
@@ -196,11 +196,7 @@ export const COLOR_MODES = {
 
 					if ( 'size' === rule ) {
 						styles += `${ typographyControls[ control ][ rule ] }: ${ rules[ rule ] }px !important;`;
-					} else if ( 'tracking' === rule ) {
-						// Compute tracking to line-height.
-						const lineHeight = rules[ rule ] / ( rules.size || 16 );
-						styles += `${ typographyControls[ control ][ rule ] }: ${ lineHeight }rem !important;`;
-					} else if ( 'weight' === rule ) {
+					} else {
 						const fontStyle = /italic$/.test( rules[ rule ] )
 							? 'italic'
 							: 'normal';
@@ -212,8 +208,6 @@ export const COLOR_MODES = {
 
 						styles += `${ typographyControls[ control ].style }: ${ fontStyle } !important;`;
 						styles += `${ typographyControls[ control ][ rule ] }: ${ weight } !important;`;
-					} else {
-						styles += `${ typographyControls[ control ][ rule ] }: ${ rules[ rule ] } !important;`;
 					}
 				}
 			}
diff --git a/plugin/assets/src/getting-started/components/content/customize.js b/plugin/assets/src/getting-started/components/content/customize.js
index fee766ef8..a437546d0 100644
--- a/plugin/assets/src/getting-started/components/content/customize.js
+++ b/plugin/assets/src/getting-started/components/content/customize.js
@@ -29,10 +29,10 @@ import getConfig from '../../get-config';
 export const Customize = () => {
 	return (
 		<Fragment>
-			<h2 className="material-gsm__content-title headline-medium">
+			<h2 className="material-gsm__content-title mdc-typography--headline3">
 				{ __( 'Customize your Theme', 'material-design' ) }
 			</h2>
-			<p className="body-large">
+			<p>
 				{ __(
 					'Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.',
 					'material-design'
@@ -56,11 +56,11 @@ export const Customize = () => {
 				/>
 			</div>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Starter Styles', 'material-design' ) }
 			</h2>
 
-			<p className={ 'body-large' }>
+			<p>
 				{ __(
 					'Start from our existing styles and use ',
 					'material-design'
@@ -78,10 +78,10 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Color Palettes', 'material-design' ) }
 			</h2>
-			<p className={ 'body-large' }>
+			<p>
 				{ __(
 					'Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s ',
 					'material-design'
@@ -99,11 +99,11 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Typography', 'material-design' ) }
 			</h2>
 
-			<p className={ 'body-large' }>
+			<p>
 				{ __(
 					'Choose from more than 1,000 typefaces in ',
 					'material-design'
@@ -132,20 +132,20 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Corner Styles', 'material-design' ) }
 			</h2>
-			<p className={ 'body-large' }>
+			<p>
 				{ __(
 					'Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.',
 					'material-design'
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Icon Style', 'material-design' ) }
 			</h2>
-			<p className="body-large">
+			<p>
 				{ __( 'All ', 'material-design' ) }
 				<a
 					href="http://material.io/icons"
@@ -160,10 +160,10 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title headline-medium">
+			<h2 className="material-gsm__content-title mdc-typography--headline3">
 				{ __( 'Set Layout & Navigation', 'material-design' ) }
 			</h2>
-			<p className="body-large">
+			<p>
 				{ __(
 					'Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. ',
 					'material-design'
@@ -174,21 +174,21 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Top app bar', 'material-design' ) }
 			</h2>
-			<p className="body-large">
+			<p>
 				{ __(
 					'Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.',
 					'material-design'
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title title-large">
+			<h2 className="material-gsm__content-title mdc-typography--headline5">
 				{ __( 'Footer', 'material-design' ) }
 			</h2>
 
-			<p className="body-large">
+			<p>
 				{ __(
 					'Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the ',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/learn-content.js b/plugin/assets/src/getting-started/components/content/learn-content.js
index 29a747a21..a2c51f57b 100644
--- a/plugin/assets/src/getting-started/components/content/learn-content.js
+++ b/plugin/assets/src/getting-started/components/content/learn-content.js
@@ -24,7 +24,7 @@ import Button from '../../../wizard/components/navigation/button';
 export const LearnContent = ( { materialUrl, newsLetterUrl } ) => {
 	return (
 		<Fragment>
-			<p className="body-large">
+			<p>
 				{ __(
 					'Learn about the concepts behind material Design',
 					'material-design'
@@ -41,7 +41,7 @@ export const LearnContent = ( { materialUrl, newsLetterUrl } ) => {
 				/>
 			</div>
 
-			<p className="body-large">
+			<p>
 				{ __(
 					'Sign up to get updates and news about material design via email',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/learn.js b/plugin/assets/src/getting-started/components/content/learn.js
index 2fd3c7c62..de7128f84 100644
--- a/plugin/assets/src/getting-started/components/content/learn.js
+++ b/plugin/assets/src/getting-started/components/content/learn.js
@@ -26,7 +26,7 @@ export const Learn = () => {
 	return (
 		<Fragment>
 			<div className="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9">
-				<h2 className="material-gsm__content-title headline-large">
+				<h2 className="material-gsm__content-title mdc-typography--headline2">
 					{ __(
 						'Learn More about Material Design',
 						'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/overview.js b/plugin/assets/src/getting-started/components/content/overview.js
index 1aa3e7493..074a9aa03 100644
--- a/plugin/assets/src/getting-started/components/content/overview.js
+++ b/plugin/assets/src/getting-started/components/content/overview.js
@@ -29,11 +29,11 @@ import getConfig from '../../get-config';
 export const Overview = () => {
 	return (
 		<Fragment>
-			<h2 className="material-gsm__content-title headline-medium">
+			<h2 className="material-gsm__content-title mdc-typography--headline3">
 				{ __( 'Build with Material Blocks', 'material-design' ) }
 			</h2>
 
-			<p className="body-large">
+			<p>
 				{ __(
 					'Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/updates.js b/plugin/assets/src/getting-started/components/content/updates.js
index d35346fca..b34a23e8a 100644
--- a/plugin/assets/src/getting-started/components/content/updates.js
+++ b/plugin/assets/src/getting-started/components/content/updates.js
@@ -76,7 +76,7 @@ export const Updates = () => {
 
 	return (
 		<div className="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9">
-			<h2 className="material-gsm__content-title headline-medium">
+			<h2 className="material-gsm__content-title mdc-typography--headline3">
 				{ __( 'Font and Icons Updates', 'material-design' ) }
 			</h2>
 
diff --git a/plugin/assets/src/getting-started/components/content/wizard.js b/plugin/assets/src/getting-started/components/content/wizard.js
index faaca68e3..eae285cd2 100644
--- a/plugin/assets/src/getting-started/components/content/wizard.js
+++ b/plugin/assets/src/getting-started/components/content/wizard.js
@@ -28,7 +28,7 @@ import getConfig from '../../get-config';
 export const Wizard = props => {
 	return (
 		<>
-			<h2 className="material-gsm__content-title headline-small">
+			<h2 className="material-gsm__content-title mdc-typography--headline3">
 				{ __(
 					'Install the Material Design Theme and quick start examples',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/index.js b/plugin/assets/src/getting-started/components/index.js
index d2032a857..4f62060ab 100644
--- a/plugin/assets/src/getting-started/components/index.js
+++ b/plugin/assets/src/getting-started/components/index.js
@@ -24,7 +24,7 @@ import Content from './content';
 const GettingStarted = () => {
 	return (
 		<TabProvider>
-			<div className="mdc-layout-grid">
+			<div className="mdc-layout-grid mdc-typography">
 				<div className="mdc-layout-grid__inner">
 					<Navigation />
 					<Content />
diff --git a/plugin/assets/src/getting-started/components/navigation/index.js b/plugin/assets/src/getting-started/components/navigation/index.js
index ea8882546..41bc23ec9 100644
--- a/plugin/assets/src/getting-started/components/navigation/index.js
+++ b/plugin/assets/src/getting-started/components/navigation/index.js
@@ -72,7 +72,7 @@ const Navigation = () => {
 	return (
 		<div className="material-gsm__navigation mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
 			<div className="material-gsm__heading">
-				<div className="title-large">
+				<div className="mdc-typography--headline6">
 					{ __( 'Getting Started', 'material-design' ) }
 				</div>
 			</div>
diff --git a/plugin/assets/src/settings/components/index.js b/plugin/assets/src/settings/components/index.js
index 20bf73ae2..c03f79267 100644
--- a/plugin/assets/src/settings/components/index.js
+++ b/plugin/assets/src/settings/components/index.js
@@ -29,7 +29,7 @@ import Integrations from './integrations';
 const Settings = () => {
 	return (
 		<SettingsProvider>
-			<h1 className="headline-medium">
+			<h1 className="mdc-typography--headline3">
 				{ __( 'Material Settings', 'material-design' ) }
 			</h1>
 
diff --git a/plugin/assets/src/settings/components/integrations/index.js b/plugin/assets/src/settings/components/integrations/index.js
index cc2e1ff57..78daf3fbb 100644
--- a/plugin/assets/src/settings/components/integrations/index.js
+++ b/plugin/assets/src/settings/components/integrations/index.js
@@ -38,12 +38,12 @@ const Integrations = () => {
 
 	return (
 		<div className="material-settings__integrations">
-			<h2 className="title-large">
+			<h2 className="mdc-typography--headline6">
 				{ __( 'Integrations', 'material-design' ) }
 			</h2>
 
 			<p
-				className="body-large"
+				className="mdc-typography--body1"
 				dangerouslySetInnerHTML={ {
 					__html: sprintf(
 						// translators: %1$s: google font anchor tag, %2$s material icon resources link.
@@ -63,7 +63,7 @@ const Integrations = () => {
 				} }
 			></p>
 
-			<p className="body-large">
+			<p className="mdc-typography--body1">
 				{ __(
 					'Turn on auto-updater or update your resources manually.',
 					'material-design'
@@ -90,12 +90,12 @@ const Integrations = () => {
 				) ) }
 			</div>
 
-			<h2 className="title-large">
+			<h2 className="mdc-typography--headline6">
 				{ __( 'Google API Key', 'material-design' ) }
 			</h2>
 
 			<p
-				className="body-large"
+				className="mdc-typography--body1"
 				dangerouslySetInnerHTML={ {
 					__html: sprintf(
 						// translators: %s google api key anchor tag.
diff --git a/plugin/assets/src/settings/components/integrations/updater.js b/plugin/assets/src/settings/components/integrations/updater.js
index c44cbb5b1..744dfafe7 100644
--- a/plugin/assets/src/settings/components/integrations/updater.js
+++ b/plugin/assets/src/settings/components/integrations/updater.js
@@ -116,11 +116,11 @@ const Updater = ( {
 			<div className="mdc-layout-grid">
 				<div className="mdc-layout-grid__inner">
 					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle">
-						<h3 className="title-large">{ title }</h3>
+						<h3 className="mdc-typography--headline6">{ title }</h3>
 
 						{ isDisabled && (
 							<p
-								className="body-large"
+								className="mdc-typography--body1"
 								dangerouslySetInnerHTML={ {
 									__html: sprintf(
 										// translators: %s: google api link with message.
@@ -138,7 +138,7 @@ const Updater = ( {
 						) }
 
 						{ ! isDisabled && false !== displayUpdatedOn && (
-							<p className="body-large">
+							<p className="mdc-typography--body1">
 								{ sprintf(
 									// translators: %s: last updated date.
 									__(
@@ -151,7 +151,7 @@ const Updater = ( {
 						) }
 
 						{ versionAvailable && (
-							<p className="body-large">
+							<p className="mdc-typography--body1">
 								{ sprintf(
 									// translators: %s: version number.
 									__(
diff --git a/plugin/assets/src/wizard/components/content/addons.js b/plugin/assets/src/wizard/components/content/addons.js
index b37e4ac4c..820716382 100644
--- a/plugin/assets/src/wizard/components/content/addons.js
+++ b/plugin/assets/src/wizard/components/content/addons.js
@@ -32,7 +32,7 @@ import getConfig from '../../../admin/get-config';
 const Addons = () => {
 	return (
 		<div className="mdc-layout-grid__cell--span-12">
-			<h3 className="headline-medium material-wizard__title">
+			<h3 className="mdc-typography--headline3 material-wizard__title">
 				{ __( 'Install addons', 'material-design' ) }
 			</h3>
 
@@ -43,7 +43,7 @@ const Addons = () => {
 				switch={ ADDONS.THEME }
 				disabled={ 'ok' === getConfig( 'themeStatus' ) }
 			>
-				<h4 className="headline-small">
+				<h4 className="mdc-typography--headline4">
 					{ __( 'Material Design Theme', 'material-design' ) }
 				</h4>
 
@@ -63,7 +63,7 @@ const Addons = () => {
 				) }addon-quick-start-examples.png` }
 				switch={ ADDONS.DEMO }
 			>
-				<h4 className="headline-small">
+				<h4 className="mdc-typography--headline4">
 					{ __( 'Quick Start Examples', 'material-design' ) }
 				</h4>
 
diff --git a/plugin/assets/src/wizard/components/content/welcome.js b/plugin/assets/src/wizard/components/content/welcome.js
index 06bc87103..b290b2e6f 100644
--- a/plugin/assets/src/wizard/components/content/welcome.js
+++ b/plugin/assets/src/wizard/components/content/welcome.js
@@ -35,7 +35,7 @@ const Welcome = () => {
 				image={ `${ getConfig( 'assetsPath' ) }welcome.png` }
 				imageSpan="5"
 			>
-				<h3 className="headline-medium">
+				<h3 className="mdc-typography--headline3">
 					{ __( 'Start building', 'material-design' ) }
 				</h3>
 
diff --git a/plugin/assets/src/wizard/components/content/work.js b/plugin/assets/src/wizard/components/content/work.js
index 1349a5bf1..9b5733d6f 100644
--- a/plugin/assets/src/wizard/components/content/work.js
+++ b/plugin/assets/src/wizard/components/content/work.js
@@ -38,7 +38,7 @@ const Work = () => {
 				) }complete-build-with-blocks.png` }
 				imageSpan="5"
 			>
-				<h3 className="headline-medium">
+				<h3 className="mdc-typography--headline3">
 					{ __( 'Congrats!', 'material-design' ) }
 				</h3>
 
diff --git a/plugin/assets/src/wizard/components/header/index.js b/plugin/assets/src/wizard/components/header/index.js
index 0e66e312b..f4e52aa2f 100644
--- a/plugin/assets/src/wizard/components/header/index.js
+++ b/plugin/assets/src/wizard/components/header/index.js
@@ -34,7 +34,7 @@ const Header = () => {
 				{ <Logo /> }
 			</div>
 			<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-11 mdc-layout-grid__cell--align-middle">
-				<h2 className="title-large">
+				<h2 className="mdc-typography--headline5">
 					{ __( 'Material Design for WordPress', 'material-design' ) }
 				</h2>
 			</div>
diff --git a/plugin/php/class-admin.php b/plugin/php/class-admin.php
index 1c8459959..7f80b36cc 100644
--- a/plugin/php/class-admin.php
+++ b/plugin/php/class-admin.php
@@ -139,7 +139,7 @@ public function render_onboarding_wizard_page() {
 	 */
 	public function render_settings_page() {
 		?>
-		<div id="material-settings" class="material-settings mdc-layout-grid"></div>
+		<div id="material-settings" class="material-settings mdc-layout-grid mdc-typography"></div>
 		<?php
 	}
 
diff --git a/plugin/php/class-migration.php b/plugin/php/class-migration.php
deleted file mode 100644
index 1b5ab447f..000000000
--- a/plugin/php/class-migration.php
+++ /dev/null
@@ -1,99 +0,0 @@
-<?php
-/**
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @package MaterialDesign
- */
-
-/**
- * Bootstraps migration scripts.
- *
- * @package MaterialDesign
- */
-
-namespace MaterialDesign\Plugin;
-
-/**
- * Migration class.
- */
-class Migration extends Module_Base {
-
-	const MIGRATION_KEY = 'material_m2_to_m3_migration';
-
-	/**
-	 * Initiate the class and hooks.
-	 */
-	public function init() {
-		add_action( 'admin_init', [ $this, 'migrate_m2_typography_settings_to_m3' ], 10, 2 );
-	}
-
-	/**
-	 * Migrate m2 typography settings to m3.
-	 *
-	 * @return void
-	 */
-	public function migrate_m2_typography_settings_to_m3() {
-		$migration_option = get_option( self::MIGRATION_KEY, [] );
-
-		if ( ! empty( $migration_option['typography'] ) ) {
-			return;
-		}
-
-		$map = [
-			'headline_1'       => 'display_small',
-			'headline_2'       => 'headline_large',
-			'headline_3'       => 'headline_medium',
-			'headline_4'       => 'headline_small',
-			'headline_5'       => 'title_large',
-			'headline_6'       => 'title_large',
-			'subhead_1'        => 'title_medium',
-			'subhead_2'        => 'title_small',
-			'body_1'           => 'body_large',
-			'body_2'           => 'body_medium',
-			'caption'          => 'body_small',
-			'button'           => 'label_large',
-			'overline'         => 'label_medium',
-			'subtitle_1'       => 'label_large',
-			'subtitle_2'       => 'label_medium',
-			'head_font_family' => [ 'display_font_family', 'headline_font_family' ],
-		];
-
-		$slug = $this->plugin->customizer_controls->slug;
-
-		$option = get_option( $slug, [] );
-
-		foreach ( $map as $m2_key => $m3_key ) {
-			if ( is_array( $m3_key ) ) {
-				foreach ( $m3_key as $sub_m3_key ) {
-					if ( isset( $option[ $m2_key ] ) ) {
-						$option[ $sub_m3_key ] = $option[ $m2_key ];
-					}
-				}
-				unset( $option[ $m2_key ] );
-			} else {
-				if ( isset( $option[ $m2_key ] ) ) {
-					$option[ $m3_key ] = $option[ $m2_key ];
-					unset( $option[ $m2_key ] );
-				}
-			}
-		}
-
-		update_option( $slug, $option );
-
-		$migration_option['typography'] = true;
-		update_option( self::MIGRATION_KEY, $migration_option );
-	}
-
-}
diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php
index 745d5b584..5317917f2 100644
--- a/plugin/php/class-plugin.php
+++ b/plugin/php/class-plugin.php
@@ -145,13 +145,6 @@ class Plugin extends Plugin_Base {
 	 */
 	public $frontend;
 
-	/**
-	 * Migration class.
-	 *
-	 * @var Migration
-	 */
-	public $migration;
-
 	/**
 	 * Initiate the plugin resources.
 	 *
@@ -196,9 +189,6 @@ public function init() {
 		$this->frontend = new Frontend( $this );
 		$this->frontend->init();
 
-		$this->migration = new Migration( $this );
-		$this->migration->init();
-
 		// Init CLI.
 		if ( defined( 'WP_CLI' ) && false !== WP_CLI ) {
 			$this->fonts = new Fonts();
diff --git a/plugin/php/customizer/class-controls.php b/plugin/php/customizer/class-controls.php
index 9a42fe7ad..684e2d2aa 100644
--- a/plugin/php/customizer/class-controls.php
+++ b/plugin/php/customizer/class-controls.php
@@ -87,7 +87,7 @@ public function init() {
 	/**
 	 * Register customizer options.
 	 *
-	 * @param \WP_Customize_Manager $wp_customize Theme Customizer object.
+	 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 	 */
 	public function register( $wp_customize ) {
 		$this->wp_customize = $wp_customize;
@@ -393,13 +393,11 @@ public function add_typography_controls() {
 		/**
 		 * Generate list of all the settings in the Typography section.
 		 */
-		$settings            = [];
-		$typography_controls = $this->get_typography_controls();
-		$extra_controls      = call_user_func_array( 'array_merge', wp_list_pluck( $typography_controls, 'choices' ) );
-
+		$settings     = [];
 		$all_controls = array_merge(
-			$typography_controls,
-			$extra_controls
+			$this->get_typography_controls(),
+			$this->get_typography_extra_controls(),
+			$this->get_typography_extra_controls( false )
 		);
 
 		foreach ( $all_controls as $control ) {
@@ -413,7 +411,7 @@ public function add_typography_controls() {
 		 */
 		$controls = [];
 
-		foreach ( $typography_controls as $control ) {
+		foreach ( $all_controls as $control ) {
 			$controls[ $control['id'] ] = new Google_Fonts_Control(
 				$this->wp_customize,
 				$this->prepare_option_name( $control['id'] ),
@@ -425,20 +423,6 @@ public function add_typography_controls() {
 					'choices'  => ( ! empty( $control['choices'] ) ) ? $control['choices'] : [],
 				]
 			);
-
-			foreach ( $control['choices'] as $choice ) {
-				$controls[ $choice['id'] ] = new Google_Fonts_Control(
-					$this->wp_customize,
-					$this->prepare_option_name( $choice['id'] ),
-					[
-						'section'  => 'typography',
-						'priority' => 10,
-						'label'    => $choice['label'],
-						'css_vars' => $choice['css_vars'],
-						'choices'  => ( ! empty( $choice['choices'] ) ) ? $choice['choices'] : [],
-					]
-				);
-			}
 		}
 
 		$this->add_controls( $controls );
@@ -772,55 +756,54 @@ function ( $image ) {
 	 * @return string
 	 */
 	public function get_google_fonts_url( $context = '' ) {
-		$icons_style  = $this->get_icon_style( '+' );
-		$merged_fonts = [ 'Material+Icons' . $icons_style ];
-		$fonts        = [];
+		$icons_style   = $this->get_icon_style( '+' );
+		$font_families = [ 'Material+Icons' . $icons_style ];
+		$fonts         = [];
 
 		if ( 'block-editor' === $context ) {
-			$merged_fonts[] = 'Material+Icons+Outlined';
+			$font_families[] = 'Material+Icons+Outlined';
 		}
 
 		// Get the font families used.
 		foreach ( $this->get_typography_controls() as $control ) {
-			$fonts[ $control['id'] ] = [
+			$type           = 'head_font_family' === $control['id'] ? 'head' : 'body';
+			$fonts[ $type ] = [
 				'family'   => $this->get_option( $control['id'] ),
 				'variants' => [],
 			];
 		}
 
+		// Get the extra font controls.
+		$typography_extra_controls = array_merge(
+			$this->get_typography_extra_controls(),
+			$this->get_typography_extra_controls( false )
+		);
+
 		// Get the variant/weight used for each font control.
-		foreach ( $this->get_typography_controls() as $c ) {
-			$variants = [];
-			foreach ( $c['choices'] as $control ) {
-				$value = json_decode( $this->get_option( $control['id'] ), true );
-
-				if ( ! empty( $value ) && ! empty( $value['weight'] ) ) {
-					$weight = $value['weight'];
-				} else {
-					$weight = $control['weight']['default'];
-				}
+		foreach ( $typography_extra_controls as $control ) {
+			$value  = json_decode( $this->get_option( $control['id'] ), true );
+			$weight = 'regular';
 
-				$variants[] = $weight;
+			if ( ! empty( $value ) && ! empty( $value['weight'] ) ) {
+				$weight = $value['weight'];
+			} else {
+				$weight = $control['weight']['default'];
+			}
 
+			if ( false !== strpos( $control['id'], 'headline_' ) ) {
+				$fonts['head']['variants'][] = $weight;
+			} else {
+				$fonts['body']['variants'][] = $weight;
 			}
-			$fonts[ $c['id'] ]['variants'] = $variants;
 		}
 
-		// Use font family with key to make it unique and merge it's variants.
-		$font_families = [];
 		foreach ( $fonts as $font ) {
-			$variants                      = str_replace( 'regular', '400', implode( ',', array_unique( $font['variants'] ) ) );
-			$font_family                   = str_replace( ' ', '+', $font['family'] );
-			$font_families[ $font_family ] = array_merge( isset( $font_families[ $font_family ] ) ? $font_families[ $font_family ] : [], explode( ',', $variants ) );
-		}
-
-		// Merge variants and make it unique.
-		foreach ( $font_families as $family => $variants ) {
-			$merged_fonts[] = $family . ':' . implode( ',', array_unique( $variants ) );
+			$variants        = str_replace( 'regular', '400', implode( ',', array_unique( $font['variants'] ) ) );
+			$font_families[] = str_replace( ' ', '+', $font['family'] ) . ':' . $variants;
 		}
 
 		$fonts_url =
-			add_query_arg( 'family', implode( '|', $merged_fonts ), '//fonts.googleapis.com/css' );
+			add_query_arg( 'family', implode( '|', array_unique( $font_families ) ), '//fonts.googleapis.com/css' );
 
 		/**
 		 * Filter Google Fonts URL.
@@ -908,8 +891,7 @@ public function get_frontend_css() {
 			$color_vars[] = esc_html( "--mdc-theme-surface-mix-12: $mix_12;" );
 		}
 
-		$typography_controls = $this->get_typography_controls();
-		foreach ( $typography_controls as $control ) {
+		foreach ( $this->get_typography_controls() as $control ) {
 			$value = $this->get_option( $control['id'] );
 
 			$fallback = 'sans-serif';
@@ -931,10 +913,10 @@ public function get_frontend_css() {
 			}
 		}
 
-		$typography_extra_controls = wp_list_pluck( $typography_controls, 'choices' );
-
-		// Merge all controls.
-		$typography_extra_controls = call_user_func_array( 'array_merge', $typography_extra_controls );
+		$typography_extra_controls = array_merge(
+			$this->get_typography_extra_controls(),
+			$this->get_typography_extra_controls( false )
+		);
 
 		foreach ( $typography_extra_controls as $control ) {
 			$value = json_decode( $this->get_option( $control['id'] ), true );
@@ -953,7 +935,7 @@ public function get_frontend_css() {
 							esc_html( $var ),
 							esc_html( $value[ $type ] )
 						);
-					} elseif ( 'weight' === $type ) {
+					} else {
 						$font_vars[] = sprintf(
 							'%s: %s !important;',
 							esc_html( $var ),
@@ -969,20 +951,6 @@ public function get_frontend_css() {
 							esc_html( $control['css_vars']['style'] ),
 							esc_html( $font_style )
 						);
-					} elseif ( 'tracking' === $type ) {
-						$font_size   = isset( $value['size'] ) ? $value['size'] : 16;
-						$line_height = $value[ $type ] / $font_size;
-						$font_vars[] = sprintf(
-							'%s: %srem !important;',
-							esc_html( $var ),
-							esc_html( $line_height )
-						);
-					} else {
-						$font_vars[] = sprintf(
-							'%s: %s !important;',
-							esc_html( $var ),
-							esc_html( $value[ $type ] )
-						);
 					}
 				}
 			}
@@ -1127,10 +1095,7 @@ public function get_design_styles() {
 				'on_background_color_dark'     => '#ffffff',
 				'footer_color'                 => '#ffffff',
 				'on_footer_color'              => '#000000',
-				'display_font_family'          => 'Roboto',
-				'headline_font_family'         => 'Roboto',
-				'title_font_family'            => 'Roboto',
-				'label_font_family'            => 'Roboto',
+				'head_font_family'             => 'Roboto',
 				'body_font_family'             => 'Roboto',
 				'global_radius'                => '4',
 				'button_radius'                => '4',
@@ -1165,10 +1130,7 @@ public function get_design_styles() {
 				'on_background_color'         => '#000000',
 				'footer_color'                => '#ffffff',
 				'on_footer_color'             => '#000000',
-				'display_font_family'         => 'Raleway',
-				'headline_font_family'        => 'Raleway',
-				'title_font_family'           => 'Raleway',
-				'label_font_family'           => 'Raleway',
+				'head_font_family'            => 'Raleway',
 				'body_font_family'            => 'Raleway',
 				'global_radius'               => '16',
 				'button_radius'               => '16',
@@ -1203,10 +1165,7 @@ public function get_design_styles() {
 				'on_background_color'         => '#000000',
 				'footer_color'                => '#ffffff',
 				'on_footer_color'             => '#000000',
-				'display_font_family'         => 'Merriweather',
-				'headline_font_family'        => 'Merriweather',
-				'title_font_family'           => 'Merriweather',
-				'label_font_family'           => 'Merriweather',
+				'head_font_family'            => 'Merriweather',
 				'body_font_family'            => 'Merriweather',
 				'global_radius'               => '0',
 				'button_radius'               => '0',
@@ -1241,10 +1200,7 @@ public function get_design_styles() {
 				'on_background_color'         => '#442c2e',
 				'footer_color'                => '#fff1ee',
 				'on_footer_color'             => '#442c2e',
-				'display_font_family'         => 'Rubik',
-				'headline_font_family'        => 'Rubik',
-				'title_font_family'           => 'Rubik',
-				'label_font_family'           => 'Rubik',
+				'head_font_family'            => 'Rubik',
 				'body_font_family'            => 'Rubik',
 				'global_radius'               => '8',
 				'button_radius'               => '8',
@@ -1352,31 +1308,40 @@ public function get_color_controls_variant( $variant ) {
 	 * @return array
 	 */
 	public function get_typography_controls() {
-		$default_fonts = [
-			'display'  => 'Roboto',
-			'headline' => 'Roboto',
-			'title'    => 'Roboto Medium',
-			'label'    => 'Roboto Medium',
-			'body'     => 'Roboto Medium',
-		];
-
-		$controls = [];
-		foreach ( $default_fonts as $base_key => $default_font ) {
-			$controls[] = [
-				'id'       => sprintf( '%s_font_family', $base_key ),
-				'label'    => ucfirst( $base_key ),
+		return [
+			[
+				'id'       => 'head_font_family',
+				'label'    => __( 'Headlines & Subtitles', 'material-design' ),
 				'css_vars' => [
 					'family' => [
-						sprintf( '--md-sys-typescale-%s-large-font', $base_key ),
-						sprintf( '--md-sys-typescale-%s-medium-font', $base_key ),
-						sprintf( '--md-sys-typescale-%s-small-font', $base_key ),
+						'--mdc-typography-headline1-font-family',
+						'--mdc-typography-headline2-font-family',
+						'--mdc-typography-headline3-font-family',
+						'--mdc-typography-headline4-font-family',
+						'--mdc-typography-headline5-font-family',
+						'--mdc-typography-headline6-font-family',
+						'--mdc-typography-subtitle1-font-family',
+						'--mdc-typography-subtitle2-font-family',
 					],
 				],
-				'choices'  => $this->get_typography_extra_controls( $base_key ),
-			];
-		}
-
-		return $controls;
+				'choices'  => $this->get_typography_extra_controls(),
+			],
+			[
+				'id'       => 'body_font_family',
+				'label'    => __( 'Body & Captions', 'material-design' ),
+				'css_vars' => [
+					'family' => [
+						'--mdc-typography-font-family',
+						'--mdc-typography-body1-font-family',
+						'--mdc-typography-body2-font-family',
+						'--mdc-typography-caption-font-family',
+						'--mdc-typography-button-font-family',
+						'--mdc-typography-overline-font-family',
+					],
+				],
+				'choices'  => $this->get_typography_extra_controls( false ),
+			],
+		];
 	}
 
 	/**
@@ -1675,212 +1640,143 @@ public function get_typography_size_controls( $args ) {
 		return $args;
 	}
 
-	/**
-	 * Get tracking controls.
-	 *
-	 * @param mixed $args Customized values.
-	 *
-	 * @return array Values to use in control.
-	 */
-	public function get_tracking_controls( $args ) {
-		$args = wp_parse_args(
-			$args,
-			[
-				'label'   => __( 'Tracking (Letter spacing)', 'material-design' ),
-				'type'    => 'number',
-				'min'     => -5,
-				'default' => 0,
-				'max'     => 100,
-			]
-		);
-
-		return $args;
-	}
-
-	/**
-	 * Get tracking controls.
-	 *
-	 * @param mixed $args Customized values.
-	 *
-	 * @return array Values to use in control.
-	 */
-	public function get_line_height_controls( $args ) {
-		$args = wp_parse_args(
-			$args,
-			[
-				'label'   => __( 'Line height', 'material-design' ),
-				'type'    => 'number',
-				'min'     => 0,
-				'default' => 0,
-				'max'     => 64,
-			]
-		);
-
-		return $args;
-	}
-
 	/**
 	 * Build typography size and weight controls.
 	 *
-	 * @param string $token Token name like Display, Headline, Title etc..
+	 * @param bool $headlines Whether or not this are headlines.
 	 *
 	 * @return array Values for controllers.
 	 */
-	public function get_typography_extra_controls( $token ) {
+	public function get_typography_extra_controls( $headlines = true ) {
 		$controls = [];
 
-		$default_fonts_size = [
-			'display'  => [
-				'large'  => 120,
-				'medium' => 110,
-				'small'  => 96,
-			],
-			'headline' => [
-				'large'  => 60,
-				'medium' => 48,
-				'small'  => 34,
-			],
-			'title'    => [
-				'large'  => 24,
-				'medium' => 20,
-				'small'  => 16,
-			],
-			'label'    => [
-				'large'  => 16,
-				'medium' => 14,
-				'small'  => 11,
-			],
-			'body'     => [
-				'large'  => 16,
-				'medium' => 14,
-				'small'  => 12,
-			],
-		];
-
-		$default_tracking = [
-			'display'  => [
-				'large'  => -1.5,
-				'medium' => -1.5,
-				'small'  => -1.5,
-			],
-			'headline' => [
-				'large' => -0.5,
-				'small' => 0.25,
-			],
-			'title'    => [
-				'medium' => 0.15,
-				'small'  => 0.1,
-			],
-			'label'    => [
-				'large'  => 0.15,
-				'medium' => 0.1,
-				'small'  => 0.1,
-			],
-			'body'     => [
-				'large'  => 0.25,
-				'medium' => 0.4,
-				'small'  => 0.4,
-			],
-		];
+		if ( $headlines ) {
+			$default_sizes   = [ 96, 60, 48, 34, 24, 20 ];
+			$default_weights = [
+				'100',
+				'100',
+				'regular',
+				'regular',
+				'regular',
+				'500',
+			];
 
-		$default_weight = [
-			'display'  => [
-				'large'  => 300,
-				'medium' => 300,
-				'small'  => 300,
-			],
-			'headline' => [
-				'large'  => 300,
-				'medium' => 400,
-				'small'  => 400,
-			],
-			'title'    => [
-				'large'  => 400,
-				'medium' => 500,
-				'small'  => 500,
-			],
-			'label'    => [
-				'large'  => 400,
-				'medium' => 500,
-				'small'  => 500,
-			],
-			'body'     => [
-				'large'  => 400,
-				'medium' => 400,
-				'small'  => 400,
-			],
-		];
+			for ( $i = 1; $i < 7; $i ++ ) {
+				$id         = sprintf( 'headline_%s', $i );
+				$controls[] = [
+					'id'       => $id,
+					'setting'  => $this->prepare_option_name( $id ),
+					'css_vars' => [
+						'size'   => sprintf( '--mdc-typography-headline%s-font-size', $i ),
+						'weight' => sprintf( '--mdc-typography-headline%s-font-weight', $i ),
+						'style'  => sprintf( '--mdc-typography-headline%s-font-style', $i ),
+					],
+					'value'    => $this->get_option( $id ),
+					'label'    => sprintf(
+					/* translators: Number of heading to display */
+						esc_html__( 'Headline %s', 'material-design' ),
+						$i
+					),
+					'size'     => $this->get_typography_size_controls(
+						[
+							'default' => intval( $default_sizes[ $i - 1 ] ),
+							'max'     => 96,
+						]
+					),
+					'weight'   => $this->get_typography_weight_controls(
+						[
+							'default' => $default_weights[ $i - 1 ],
+						]
+					),
+				];
+			}
 
-		$default_line_height = [
-			'display'  => [
-				'large'  => 6,
-				'medium' => 6,
-				'small'  => 6,
-			],
-			'headline' => [
-				'large'  => 3.75,
-				'medium' => 3.125,
-				'small'  => 2.5,
-			],
-			'title'    => [
-				'large'  => 2,
-				'medium' => 2,
-				'small'  => 1.75,
-			],
-			'label'    => [
-				'large'  => 1.75,
-				'medium' => 1.375,
-				'small'  => 1.125,
-			],
-			'body'     => [
-				'large'  => 1.5,
-				'medium' => 1.25,
-				'small'  => 1.25,
-			],
-		];
+			$default_sizes   = [ 16, 14 ];
+			$default_weights = [
+				'regular',
+				'500',
+			];
 
-		$sub_tokens = [ 'large', 'medium', 'small' ];
-
-		foreach ( $sub_tokens as $sub_t ) {
-			$id         = sprintf( '%s_%s', $token, $sub_t );
-			$controls[] = [
-				'id'         => $id,
-				'setting'    => $this->prepare_option_name( $id ),
-				'css_vars'   => [
-					'lineHeight' => sprintf( '--md-sys-typescale-%s-%s-line-height', $token, $sub_t ),
-					'size'       => sprintf( '--md-sys-typescale-%s-%s-size', $token, $sub_t ),
-					'tracking'   => sprintf( '--md-sys-typescale-%s-%s-tracking', $token, $sub_t ),
-					'weight'     => sprintf( '--md-sys-typescale-%s-%s-weight', $token, $sub_t ),
+			for ( $i = 1; $i < 3; $i ++ ) {
+				$id         = sprintf( 'subtitle_%s', $i );
+				$controls[] = [
+					'id'       => $id,
+					'setting'  => $this->prepare_option_name( $id ),
+					'css_vars' => [
+						'size'   => sprintf( '--mdc-typography-subtitle%s-font-size', $i ),
+						'weight' => sprintf( '--mdc-typography-subtitle%s-font-weight', $i ),
+						'style'  => sprintf( '--mdc-typography-subtitle%s-font-style', $i ),
+					],
+					'value'    => $this->get_option( $id ),
+					'label'    => sprintf(
+					/* translators: Number of heading to display */
+						esc_html__( 'Subtitle %s', 'material-design' ),
+						$i
+					),
+					'size'     => $this->get_typography_size_controls(
+						[
+							'default' => intval( $default_sizes[ $i - 1 ] ),
+						]
+					),
+					'weight'   => $this->get_typography_weight_controls(
+						[
+							'default' => $default_weights[ $i - 1 ],
+						]
+					),
+				];
+			}
+		} else {
+			$keys = [
+				'body1'    => [
+					'label'  => __( 'Body 1', 'material-design' ),
+					'size'   => 16,
+					'weight' => 'regular',
+				],
+				'body2'    => [
+					'label'  => __( 'Body 2', 'material-design' ),
+					'size'   => 14,
+					'weight' => 'regular',
+				],
+				'button'   => [
+					'label'  => __( 'Button', 'material-design' ),
+					'size'   => 14,
+					'weight' => '500',
+				],
+				'caption'  => [
+					'label'  => __( 'Caption', 'material-design' ),
+					'size'   => 12,
+					'weight' => 'regular',
+				],
+				'overline' => [
+					'label'  => __( 'Overline', 'material-design' ),
+					'size'   => 10,
+					'weight' => 'regular',
 				],
-				'value'      => $this->get_option( $id ),
-				'label'      => sprintf(
-					/* translators: %1$s Token and %2$s Sub-token name. */
-					esc_html__( '%1$s %2$s', 'material-design' ),
-					ucfirst( $token ),
-					$sub_t
-				),
-				'size'       => $this->get_typography_size_controls(
-					[
-						'default' => $default_fonts_size[ $token ][ $sub_t ],
-						'max'     => 140,
-					]
-				),
-				'weight'     => $this->get_typography_weight_controls(
-					[
-						'default' => $default_weight[ $token ][ $sub_t ],
-					]
-				),
-				'lineHeight' => $this->get_line_height_controls(
-					[
-						'default' => $default_line_height[ $token ][ $sub_t ],
-					]
-				),
-				'tracking'   => $this->get_tracking_controls(
-					[
-						'default' => isset( $default_tracking[ $token ][ $sub_t ] ) ? $default_tracking[ $token ][ $sub_t ] : 0,
-					]
-				),
 			];
+
+			foreach ( $keys as $key => $settings ) {
+				$controls[] = [
+					'id'       => esc_html( $key ),
+					'setting'  => $this->prepare_option_name( $key ),
+					'label'    => esc_html( $settings['label'] ),
+					'css_vars' => [
+						'size'   => sprintf( '--mdc-typography-%s-font-size', $key ),
+						'weight' => sprintf( '--mdc-typography-%s-font-weight', $key ),
+						'style'  => sprintf( '--mdc-typography-%s-font-style', $key ),
+					],
+					'value'    => $this->get_option( $key ),
+					'size'     => $this->get_typography_size_controls(
+						[
+							'default' => intval( $settings['size'] ),
+						]
+					),
+					'weight'   => $this->get_typography_weight_controls(
+						[
+							'default' => $settings['weight'],
+						]
+					),
+				];
+			}
 		}
 
 		return $controls;
diff --git a/plugin/php/templates/partials/card-content.php b/plugin/php/templates/partials/card-content.php
index 766994ee7..f01c49182 100644
--- a/plugin/php/templates/partials/card-content.php
+++ b/plugin/php/templates/partials/card-content.php
@@ -33,7 +33,7 @@
 $post_content   = wp_trim_words( get_the_excerpt(), $content_length, ' [&hellip;]' );
 
 if ( ! empty( $show_content ) && ! empty( $post_content ) ) : ?>
-	<div class="single-post-card__secondary body-medium <?php echo esc_attr( $class_name ); ?>">
+	<div class="single-post-card__secondary mdc-typography mdc-typography--body2 <?php echo esc_attr( $class_name ); ?>">
 		<p>
 			<?php echo wp_kses_post( $post_content ); ?>
 		</p>
diff --git a/plugin/php/templates/partials/card-header.php b/plugin/php/templates/partials/card-header.php
index 604c76845..670c54682 100644
--- a/plugin/php/templates/partials/card-header.php
+++ b/plugin/php/templates/partials/card-header.php
@@ -30,12 +30,12 @@
 ?>
 
 <div class="single-post-card__primary">
-	<h2 class="single-post-card__title title-large">
+	<h2 class="single-post-card__title mdc-typography mdc-typography--headline6">
 		<div><?php echo esc_html( get_the_title() ); ?></div>
 	</h2>
 
 	<?php if ( ! empty( $post_date ) ) : ?>
-		<h3 class="single-post-card__subtitle label-medium">
+		<h3 class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2">
 			<time>
 			<?php echo esc_html( get_the_date() ); ?>
 			</time>
diff --git a/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html b/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html
index 0d6d2db33..550194ea7 100644
--- a/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html
+++ b/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html
@@ -52,7 +52,6 @@
 		<button class="material-icons mdc-icon-button">
 			<div class="mdc-button__ripple"></div>
 
-
 			adb
 		</button>
 	</div>
@@ -64,19 +63,21 @@
 	<div class="mdc-card mdc-card--global-override material-design-card">
 		<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0">
 			<div tabindex="0"
-				 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
-				<img src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1536421629999-fc4bfa98a8bc-8.jpeg"
-					 alt="Card Title"/></div>
-			<div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Card
-				Title</h2>
-				<h3 class="material-design-card__secondary-text label-medium">Card Secondary</h3></div>
-			<div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium">
+					 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
+				<img
+					src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1536421629999-fc4bfa98a8bc-8.jpeg"
+					alt="Card Title" /></div>
+			<div class="material-design-card__primary"><h2
+				class="material-design-card__title mdc-typography mdc-typography--headline6">Card Title</h2>
+				<h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Card Secondary</h3>
+			</div>
+			<div
+				class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">
 				Card Supporting
 			</div>
 		</div>
 		<div class="mdc-card__actions">
-			<div class="mdc-card__action-buttons"><a href="#"
-													 class="mdc-button mdc-card__action mdc-card__action--button">
+			<div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button">
 				<div class="mdc-button__ripple"></div>
 				<span class="mdc-button__label">ACTION</span></a></div>
 		</div>
@@ -84,30 +85,29 @@ <h3 class="material-design-card__secondary-text label-medium">Card Secondary</h3
 </div>
 <!-- /wp:material/card -->
 
-<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"test","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false,"title":"test","supportingText":"test"},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"test","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false,"secondaryText":"test","title":"test","supportingText":"test"}]} -->
+<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false}]} -->
 <div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1">
 	<div class="masonry-grid layout-masonry">
 		<div style="width:50%" class="masonry-grid_column">
 			<div class="card-container">
 				<div class="mdc-card material-design-card">
-					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded"
-						 tabindex="0">
+					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0">
 						<div tabindex="0"
-							 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
-							<img src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg"
-								 alt="test"/></div>
-						<div class="material-design-card__primary"><h2 class="material-design-card__title title-large">
-							test</h2>
-							<h3 class="material-design-card__secondary-text label-medium"></h3></div>
-						<div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium">
-							test
-						</div>
+								 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
+							<img
+								src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg"
+								alt="" /></div>
+						<div class="material-design-card__primary"><h2
+							class="material-design-card__title mdc-typography mdc-typography--headline6"></h2>
+							<h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"></h3></div>
+						<div
+							class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"></div>
 					</div>
 					<div class="mdc-card__actions">
 						<div class="mdc-card__action-buttons"><a href="#"
-																 class="mdc-button mdc-card__action mdc-card__action--button">
+																										 class="mdc-button mdc-card__action mdc-card__action--button">
 							<div class="mdc-button__ripple"></div>
-							<span class="mdc-button__label">test</span></a></div>
+							<span class="mdc-button__label"></span></a></div>
 					</div>
 				</div>
 			</div>
@@ -115,24 +115,23 @@ <h3 class="material-design-card__secondary-text label-medium"></h3></div>
 		<div style="width:50%" class="masonry-grid_column">
 			<div class="card-container">
 				<div class="mdc-card material-design-card">
-					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded"
-						 tabindex="0">
+					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0">
 						<div tabindex="0"
-							 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
-							<img src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg"
-								 alt="test"/></div>
-						<div class="material-design-card__primary"><h2 class="material-design-card__title title-large">
-							test</h2>
-							<h3 class="material-design-card__secondary-text label-medium">test</h3></div>
-						<div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium">
-							test
-						</div>
+								 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
+							<img
+								src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg"
+								alt="" /></div>
+						<div class="material-design-card__primary"><h2
+							class="material-design-card__title mdc-typography mdc-typography--headline6"></h2>
+							<h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"></h3></div>
+						<div
+							class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"></div>
 					</div>
 					<div class="mdc-card__actions">
 						<div class="mdc-card__action-buttons"><a href="#"
-																 class="mdc-button mdc-card__action mdc-card__action--button">
+																										 class="mdc-button mdc-card__action mdc-card__action--button">
 							<div class="mdc-button__ripple"></div>
-							<span class="mdc-button__label">test</span></a></div>
+							<span class="mdc-button__label"></span></a></div>
 					</div>
 				</div>
 			</div>
@@ -145,17 +144,17 @@ <h3 class="material-design-card__secondary-text label-medium">test</h3></div>
 <div class="wp-block-material-list">
 	<ul class="mdc-list">
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">accessibility</span><span
-				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 1</span></span></li>
+			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 1</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">account_balance_wallet</span><span
-				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 2</span></span></li>
+			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 2</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">account_tree</span><span
-				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 3</span></span></li>
+			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 3</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">6_ft_apart</span><span
-				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 4</span></span></li>
+			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 4</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">5g</span><span
-				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 5</span></span></li>
+			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 5</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">account_balance_wallet</span><span
-				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 6</span></span></li>
+			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 6</span></span></li>
 	</ul>
 </div>
 <!-- /wp:material/list -->
@@ -214,21 +213,20 @@ <h3 class="material-design-card__secondary-text label-medium">test</h3></div>
 <div class="wp-block-material-image-list" id="block-material-image-list-3">
 	<ul class="mdc-image-list mdc-image-list--masonry mdc-image-list--with-text-protection">
 		<li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap"
-											href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"><img
-				class="mdc-image-list__image" alt=""
-				src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"
-				data-id="6907" data-link="http://localhost:8088/material-demo-photo-1558905586-b023029262f1/"/></a></li>
+																				href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"><img
+			class="mdc-image-list__image" alt=""
+			src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"
+			data-id="6907" data-link="http://localhost:8088/material-demo-photo-1558905586-b023029262f1/" /></a></li>
 		<li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap"
-											href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"><img
-				class="mdc-image-list__image" alt=""
-				src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"
-				data-id="6906" data-link="http://localhost:8088/material-demo-photo-1558905585-24d5d344c91d/"/></a></li>
+																				href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"><img
+			class="mdc-image-list__image" alt=""
+			src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"
+			data-id="6906" data-link="http://localhost:8088/material-demo-photo-1558905585-24d5d344c91d/" /></a></li>
 		<li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap"
-											href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"><img
-				class="mdc-image-list__image" alt=""
-				src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"
-				data-id="6904" data-link="http://localhost:8088/material-demo-photo-1531306760863-7fb02a41db12/"/></a>
-		</li>
+																				href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"><img
+			class="mdc-image-list__image" alt=""
+			src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"
+			data-id="6904" data-link="http://localhost:8088/material-demo-photo-1531306760863-7fb02a41db12/" /></a></li>
 	</ul>
 </div>
 <!-- /wp:material/image-list -->
@@ -241,58 +239,53 @@ <h3 class="material-design-card__secondary-text label-medium">test</h3></div>
 <div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-7"} -->
 	<div class="mdc-text-field-container">
 		<div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input
-				id="material-design-name-7" name="material-design-name-7" type="text" required
-				class="mdc-text-field__input" aria-labelledby="label-material-design-name-7" data-form="contact"
-				data-meta="name" data-label="Name"/>
+			id="material-design-name-7" name="material-design-name-7" type="text" required class="mdc-text-field__input"
+			aria-labelledby="label-material-design-name-7" data-form="contact" data-meta="name" data-label="Name" />
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-name-7" class="mdc-floating-label"
-				   id="label-material-design-name-7">Name</label></div>
+			<label for="material-design-name-7" class="mdc-floating-label" id="label-material-design-name-7">Name</label>
+		</div>
 	</div>
 	<!-- /wp:material/name-input-field -->
 
 	<!-- wp:material/email-input-field {"id":"material-design-email-9"} -->
 	<div class="mdc-text-field-container">
 		<div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input
-				id="material-design-email-9" name="material-design-email-9" type="email" required
-				class="mdc-text-field__input" aria-labelledby="label-material-design-email-9" data-form="contact"
-				data-meta="email" data-label="Email"/>
+			id="material-design-email-9" name="material-design-email-9" type="email" required class="mdc-text-field__input"
+			aria-labelledby="label-material-design-email-9" data-form="contact" data-meta="email" data-label="Email" />
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-email-9" class="mdc-floating-label"
-				   id="label-material-design-email-9">Email</label></div>
+			<label for="material-design-email-9" class="mdc-floating-label" id="label-material-design-email-9">Email</label>
+		</div>
 	</div>
 	<!-- /wp:material/email-input-field -->
 
 	<!-- wp:material/website-input-field {"id":"material-design-website-11"} -->
 	<div class="mdc-text-field-container mdc-text-field-container--not-required">
 		<div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input
-				id="material-design-website-11" name="material-design-website-11" type="url"
-				class="mdc-text-field__input" aria-labelledby="label-material-design-website-11" data-form="contact"
-				data-meta="website" data-label="Website"/>
+			id="material-design-website-11" name="material-design-website-11" type="url" class="mdc-text-field__input"
+			aria-labelledby="label-material-design-website-11" data-form="contact" data-meta="website" data-label="Website" />
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-website-11" class="mdc-floating-label" id="label-material-design-website-11">Website</label>
-		</div>
+			<label for="material-design-website-11" class="mdc-floating-label"
+						 id="label-material-design-website-11">Website</label></div>
 	</div>
 	<!-- /wp:material/website-input-field -->
 
 	<!-- wp:material/message-input-field {"id":"material-design-message-3","outlined":false} -->
 	<div class="mdc-text-field-container">
 		<div class="mdc-text-field mdc-text-field--textarea mdc-text-field--custom-full"><span
-				class="mdc-text-field__ripple"></span><textarea id="material-design-message-3"
-																name="material-design-message-3"
-																class="mdc-text-field__input" rows="8"
-																aria-labelledby="label-material-design-message-3"
-																data-form="contact" data-meta="message"
-																data-label="Message" required></textarea>
+			class="mdc-text-field__ripple"></span><textarea id="material-design-message-3" name="material-design-message-3"
+																											class="mdc-text-field__input" rows="8"
+																											aria-labelledby="label-material-design-message-3"
+																											data-form="contact" data-meta="message" data-label="Message"
+																											required></textarea>
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-message-3" class="mdc-floating-label" id="label-material-design-message-3">Message</label>
-		</div>
+			<label for="material-design-message-3" class="mdc-floating-label"
+						 id="label-material-design-message-3">Message</label></div>
 	</div>
 	<!-- /wp:material/message-input-field -->
 
 	<!-- wp:material/button {"style":"unelevated","isSubmit":true} -->
 	<div class="wp-block-material-button" id="block-material-button-11">
-		<button class="mdc-button mdc-button--unelevated" type="submit"><i
-				class="material-icons mdc-button__icon">spa</i>
+		<button class="mdc-button mdc-button--unelevated" type="submit"><i class="material-icons mdc-button__icon">spa</i>
 			<div class="mdc-button__ripple"></div>
 			<span class="mdc-button__label">Send</span></button>
 	</div>
diff --git a/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
index 09754871e..4de0ec88f 100644
--- a/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
@@ -566,7 +566,7 @@ Object {
               <h2
                 aria-label="Title goes here"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -575,7 +575,7 @@ Object {
               <h3
                 aria-label="Secondary text"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -585,7 +585,7 @@ Object {
             <div
               aria-label="Supporting text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -1176,7 +1176,7 @@ Object {
             <h2
               aria-label="Title goes here"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+              class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -1185,7 +1185,7 @@ Object {
             <h3
               aria-label="Secondary text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -1195,7 +1195,7 @@ Object {
           <div
             aria-label="Supporting text"
             aria-multiline="true"
-            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
             role="textbox"
             style="white-space: pre-wrap;"
           >
@@ -1867,7 +1867,7 @@ Object {
               <h2
                 aria-label="Title goes here"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -1876,7 +1876,7 @@ Object {
               <h3
                 aria-label="Secondary text"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -1886,7 +1886,7 @@ Object {
             <div
               aria-label="Supporting text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -2477,7 +2477,7 @@ Object {
             <h2
               aria-label="Title goes here"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+              class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -2486,7 +2486,7 @@ Object {
             <h3
               aria-label="Secondary text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -2496,7 +2496,7 @@ Object {
           <div
             aria-label="Supporting text"
             aria-multiline="true"
-            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
             role="textbox"
             style="white-space: pre-wrap;"
           >
@@ -3155,7 +3155,7 @@ Object {
               <h2
                 aria-label="Title goes here"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -3164,7 +3164,7 @@ Object {
               <h3
                 aria-label="Secondary text"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -3743,7 +3743,7 @@ Object {
             <h2
               aria-label="Title goes here"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+              class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -3752,7 +3752,7 @@ Object {
             <h3
               aria-label="Secondary text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               role="textbox"
               style="white-space: pre-wrap;"
             >
diff --git a/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap
index 2bc3567d6..c05e94aa8 100644
--- a/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap
@@ -47,18 +47,18 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title title-large"
+                class="material-design-card__title mdc-typography mdc-typography--headline6"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text label-medium"
+                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               >
                 Test secondary text
               </h3>
             </div>
             <div
-              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
             >
               Test supporting text
             </div>
@@ -124,18 +124,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -282,18 +282,18 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title title-large"
+                class="material-design-card__title mdc-typography mdc-typography--headline6"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text label-medium"
+                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               >
                 Test secondary text
               </h3>
             </div>
             <div
-              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
             >
               Test supporting text
             </div>
@@ -359,18 +359,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -517,12 +517,12 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title title-large"
+                class="material-design-card__title mdc-typography mdc-typography--headline6"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text label-medium"
+                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               >
                 Test secondary text
               </h3>
@@ -589,12 +589,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap
index b84d2ae08..5ebbe1e78 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap
@@ -9,7 +9,7 @@ Object {
         class="material-design-card__primary"
       >
         <h3
-          class="material-design-card__secondary-text label-medium"
+          class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
         >
           Test Secondary text
         </h3>
@@ -21,7 +21,7 @@ Object {
       class="material-design-card__primary"
     >
       <h3
-        class="material-design-card__secondary-text label-medium"
+        class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
       >
         Test Secondary text
       </h3>
@@ -90,7 +90,7 @@ Object {
         class="material-design-card__primary"
       >
         <h2
-          class="material-design-card__title title-large"
+          class="material-design-card__title mdc-typography mdc-typography--headline6"
         >
           Test Title
         </h2>
@@ -102,7 +102,7 @@ Object {
       class="material-design-card__primary"
     >
       <h2
-        class="material-design-card__title title-large"
+        class="material-design-card__title mdc-typography mdc-typography--headline6"
       >
         Test Title
       </h2>
@@ -173,7 +173,7 @@ Object {
         <h3
           aria-label="Secondary text"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -189,7 +189,7 @@ Object {
       <h3
         aria-label="Secondary text"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -262,7 +262,7 @@ Object {
         <h2
           aria-label="Title goes here"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+          class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -278,7 +278,7 @@ Object {
       <h2
         aria-label="Title goes here"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+        class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -351,7 +351,7 @@ Object {
         <h2
           aria-label="Title goes here"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+          class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -360,7 +360,7 @@ Object {
         <h3
           aria-label="Secondary text"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -376,7 +376,7 @@ Object {
       <h2
         aria-label="Title goes here"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+        class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -385,7 +385,7 @@ Object {
       <h3
         aria-label="Secondary text"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -456,12 +456,12 @@ Object {
         class="material-design-card__primary"
       >
         <h2
-          class="material-design-card__title title-large"
+          class="material-design-card__title mdc-typography mdc-typography--headline6"
         >
           Test Title
         </h2>
         <h3
-          class="material-design-card__secondary-text label-medium"
+          class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
         >
           Test Secondary text
         </h3>
@@ -473,12 +473,12 @@ Object {
       class="material-design-card__primary"
     >
       <h2
-        class="material-design-card__title title-large"
+        class="material-design-card__title mdc-typography mdc-typography--headline6"
       >
         Test Title
       </h2>
       <h3
-        class="material-design-card__secondary-text label-medium"
+        class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
       >
         Test Secondary text
       </h3>
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap
index dd56ca7c5..dde96474d 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+        class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
       >
         Test supporting text
       </div>
@@ -14,7 +14,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+      class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
     >
       Test supporting text
     </div>
@@ -81,7 +81,7 @@ Object {
       <div
         aria-label="Supporting text"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+        class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -93,7 +93,7 @@ Object {
     <div
       aria-label="Supporting text"
       aria-multiline="true"
-      class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+      class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
       role="textbox"
       style="white-space: pre-wrap;"
     >
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap
index 0e5a974b4..5a3dd77af 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap
@@ -46,12 +46,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -116,12 +116,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
@@ -267,12 +267,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -299,12 +299,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
@@ -411,12 +411,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -480,12 +480,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
@@ -626,12 +626,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -691,12 +691,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap
index 7f6799453..fcec2f734 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap
@@ -46,18 +46,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -121,18 +121,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -277,18 +277,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -314,18 +314,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -427,12 +427,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -443,7 +443,7 @@ Object {
             tabindex="0"
           />
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -502,12 +502,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
@@ -518,7 +518,7 @@ Object {
           tabindex="0"
         />
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -666,12 +666,12 @@ Object {
                 class="material-design-card__primary"
               >
                 <h2
-                  class="material-design-card__title title-large"
+                  class="material-design-card__title mdc-typography mdc-typography--headline6"
                 >
                   Test title
                 </h2>
                 <h3
-                  class="material-design-card__secondary-text label-medium"
+                  class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                 >
                   Test secondary text
                 </h3>
@@ -679,7 +679,7 @@ Object {
             </div>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -746,12 +746,12 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title title-large"
+                class="material-design-card__title mdc-typography mdc-typography--headline6"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text label-medium"
+                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               >
                 Test secondary text
               </h3>
@@ -759,7 +759,7 @@ Object {
           </div>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -899,18 +899,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -969,18 +969,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -1120,12 +1120,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -1142,12 +1142,12 @@ Object {
                 class="material-design-card__primary"
               >
                 <h2
-                  class="material-design-card__title title-large"
+                  class="material-design-card__title mdc-typography mdc-typography--headline6"
                 >
                   Test title
                 </h2>
                 <h3
-                  class="material-design-card__secondary-text label-medium"
+                  class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                 >
                   Test secondary text
                 </h3>
@@ -1155,7 +1155,7 @@ Object {
             </div>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -1214,12 +1214,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
@@ -1236,12 +1236,12 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title title-large"
+                class="material-design-card__title mdc-typography mdc-typography--headline6"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text label-medium"
+                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
               >
                 Test secondary text
               </h3>
@@ -1249,7 +1249,7 @@ Object {
           </div>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -1393,18 +1393,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -1467,18 +1467,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -1618,18 +1618,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
           >
             Test supporting text
           </div>
@@ -1688,18 +1688,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
         >
           Test supporting text
         </div>
@@ -1844,12 +1844,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title title-large"
+              class="material-design-card__title mdc-typography mdc-typography--headline6"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text label-medium"
+              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
             >
               Test secondary text
             </h3>
@@ -1914,12 +1914,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title title-large"
+            class="material-design-card__title mdc-typography mdc-typography--headline6"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text label-medium"
+            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
           >
             Test secondary text
           </h3>
diff --git a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
index 3d8e6c194..499534a21 100644
--- a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
@@ -1248,7 +1248,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1257,7 +1257,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1267,7 +1267,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -1329,7 +1329,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1338,7 +1338,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1348,7 +1348,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -1410,7 +1410,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1419,7 +1419,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1429,7 +1429,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2687,7 +2687,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2696,7 +2696,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2706,7 +2706,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -2768,7 +2768,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2777,7 +2777,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2787,7 +2787,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -2849,7 +2849,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2858,7 +2858,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2868,7 +2868,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -4206,7 +4206,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4215,7 +4215,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4225,7 +4225,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -4281,7 +4281,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4290,7 +4290,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4300,7 +4300,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -4356,7 +4356,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4365,7 +4365,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4375,7 +4375,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5631,7 +5631,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5640,7 +5640,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5650,7 +5650,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -5706,7 +5706,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5715,7 +5715,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5725,7 +5725,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -5781,7 +5781,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5790,7 +5790,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5800,7 +5800,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -6801,7 +6801,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6810,7 +6810,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6867,7 +6867,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6876,7 +6876,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6933,7 +6933,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6942,7 +6942,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -7862,7 +7862,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7871,7 +7871,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7928,7 +7928,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7937,7 +7937,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7994,7 +7994,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -8003,7 +8003,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -12435,7 +12435,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         className="material-design-card__primary"
                       >
                         <ForwardRef
-                          className="material-design-card__title title-large"
+                          className="material-design-card__title mdc-typography mdc-typography--headline6"
                           onChange={[Function]}
                           placeholder="Title goes here"
                           tagName="h2"
@@ -12444,7 +12444,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h2
                             aria-label="Title goes here"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                            className="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12457,7 +12457,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           </h2>
                         </ForwardRef>
                         <ForwardRef
-                          className="material-design-card__secondary-text label-medium"
+                          className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                           onChange={[Function]}
                           placeholder="Secondary text"
                           tagName="h3"
@@ -12466,7 +12466,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h3
                             aria-label="Secondary text"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12488,7 +12488,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                       supportingText="Supporting text #1"
                     >
                       <ForwardRef
-                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                         onChange={[Function]}
                         placeholder="Supporting text"
                         tagName="div"
@@ -12497,7 +12497,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         <div
                           aria-label="Supporting text"
                           aria-multiline="true"
-                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                           onInput={[Function]}
                           role="textbox"
                           style={
@@ -12754,7 +12754,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         className="material-design-card__primary"
                       >
                         <ForwardRef
-                          className="material-design-card__title title-large"
+                          className="material-design-card__title mdc-typography mdc-typography--headline6"
                           onChange={[Function]}
                           placeholder="Title goes here"
                           tagName="h2"
@@ -12763,7 +12763,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h2
                             aria-label="Title goes here"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__title title-large"
+                            className="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12776,7 +12776,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           </h2>
                         </ForwardRef>
                         <ForwardRef
-                          className="material-design-card__secondary-text label-medium"
+                          className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                           onChange={[Function]}
                           placeholder="Secondary text"
                           tagName="h3"
@@ -12785,7 +12785,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h3
                             aria-label="Secondary text"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
+                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12807,7 +12807,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                       supportingText="Supporting text #2"
                     >
                       <ForwardRef
-                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                         onChange={[Function]}
                         placeholder="Supporting text"
                         tagName="div"
@@ -12816,7 +12816,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         <div
                           aria-label="Supporting text"
                           aria-multiline="true"
-                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                           onInput={[Function]}
                           role="textbox"
                           style={
diff --git a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap
index afc1fee16..a41d5dac5 100644
--- a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap
@@ -54,18 +54,18 @@ Object {
                     class="material-design-card__primary"
                   >
                     <h2
-                      class="material-design-card__title title-large"
+                      class="material-design-card__title mdc-typography mdc-typography--headline6"
                     >
                       Title goes here
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text label-medium"
+                      class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     >
                       Secondary text
                     </h3>
                   </div>
                   <div
-                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   >
                     Supporting text
                   </div>
@@ -124,18 +124,18 @@ Object {
                   class="material-design-card__primary"
                 >
                   <h2
-                    class="material-design-card__title title-large"
+                    class="material-design-card__title mdc-typography mdc-typography--headline6"
                   >
                     Title goes here
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text label-medium"
+                    class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                   >
                     Secondary text
                   </h3>
                 </div>
                 <div
-                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                 >
                   Supporting text
                 </div>
@@ -274,18 +274,18 @@ Object {
                     class="material-design-card__primary"
                   >
                     <h2
-                      class="material-design-card__title title-large"
+                      class="material-design-card__title mdc-typography mdc-typography--headline6"
                     >
                       Title goes here
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text label-medium"
+                      class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     >
                       Secondary text
                     </h3>
                   </div>
                   <div
-                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                   >
                     Supporting text
                   </div>
@@ -343,18 +343,18 @@ Object {
                   class="material-design-card__primary"
                 >
                   <h2
-                    class="material-design-card__title title-large"
+                    class="material-design-card__title mdc-typography mdc-typography--headline6"
                   >
                     Title goes here
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text label-medium"
+                    class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                   >
                     Secondary text
                   </h3>
                 </div>
                 <div
-                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
+                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
                 >
                   Supporting text
                 </div>
@@ -493,12 +493,12 @@ Object {
                     class="material-design-card__primary"
                   >
                     <h2
-                      class="material-design-card__title title-large"
+                      class="material-design-card__title mdc-typography mdc-typography--headline6"
                     >
                       Title goes here
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text label-medium"
+                      class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                     >
                       Secondary text
                     </h3>
@@ -557,12 +557,12 @@ Object {
                   class="material-design-card__primary"
                 >
                   <h2
-                    class="material-design-card__title title-large"
+                    class="material-design-card__title mdc-typography mdc-typography--headline6"
                   >
                     Title goes here
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text label-medium"
+                    class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
                   >
                     Secondary text
                   </h3>
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
index 234176d77..58f04e727 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
@@ -53,14 +53,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -110,14 +110,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -182,14 +182,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -239,14 +239,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -387,14 +387,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -404,7 +404,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 1 excerpt
@@ -454,14 +454,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -471,7 +471,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 2 excerpt
@@ -528,14 +528,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -545,7 +545,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   Example 1 excerpt
@@ -595,14 +595,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -612,7 +612,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
index 234176d77..58f04e727 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
@@ -53,14 +53,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -110,14 +110,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -182,14 +182,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -239,14 +239,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -387,14 +387,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -404,7 +404,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 1 excerpt
@@ -454,14 +454,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -471,7 +471,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 2 excerpt
@@ -528,14 +528,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -545,7 +545,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   Example 1 excerpt
@@ -595,14 +595,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -612,7 +612,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap
index 3733d2e1f..1584e0473 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap
@@ -9,14 +9,14 @@ Object {
         class="single-post-card__primary"
       >
         <h2
-          class="single-post-card__title title-large"
+          class="single-post-card__title mdc-typography mdc-typography--headline6"
         >
           <div>
             Test Title
           </div>
         </h2>
         <h3
-          class="single-post-card__subtitle label-medium"
+          class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
         >
           <time
             datetime="2020-02-25 08:20:38"
@@ -32,14 +32,14 @@ Object {
       class="single-post-card__primary"
     >
       <h2
-        class="single-post-card__title title-large"
+        class="single-post-card__title mdc-typography mdc-typography--headline6"
       >
         <div>
           Test Title
         </div>
       </h2>
       <h3
-        class="single-post-card__subtitle label-medium"
+        class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
       >
         <time
           datetime="2020-02-25 08:20:38"
@@ -112,7 +112,7 @@ Object {
         class="single-post-card__primary"
       >
         <h2
-          class="single-post-card__title title-large"
+          class="single-post-card__title mdc-typography mdc-typography--headline6"
         >
           <div>
             Test Title
@@ -126,7 +126,7 @@ Object {
       class="single-post-card__primary"
     >
       <h2
-        class="single-post-card__title title-large"
+        class="single-post-card__title mdc-typography mdc-typography--headline6"
       >
         <div>
           Test Title
@@ -197,12 +197,12 @@ Object {
         class="single-post-card__primary"
       >
         <h2
-          class="single-post-card__title title-large"
+          class="single-post-card__title mdc-typography mdc-typography--headline6"
         >
           (no title)
         </h2>
         <h3
-          class="single-post-card__subtitle label-medium"
+          class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
         >
           <time
             datetime="2020-02-25 08:20:38"
@@ -218,12 +218,12 @@ Object {
       class="single-post-card__primary"
     >
       <h2
-        class="single-post-card__title title-large"
+        class="single-post-card__title mdc-typography mdc-typography--headline6"
       >
         (no title)
       </h2>
       <h3
-        class="single-post-card__subtitle label-medium"
+        class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
       >
         <time
           datetime="2020-02-25 08:20:38"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap
index 9f4efc902..0f008f6a9 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap
@@ -16,14 +16,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -48,14 +48,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
index 9ee3999c5..a3cb3c670 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
@@ -20,14 +20,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -100,14 +100,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -237,14 +237,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -317,14 +317,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -450,14 +450,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -526,14 +526,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -659,14 +659,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -691,14 +691,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -784,14 +784,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -820,14 +820,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -909,14 +909,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -985,14 +985,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
index 774204ef8..4e156dbcc 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
@@ -25,14 +25,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       This is a test post title #1
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-02-25 08:20:38"
@@ -46,7 +46,7 @@ Object {
                   style="background-image: url(http://example.com/test1.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     This is a test post excerpt #1
@@ -95,14 +95,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       This is a test post title #2
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-02-25 09:20:38"
@@ -116,7 +116,7 @@ Object {
                   style="background-image: url(http://example.com/test2.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     This is a test post excerpt #2
@@ -176,14 +176,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     This is a test post title #1
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -197,7 +197,7 @@ Object {
                 style="background-image: url(http://example.com/test1.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   This is a test post excerpt #1
@@ -246,14 +246,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     This is a test post title #2
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 09:20:38"
@@ -267,7 +267,7 @@ Object {
                 style="background-image: url(http://example.com/test2.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   This is a test post excerpt #2
@@ -388,14 +388,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       This is a test post title #1
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-02-25 08:20:38"
@@ -451,14 +451,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       This is a test post title #2
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-02-25 09:20:38"
@@ -525,14 +525,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     This is a test post title #1
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -588,14 +588,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     This is a test post title #2
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 09:20:38"
@@ -714,14 +714,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       This is a test post title #1
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-02-25 08:20:38"
@@ -735,7 +735,7 @@ Object {
                   style="background-image: url(http://example.com/test1.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     This is a test post excerpt #1
@@ -787,14 +787,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       This is a test post title #2
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-02-25 09:20:38"
@@ -808,7 +808,7 @@ Object {
                   style="background-image: url(http://example.com/test2.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     This is a test post excerpt #2
@@ -867,14 +867,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     This is a test post title #1
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -888,7 +888,7 @@ Object {
                 style="background-image: url(http://example.com/test1.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   This is a test post excerpt #1
@@ -940,14 +940,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     This is a test post title #2
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 09:20:38"
@@ -961,7 +961,7 @@ Object {
                 style="background-image: url(http://example.com/test2.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   This is a test post excerpt #2
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
index 4efe01eff..65a397b40 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
@@ -16,14 +16,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 This is a test post title #1
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -37,7 +37,7 @@ Object {
             style="background-image: url(http://example.com/test1.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test post excerpt #1
@@ -85,14 +85,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               This is a test post title #1
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -106,7 +106,7 @@ Object {
           style="background-image: url(http://example.com/test1.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test post excerpt #1
@@ -215,14 +215,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 This is a test post title #1
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -277,14 +277,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               This is a test post title #1
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -392,14 +392,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 This is a test post title #1
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -413,7 +413,7 @@ Object {
             style="background-image: url(http://example.com/test1.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test post excerpt #1
@@ -461,14 +461,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               This is a test post title #1
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -482,7 +482,7 @@ Object {
           style="background-image: url(http://example.com/test1.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test post excerpt #1
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
index 9d6fcd7a2..94f3f3ff7 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
@@ -16,14 +16,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -37,7 +37,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -103,14 +103,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -124,7 +124,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -247,14 +247,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -268,7 +268,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -334,14 +334,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -355,7 +355,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -478,14 +478,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -495,7 +495,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -561,14 +561,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -578,7 +578,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -708,14 +708,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Test Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -727,7 +727,7 @@ Object {
             </div>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -800,14 +800,14 @@ Object {
               class="single-post-card__primary"
             >
               <h2
-                class="single-post-card__title title-large"
+                class="single-post-card__title mdc-typography mdc-typography--headline6"
               >
                 <div>
                   Test Title
                 </div>
               </h2>
               <h3
-                class="single-post-card__subtitle label-medium"
+                class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
               >
                 <time
                   datetime="2020-02-25 08:20:38"
@@ -819,7 +819,7 @@ Object {
           </div>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -946,14 +946,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -963,7 +963,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -1033,14 +1033,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1050,7 +1050,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -1173,14 +1173,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1253,14 +1253,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1390,14 +1390,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1422,14 +1422,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1511,14 +1511,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1532,7 +1532,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test a ...
@@ -1598,14 +1598,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1619,7 +1619,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test a ...
@@ -1742,14 +1742,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1759,7 +1759,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -1825,14 +1825,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1842,7 +1842,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -1965,14 +1965,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1982,7 +1982,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -2004,14 +2004,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -2021,7 +2021,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -2100,14 +2100,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -2121,7 +2121,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -2143,14 +2143,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -2164,7 +2164,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
@@ -2243,14 +2243,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title title-large"
+              class="single-post-card__title mdc-typography mdc-typography--headline6"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle label-medium"
+              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -2260,7 +2260,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
           >
             <div>
               This is a test excerpt
@@ -2326,14 +2326,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title title-large"
+            class="single-post-card__title mdc-typography mdc-typography--headline6"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle label-medium"
+            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -2343,7 +2343,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
         >
           <div>
             This is a test excerpt
diff --git a/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
index bfc1b5bd1..74f43eea1 100644
--- a/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
@@ -3418,14 +3418,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -3435,7 +3435,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 1 excerpt
@@ -3485,14 +3485,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -3502,7 +3502,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 2 excerpt
@@ -4572,14 +4572,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -4589,7 +4589,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   Example 1 excerpt
@@ -4639,14 +4639,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title title-large"
+                  class="single-post-card__title mdc-typography mdc-typography--headline6"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle label-medium"
+                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -4656,7 +4656,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
               >
                 <div>
                   Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
index 3defbb120..a221c0fdd 100644
--- a/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
@@ -1042,14 +1042,14 @@ Object {
                     class="single-post-card__primary"
                   >
                     <h2
-                      class="single-post-card__title title-large"
+                      class="single-post-card__title mdc-typography mdc-typography--headline6"
                     >
                       <div>
                         Example 1 Title
                       </div>
                     </h2>
                     <h3
-                      class="single-post-card__subtitle label-medium"
+                      class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                     >
                       <time
                         datetime="2020-03-26 12:00:00"
@@ -1059,7 +1059,7 @@ Object {
                     </h3>
                   </div>
                   <div
-                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                   >
                     <div>
                       Example 1 excerpt
@@ -1109,14 +1109,14 @@ Object {
                     class="single-post-card__primary"
                   >
                     <h2
-                      class="single-post-card__title title-large"
+                      class="single-post-card__title mdc-typography mdc-typography--headline6"
                     >
                       <div>
                         Example 2 Title
                       </div>
                     </h2>
                     <h3
-                      class="single-post-card__subtitle label-medium"
+                      class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                     >
                       <time
                         datetime="2020-03-26 12:00:00"
@@ -1126,7 +1126,7 @@ Object {
                     </h3>
                   </div>
                   <div
-                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                   >
                     <div>
                       Example 2 excerpt
@@ -2177,14 +2177,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -2194,7 +2194,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 1 excerpt
@@ -2244,14 +2244,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title title-large"
+                    class="single-post-card__title mdc-typography mdc-typography--headline6"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle label-medium"
+                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -2261,7 +2261,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
                 >
                   <div>
                     Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap
index 644625c05..ca7627c27 100644
--- a/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap
@@ -87,10 +87,10 @@ Object {
         </div>
         <div>
           <div
-            class="mdc-tab-content body-large mdc-tab-content--active"
+            class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"
           />
           <div
-            class="mdc-tab-content body-large"
+            class="mdc-tab-content mdc-typography--body1"
           />
         </div>
       </div>
@@ -179,10 +179,10 @@ Object {
       </div>
       <div>
         <div
-          class="mdc-tab-content body-large mdc-tab-content--active"
+          class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"
         />
         <div
-          class="mdc-tab-content body-large"
+          class="mdc-tab-content mdc-typography--body1"
         />
       </div>
     </div>
diff --git a/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap b/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap
index 2c328b5a7..ed1ecf894 100644
--- a/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap
+++ b/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap
@@ -9,13 +9,13 @@ Object {
         id="material-library-preview"
       >
         <h2
-          class="headline-large"
+          class="mdc-typography--headline2"
         >
           Material Components
         </h2>
         <section>
           <h3
-            class="headline-medium"
+            class="mdc-typography--headline3"
           >
             Blocks
           </h3>
@@ -25,7 +25,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Buttons
@@ -118,7 +118,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Cards
@@ -155,20 +155,20 @@ Object {
                     style="padding: 16px;"
                   >
                     <h2
-                      class="title-large material-design-card__title"
+                      class="mdc-typography mdc-typography--headline6 material-design-card__title"
                       style="margin: 0px 0px 5px 0px;"
                     >
                       Our Changing Planet
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text"
+                      class="mdc-typography material-design-card__secondary-text"
                       style="font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; margin: 0px;"
                     >
                       by John Smith
                     </h3>
                   </div>
                   <div
-                    class="body-medium"
+                    class="mdc-typography mdc-typography--body2"
                     style="padding: 16px;"
                   >
                     Visit ten places on our planet that are undergoing the biggest changes today.
@@ -208,7 +208,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Data Tables
@@ -380,7 +380,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Gallery (Image Lists)
@@ -492,7 +492,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Lists
@@ -740,7 +740,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Tabs
@@ -878,7 +878,7 @@ Object {
           style="margin-top: 100px;"
         >
           <h3
-            class="headline-medium"
+            class="mdc-typography--headline3"
           >
             Components
           </h3>
@@ -891,7 +891,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Checkboxes
@@ -1025,7 +1025,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Chips
@@ -1100,7 +1100,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Radio buttons
@@ -1167,7 +1167,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Text fields
@@ -1257,7 +1257,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
               style="margin: 0px;"
             >
               Switches
@@ -1307,13 +1307,13 @@ Object {
       id="material-library-preview"
     >
       <h2
-        class="headline-large"
+        class="mdc-typography--headline2"
       >
         Material Components
       </h2>
       <section>
         <h3
-          class="headline-medium"
+          class="mdc-typography--headline3"
         >
           Blocks
         </h3>
@@ -1323,7 +1323,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Buttons
@@ -1416,7 +1416,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Cards
@@ -1453,20 +1453,20 @@ Object {
                   style="padding: 16px;"
                 >
                   <h2
-                    class="title-large material-design-card__title"
+                    class="mdc-typography mdc-typography--headline6 material-design-card__title"
                     style="margin: 0px 0px 5px 0px;"
                   >
                     Our Changing Planet
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text"
+                    class="mdc-typography material-design-card__secondary-text"
                     style="font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; margin: 0px;"
                   >
                     by John Smith
                   </h3>
                 </div>
                 <div
-                  class="body-medium"
+                  class="mdc-typography mdc-typography--body2"
                   style="padding: 16px;"
                 >
                   Visit ten places on our planet that are undergoing the biggest changes today.
@@ -1506,7 +1506,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Data Tables
@@ -1678,7 +1678,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Gallery (Image Lists)
@@ -1790,7 +1790,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Lists
@@ -2038,7 +2038,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Tabs
@@ -2176,7 +2176,7 @@ Object {
         style="margin-top: 100px;"
       >
         <h3
-          class="headline-medium"
+          class="mdc-typography--headline3"
         >
           Components
         </h3>
@@ -2189,7 +2189,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Checkboxes
@@ -2323,7 +2323,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Chips
@@ -2398,7 +2398,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Radio buttons
@@ -2465,7 +2465,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Text fields
@@ -2555,7 +2555,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
             style="margin: 0px;"
           >
             Switches
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 1ffeb8f49..508c7e947 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -7,7 +7,7 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
   <span
     className="customize-control-title google-fonts-control-title__child"
   >
-    Test: Headline Large
+    Test item
   </span>
   <div
     className="google-fonts-control__values"
@@ -20,39 +20,14 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-line-height-control-headline-large"
-          id="inspector-line-height-label-headline-large"
-        >
-          Line height
-        </label>
-        <input
-          className="components-google-fonts-control__number"
-          id="inspector-line-height-control-headline-large"
-          max={64}
-          min={0}
-          onChange={[Function]}
-          step="0.01"
-          type="number"
-          value={0}
-        />
-      </div>
-    </div>
-    <div
-      className="components-base-control"
-    >
-      <div
-        className="components-base-control__field"
-      >
-        <label
-          className="components-base-control__label"
-          htmlFor="inspector-size-control-headline-large"
-          id="inspector-size-label-headline-large"
+          htmlFor="inspector-number-control-headline1"
+          id="inspector-number-label-headline1"
         >
           Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-size-control-headline-large"
+          id="inspector-number-control-headline1"
           max={96}
           min={2}
           onChange={[Function]}
@@ -61,30 +36,6 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
         />
       </div>
     </div>
-    <div
-      className="components-base-control"
-    >
-      <div
-        className="components-base-control__field"
-      >
-        <label
-          className="components-base-control__label"
-          htmlFor="inspector-tracking-control-headline-large"
-          id="inspector-tracking-label-headline-large"
-        >
-          Tracking
-        </label>
-        <input
-          className="components-google-fonts-control__number"
-          id="inspector-tracking-control-headline-large"
-          max={100}
-          min={-5}
-          onChange={[Function]}
-          type="number"
-          value={0}
-        />
-      </div>
-    </div>
     <ForwardRef(SelectControl)
       className="components-google-fonts-control__select"
       label="Weight"
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/item.test.js b/plugin/tests/js/customizer/components/google-fonts-control/item.test.js
index 08729c94b..6a59acfb4 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/item.test.js
+++ b/plugin/tests/js/customizer/components/google-fonts-control/item.test.js
@@ -30,8 +30,8 @@ const setupShallow = props => {
 };
 
 const baseProps = {
-	label: 'Test: Headline Large',
-	id: 'headline-large',
+	label: 'Test item',
+	id: 'headline1',
 	size: {
 		label: 'Size',
 		value: 96,
@@ -48,19 +48,6 @@ const baseProps = {
 			{ label: '500', value: '500' },
 		],
 	},
-	lineHeight: {
-		value: 0,
-		label: 'Line height',
-		min: 0,
-		max: 64,
-		default: 0,
-	},
-	tracking: {
-		label: 'Tracking',
-		min: -5,
-		max: 100,
-		default: 0,
-	},
 };
 
 describe( 'GoogleFontsControl/Item', () => {
@@ -84,64 +71,12 @@ describe( 'GoogleFontsControl/Item', () => {
 			...baseProps,
 			onChange: onChangeMock,
 		} );
-		wrapper
-			.find( '#inspector-size-control-headline-large' )
-			.simulate( 'change', event );
+		wrapper.find( 'input' ).simulate( 'change', event );
 
 		expect( onChangeMock ).toHaveBeenCalledWith( {
 			id: baseProps.id,
 			weightValue: baseProps.weight.value,
 			sizeValue: 12,
-			lineHeightValue: baseProps.lineHeight.value,
-			trackingValue: baseProps.tracking.value,
-		} );
-	} );
-
-	it( 'should call onChange line height prop', () => {
-		const onChangeMock = jest.fn();
-		const event = {
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			preventDefault() {},
-			target: { value: 10 },
-		};
-		const wrapper = setupShallow( {
-			...baseProps,
-			onChange: onChangeMock,
-		} );
-		wrapper
-			.find( '#inspector-line-height-control-headline-large' )
-			.simulate( 'change', event );
-
-		expect( onChangeMock ).toHaveBeenCalledWith( {
-			id: baseProps.id,
-			weightValue: baseProps.weight.value,
-			sizeValue: baseProps.size.value,
-			lineHeightValue: 10,
-			trackingValue: baseProps.tracking.value,
-		} );
-	} );
-
-	it( 'should call onChange tracking prop', () => {
-		const onChangeMock = jest.fn();
-		const event = {
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			preventDefault() {},
-			target: { value: 10 },
-		};
-		const wrapper = setupShallow( {
-			...baseProps,
-			onChange: onChangeMock,
-		} );
-		wrapper
-			.find( '#inspector-tracking-control-headline-large' )
-			.simulate( 'change', event );
-
-		expect( onChangeMock ).toHaveBeenCalledWith( {
-			id: baseProps.id,
-			weightValue: baseProps.weight.value,
-			sizeValue: baseProps.size.value,
-			lineHeightValue: baseProps.lineHeight.value,
-			trackingValue: 10,
 		} );
 	} );
 
@@ -160,8 +95,6 @@ describe( 'GoogleFontsControl/Item', () => {
 			id: baseProps.id,
 			weightValue: 100,
 			sizeValue: baseProps.size.value,
-			lineHeightValue: baseProps.lineHeight.value,
-			trackingValue: baseProps.tracking.value,
 		} );
 	} );
 
@@ -186,10 +119,7 @@ describe( 'GoogleFontsControl/Item', () => {
 		};
 
 		const wrapper = setupShallow( props );
-		expect(
-			wrapper.find( '#inspector-size-control-headline-large' ).props()
-				.value
-		).toStrictEqual( 96 );
+		expect( wrapper.find( 'input' ).props().value ).toStrictEqual( 96 );
 		expect(
 			wrapper.find( '.components-google-fonts-control__select' ).props()
 				.value
diff --git a/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap b/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap
index 52d40ca83..b35abf404 100644
--- a/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="mdc-layout-grid"
+        class="mdc-layout-grid mdc-typography"
       >
         <div
           class="mdc-layout-grid__inner"
@@ -18,7 +18,7 @@ Object {
               class="material-gsm__heading"
             >
               <div
-                class="title-large"
+                class="mdc-typography--headline6"
               >
                 Getting Started
               </div>
@@ -107,13 +107,11 @@ Object {
             class="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9"
           >
             <h2
-              class="material-gsm__content-title headline-medium"
+              class="material-gsm__content-title mdc-typography--headline3"
             >
               Customize your Theme
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
             </p>
             <img
@@ -144,13 +142,11 @@ Object {
               </button>
             </div>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Starter Styles
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Start from our existing styles and use 
               <a
                 href="https://material.io/design/material-theming/overview.html"
@@ -162,13 +158,11 @@ Object {
                to create a custom look and feel.
             </p>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Color Palettes
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
               <a
                 href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -180,13 +174,11 @@ Object {
                to find complementary, analogous, and triadic tonal palettes.
             </p>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Typography
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Choose from more than 1,000 typefaces in 
               <a
                 href="https://fonts.google.com/"
@@ -206,23 +198,19 @@ Object {
                for inspiration and best practices.
             </p>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Corner Styles
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
             </p>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Icon Style
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               All 
               <a
                 href="http://material.io/icons"
@@ -234,34 +222,28 @@ Object {
                are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
             </p>
             <h2
-              class="material-gsm__content-title headline-medium"
+              class="material-gsm__content-title mdc-typography--headline3"
             >
               Set Layout & Navigation
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
               Choose how comment fields display within each post.
             </p>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Top app bar
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
             </p>
             <h2
-              class="material-gsm__content-title title-large"
+              class="material-gsm__content-title mdc-typography--headline5"
             >
               Footer
             </h2>
-            <p
-              class="body-large"
-            >
+            <p>
               Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
               <a
                 href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
@@ -282,7 +264,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="mdc-layout-grid"
+      class="mdc-layout-grid mdc-typography"
     >
       <div
         class="mdc-layout-grid__inner"
@@ -294,7 +276,7 @@ Object {
             class="material-gsm__heading"
           >
             <div
-              class="title-large"
+              class="mdc-typography--headline6"
             >
               Getting Started
             </div>
@@ -383,13 +365,11 @@ Object {
           class="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9"
         >
           <h2
-            class="material-gsm__content-title headline-medium"
+            class="material-gsm__content-title mdc-typography--headline3"
           >
             Customize your Theme
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
           </p>
           <img
@@ -420,13 +400,11 @@ Object {
             </button>
           </div>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Starter Styles
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Start from our existing styles and use 
             <a
               href="https://material.io/design/material-theming/overview.html"
@@ -438,13 +416,11 @@ Object {
              to create a custom look and feel.
           </p>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Color Palettes
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
             <a
               href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -456,13 +432,11 @@ Object {
              to find complementary, analogous, and triadic tonal palettes.
           </p>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Typography
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Choose from more than 1,000 typefaces in 
             <a
               href="https://fonts.google.com/"
@@ -482,23 +456,19 @@ Object {
              for inspiration and best practices.
           </p>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Corner Styles
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
           </p>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Icon Style
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             All 
             <a
               href="http://material.io/icons"
@@ -510,34 +480,28 @@ Object {
              are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
           </p>
           <h2
-            class="material-gsm__content-title headline-medium"
+            class="material-gsm__content-title mdc-typography--headline3"
           >
             Set Layout & Navigation
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
             Choose how comment fields display within each post.
           </p>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Top app bar
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
           </p>
           <h2
-            class="material-gsm__content-title title-large"
+            class="material-gsm__content-title mdc-typography--headline5"
           >
             Footer
           </h2>
-          <p
-            class="body-large"
-          >
+          <p>
             Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
             <a
               href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
diff --git a/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap b/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap
index db15232bc..cf52f2b19 100644
--- a/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap
+++ b/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap
@@ -6,13 +6,11 @@ Object {
   "baseElement": <body>
     <div>
       <h2
-        class="material-gsm__content-title headline-medium"
+        class="material-gsm__content-title mdc-typography--headline3"
       >
         Customize your Theme
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
       </p>
       <img
@@ -43,13 +41,11 @@ Object {
         </button>
       </div>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Starter Styles
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Start from our existing styles and use 
         <a
           href="https://material.io/design/material-theming/overview.html"
@@ -61,13 +57,11 @@ Object {
          to create a custom look and feel.
       </p>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Color Palettes
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
         <a
           href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -79,13 +73,11 @@ Object {
          to find complementary, analogous, and triadic tonal palettes.
       </p>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Typography
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Choose from more than 1,000 typefaces in 
         <a
           href="https://fonts.google.com/"
@@ -105,23 +97,19 @@ Object {
          for inspiration and best practices.
       </p>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Corner Styles
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
       </p>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Icon Style
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         All 
         <a
           href="http://material.io/icons"
@@ -133,34 +121,28 @@ Object {
          are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
       </p>
       <h2
-        class="material-gsm__content-title headline-medium"
+        class="material-gsm__content-title mdc-typography--headline3"
       >
         Set Layout & Navigation
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
         Choose how comment fields display within each post.
       </p>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Top app bar
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
       </p>
       <h2
-        class="material-gsm__content-title title-large"
+        class="material-gsm__content-title mdc-typography--headline5"
       >
         Footer
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
         <a
           href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
@@ -178,13 +160,11 @@ Object {
   </body>,
   "container": <div>
     <h2
-      class="material-gsm__content-title headline-medium"
+      class="material-gsm__content-title mdc-typography--headline3"
     >
       Customize your Theme
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
     </p>
     <img
@@ -215,13 +195,11 @@ Object {
       </button>
     </div>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Starter Styles
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Start from our existing styles and use 
       <a
         href="https://material.io/design/material-theming/overview.html"
@@ -233,13 +211,11 @@ Object {
        to create a custom look and feel.
     </p>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Color Palettes
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
       <a
         href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -251,13 +227,11 @@ Object {
        to find complementary, analogous, and triadic tonal palettes.
     </p>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Typography
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Choose from more than 1,000 typefaces in 
       <a
         href="https://fonts.google.com/"
@@ -277,23 +251,19 @@ Object {
        for inspiration and best practices.
     </p>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Corner Styles
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
     </p>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Icon Style
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       All 
       <a
         href="http://material.io/icons"
@@ -305,34 +275,28 @@ Object {
        are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
     </p>
     <h2
-      class="material-gsm__content-title headline-medium"
+      class="material-gsm__content-title mdc-typography--headline3"
     >
       Set Layout & Navigation
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
       Choose how comment fields display within each post.
     </p>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Top app bar
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
     </p>
     <h2
-      class="material-gsm__content-title title-large"
+      class="material-gsm__content-title mdc-typography--headline5"
     >
       Footer
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
       <a
         href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
diff --git a/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap b/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap
index 0b533993e..73d32e9d3 100644
--- a/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap
+++ b/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap
@@ -6,13 +6,11 @@ Object {
   "baseElement": <body>
     <div>
       <h2
-        class="material-gsm__content-title headline-medium"
+        class="material-gsm__content-title mdc-typography--headline3"
       >
         Build with Material Blocks
       </h2>
-      <p
-        class="body-large"
-      >
+      <p>
         Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.
       </p>
       <img
@@ -49,13 +47,11 @@ Object {
   </body>,
   "container": <div>
     <h2
-      class="material-gsm__content-title headline-medium"
+      class="material-gsm__content-title mdc-typography--headline3"
     >
       Build with Material Blocks
     </h2>
-    <p
-      class="body-large"
-    >
+    <p>
       Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.
     </p>
     <img
diff --git a/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap b/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap
index 1f913358d..c3480aebb 100644
--- a/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap
+++ b/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <h2
-        class="material-gsm__content-title headline-small"
+        class="material-gsm__content-title mdc-typography--headline3"
       >
         Install the Material Design Theme and quick start examples
       </h2>
@@ -48,7 +48,7 @@ Object {
   </body>,
   "container": <div>
     <h2
-      class="material-gsm__content-title headline-small"
+      class="material-gsm__content-title mdc-typography--headline3"
     >
       Install the Material Design Theme and quick start examples
     </h2>
diff --git a/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap b/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap
index 2200c552c..6fe0e6430 100644
--- a/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ Object {
           class="material-gsm__heading"
         >
           <div
-            class="title-large"
+            class="mdc-typography--headline6"
           >
             Getting Started
           </div>
@@ -107,7 +107,7 @@ Object {
         class="material-gsm__heading"
       >
         <div
-          class="title-large"
+          class="mdc-typography--headline6"
         >
           Getting Started
         </div>
diff --git a/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap b/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap
index cc8c85624..2477ee745 100644
--- a/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap
+++ b/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap
@@ -15,12 +15,12 @@ exports[`Settings: Updater matches snapshot 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="title-large"
+            class="mdc-typography--headline6"
           >
             Google Fonts
           </h3>
           <p
-            class="body-large"
+            class="mdc-typography--body1"
           >
             Last update on Tue, 13 Apr 2021 14:58:26 GMT
           </p>
@@ -101,12 +101,12 @@ exports[`Settings: Updater matches snapshot when disabled 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="title-large"
+            class="mdc-typography--headline6"
           >
             Google Fonts
           </h3>
           <p
-            class="body-large"
+            class="mdc-typography--body1"
           >
             To enable Google Fonts updates please 
             <a
@@ -162,12 +162,12 @@ exports[`Settings: Updater matches snapshot when never updated 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="title-large"
+            class="mdc-typography--headline6"
           >
             Google Fonts
           </h3>
           <p
-            class="body-large"
+            class="mdc-typography--body1"
           >
             Last update on never
           </p>
@@ -248,12 +248,12 @@ exports[`Settings: Updater matches snapshot when should not update 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="title-large"
+            class="mdc-typography--headline6"
           >
             Google Fonts
           </h3>
           <p
-            class="body-large"
+            class="mdc-typography--body1"
           >
             Last update on Tue, 13 Apr 2021 14:58:26 GMT
           </p>
diff --git a/plugin/tests/js/wizard/__snapshots__/index.test.js.snap b/plugin/tests/js/wizard/__snapshots__/index.test.js.snap
index 8aee05e6d..ef357244e 100644
--- a/plugin/tests/js/wizard/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/wizard/__snapshots__/index.test.js.snap
@@ -33,7 +33,7 @@ exports[`Onboarding Wizard matches snapshot 1`] = `
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-11 mdc-layout-grid__cell--align-middle"
           >
             <h2
-              class="title-large"
+              class="mdc-typography--headline5"
             >
               Material Design for WordPress
             </h2>
@@ -189,7 +189,7 @@ exports[`Onboarding Wizard matches snapshot 1`] = `
                 class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
               >
                 <h3
-                  class="headline-medium"
+                  class="mdc-typography--headline3"
                 >
                   Start building
                 </h3>
diff --git a/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap b/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap
index d690424d9..772a082dc 100644
--- a/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap
+++ b/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap
@@ -9,7 +9,7 @@ Object {
         class="mdc-layout-grid__cell--span-12"
       >
         <h3
-          class="headline-medium material-wizard__title"
+          class="mdc-typography--headline3 material-wizard__title"
         >
           Install addons
         </h3>
@@ -28,7 +28,7 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
             >
               Material Design Theme
             </h4>
@@ -79,7 +79,7 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h4
-              class="headline-small"
+              class="mdc-typography--headline4"
             >
               Quick Start Examples
             </h4>
@@ -121,7 +121,7 @@ Object {
       class="mdc-layout-grid__cell--span-12"
     >
       <h3
-        class="headline-medium material-wizard__title"
+        class="mdc-typography--headline3 material-wizard__title"
       >
         Install addons
       </h3>
@@ -140,7 +140,7 @@ Object {
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
           >
             Material Design Theme
           </h4>
@@ -191,7 +191,7 @@ Object {
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h4
-            class="headline-small"
+            class="mdc-typography--headline4"
           >
             Quick Start Examples
           </h4>
diff --git a/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap b/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap
index 443278687..12e9c5240 100644
--- a/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap
@@ -26,7 +26,7 @@ Object {
               class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
             >
               <h3
-                class="headline-medium"
+                class="mdc-typography--headline3"
               >
                 Start building
               </h3>
@@ -61,7 +61,7 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h3
-              class="headline-medium"
+              class="mdc-typography--headline3"
             >
               Start building
             </h3>
diff --git a/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap b/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap
index 19eaf2997..a831a5eae 100644
--- a/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap
+++ b/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap
@@ -23,16 +23,14 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h3
-              class="headline-medium"
+              class="mdc-typography--headline3"
             >
               Congrats!
             </h3>
             <p>
               You've installed Material. Click "Finish" and check out the rest of the Getting Started guide to customize your theme, build with Material Blocks, and apply the theme to your site.
             </p>
-            <p
-              class="body-large"
-            >
+            <p>
               Learn about the concepts behind material Design
             </p>
             <div
@@ -56,9 +54,7 @@ Object {
                 </i>
               </a>
             </div>
-            <p
-              class="body-large"
-            >
+            <p>
               Sign up to get updates and news about material design via email
             </p>
             <div
@@ -106,16 +102,14 @@ Object {
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="headline-medium"
+            class="mdc-typography--headline3"
           >
             Congrats!
           </h3>
           <p>
             You've installed Material. Click "Finish" and check out the rest of the Getting Started guide to customize your theme, build with Material Blocks, and apply the theme to your site.
           </p>
-          <p
-            class="body-large"
-          >
+          <p>
             Learn about the concepts behind material Design
           </p>
           <div
@@ -139,9 +133,7 @@ Object {
               </i>
             </a>
           </div>
-          <p
-            class="body-large"
-          >
+          <p>
             Sign up to get updates and news about material design via email
           </p>
           <div
diff --git a/plugin/tests/js/wizard/components/header/index.test.js b/plugin/tests/js/wizard/components/header/index.test.js
index 0305dccbb..44b05d653 100644
--- a/plugin/tests/js/wizard/components/header/index.test.js
+++ b/plugin/tests/js/wizard/components/header/index.test.js
@@ -35,17 +35,17 @@ describe( 'Header', () => {
 	it( 'should render title', () => {
 		const { container } = setup();
 
-		expect( container.querySelectorAll( '.title-large' ) ).toHaveLength(
-			1
-		);
+		expect(
+			container.querySelectorAll( '.mdc-typography--headline5' )
+		).toHaveLength( 1 );
 	} );
 
 	it( 'should render title text', () => {
 		const { container } = setup();
 
-		expect( container.querySelector( '.title-large' ) ).toHaveTextContent(
-			'Material Design for WordPress'
-		);
+		expect(
+			container.querySelector( '.mdc-typography--headline5' )
+		).toHaveTextContent( 'Material Design for WordPress' );
 	} );
 
 	it( 'should render logo', () => {
diff --git a/plugin/tests/phpunit/php/class-test-block-types.php b/plugin/tests/phpunit/php/class-test-block-types.php
index 6786b42dd..7c36b69c6 100644
--- a/plugin/tests/phpunit/php/class-test-block-types.php
+++ b/plugin/tests/phpunit/php/class-test-block-types.php
@@ -103,7 +103,6 @@ function( $block_name ) use ( $blocks ) {
 				$metadata     = json_decode( file_get_contents( $block_json ), true ); // phpcs:ignore
 
 				$this->assertEquals( $metadata['category'], $block->category );
-				unset( $block->attributes['lock'] );
 				$this->assertEquals( $metadata['attributes'], $block->attributes );
 
 				if ( isset( $metadata['supports'] ) ) {
diff --git a/plugin/tests/phpunit/php/class-test-blocks-frontend.php b/plugin/tests/phpunit/php/class-test-blocks-frontend.php
index 5aa6b25f4..c324ecec0 100644
--- a/plugin/tests/phpunit/php/class-test-blocks-frontend.php
+++ b/plugin/tests/phpunit/php/class-test-blocks-frontend.php
@@ -67,15 +67,15 @@ public static function generate_fixtures( $factory ) {
 				<!-- /wp:material/image-list -->
 
 				<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8}],"gutter":{"desktop":24,"tablet":16,"mobile":10},"cornerRadius":8,"outlined":true} -->
-				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
+				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
 				<!-- /wp:material/cards-collection -->
 
 				<!-- wp:material/cards-collection {"style":"grid","cardsProps":[{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8}],"gutter":{"desktop":24,"tablet":16,"mobile":10},"cornerRadius":8,"outlined":true} -->
-				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-2"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
+				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-2"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
 				<!-- /wp:material/cards-collection -->
 
 				<!-- wp:material/tab-bar {"forceUpdate":false,"tabs":[{"label":"Tab 1","content":[{"clientId":"e94ec7ee-937c-4f21-a06a-38da3da2e52c","name":"material/image-list","isValid":true,"attributes":{"images":[{"id":261,"url":"http://example.com/image1.png","alt":"","link":"http://localhost:8088/?attachment_id=261","caption":"","selected":false},{"id":260,"url":"http://example.com/image3.png","alt":"","link":"http://localhost:8088/?attachment_id=260","caption":"","selected":false},{"id":259,"url":"http://example.com/image2.png","alt":"","link":"http://localhost:8088/?attachment_id=259","caption":"","selected":false},{"id":258,"url":"http://example.com/image4.png","alt":"","link":"http://localhost:8088/?attachment_id=258","caption":"","selected":false},{"id":257,"url":"http://example.com/image5.png","alt":"","link":"http://localhost:8088/?attachment_id=257","caption":"","selected":false},{"id":256,"url":"http://example.com/image6.png","alt":"","link":"http://localhost:8088/?attachment_id=256","caption":"","selected":false},{"id":5,"url":"http://example.com/image7.png","alt":"","link":"http://localhost:8088/?attachment_id=5","caption":"","selected":false}],"style":"masonry","columns":2,"gutter":{"desktop":24,"tablet":16,"mobile":16},"displayCaptions":true,"textProtection":true,"linkTo":"media","cornerRadius":4,"id":"block-material-image-list-10"},"innerBlocks":[]}]},{"label":"Tab 2","content":[{"clientId":"e09ca06b-a7ad-4f9c-a3e3-55b61c821397","name":"material/contact-form","isValid":true,"attributes":{"emailTo":"admin@admin.local","subject":"This e-mail was sent from a contact form on Material Theming","confirmationMessage":"Your request has been successfully submitted","outlined":true,"fullWidth":true},"innerBlocks":[{"clientId":"8585c3e1-5589-44c3-ac63-1efe6cc554a6","name":"material/name-input-field","isValid":true,"attributes":{"inputType":"text","inputRole":"name","label":"Name","isRequired":true,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-name-1"},"innerBlocks":[]},{"clientId":"6e3fdd90-60ea-4b13-a7ad-8b8b1e894a5e","name":"material/email-input-field","isValid":true,"attributes":{"inputType":"email","inputRole":"email","label":"Email","isRequired":true,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-email-3"},"innerBlocks":[]},{"clientId":"01b78109-af15-4bee-97ae-7fe9c1ff7a53","name":"material/website-input-field","isValid":true,"attributes":{"inputType":"url","inputRole":"website","label":"Website","isRequired":false,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-website-5"},"innerBlocks":[]},{"clientId":"a3f92d5d-7ec3-4799-a0b6-45c3dc221e7f","name":"material/message-input-field","isValid":true,"attributes":{"label":"Message","inputRole":"message","isRequired":true,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-message-1"},"innerBlocks":[]},{"clientId":"10847ef6-fe53-4987-925b-e97524fe8c15","name":"material/button","isValid":true,"attributes":{"label":"Submit","type":"text","style":"unelevated","iconPosition":"leading","url":"","rel":"","isSubmit":true,"icon":"spa","cornerRadius":4},"innerBlocks":[]}]}]}]} -->
-				<div class="wp-block-material-tab-bar mdc-tab-bar-container"><div class="mdc-tab-bar" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll"><div class="mdc-tab-scroller__scroll-content"><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--active"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 1</span></span></span><span class="mdc-tab-indicator mdc-tab-indicator--active"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div><div role="tab" tabindex="0" class="mdc-tab tab"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 2</span></span></span><span class="mdc-tab-indicator"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div></div></div></div></div><div><div class="mdc-tab-content body-large mdc-tab-content--active"><div class="wp-block-material-image-list" id="block-material-image-list-10"><ul class="mdc-image-list mdc-image-list--masonry mdc-image-list--with-text-protection"><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image1.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image1.png" data-id="261" data-link="http://localhost:8088/?attachment_id=261"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image3.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image3.png" data-id="260" data-link="http://localhost:8088/?attachment_id=260"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image2.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image2.png" data-id="259" data-link="http://localhost:8088/?attachment_id=259"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image4.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image4.png" data-id="258" data-link="http://localhost:8088/?attachment_id=258"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image5.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image5.png" data-id="257" data-link="http://localhost:8088/?attachment_id=257"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image6.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image6.png" data-id="256" data-link="http://localhost:8088/?attachment_id=256"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image7.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image7.png" data-id="5" data-link="http://localhost:8088/?attachment_id=5"/></a></li></ul></div></div><div class="mdc-tab-content body-large"><div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-1","outlined":true} -->
+				<div class="wp-block-material-tab-bar mdc-tab-bar-container"><div class="mdc-tab-bar" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll"><div class="mdc-tab-scroller__scroll-content"><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--active"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 1</span></span></span><span class="mdc-tab-indicator mdc-tab-indicator--active"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div><div role="tab" tabindex="0" class="mdc-tab tab"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 2</span></span></span><span class="mdc-tab-indicator"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div></div></div></div></div><div><div class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"><div class="wp-block-material-image-list" id="block-material-image-list-10"><ul class="mdc-image-list mdc-image-list--masonry mdc-image-list--with-text-protection"><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image1.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image1.png" data-id="261" data-link="http://localhost:8088/?attachment_id=261"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image3.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image3.png" data-id="260" data-link="http://localhost:8088/?attachment_id=260"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image2.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image2.png" data-id="259" data-link="http://localhost:8088/?attachment_id=259"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image4.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image4.png" data-id="258" data-link="http://localhost:8088/?attachment_id=258"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image5.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image5.png" data-id="257" data-link="http://localhost:8088/?attachment_id=257"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image6.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image6.png" data-id="256" data-link="http://localhost:8088/?attachment_id=256"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image7.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image7.png" data-id="5" data-link="http://localhost:8088/?attachment_id=5"/></a></li></ul></div></div><div class="mdc-tab-content mdc-typography--body1"><div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-1","outlined":true} -->
 				<div class="mdc-text-field-container"><div class="mdc-text-field mdc-text-field--outlined mdc-text-field--custom-full"><input id="material-design-name-1" name="material-design-name-1" type="text" required class="mdc-text-field__input" aria-labelledby="label-material-design-name-1" data-form="contact" data-meta="name" data-label="Name"/><div class="mdc-notched-outline"><div class="mdc-notched-outline__leading"></div><div class="mdc-notched-outline__notch"><label for="material-design-name-1" class="mdc-floating-label" id="label-material-design-name-1">Name</label></div><div class="mdc-notched-outline__trailing"></div></div></div></div>
 				<!-- /wp:material/name-input-field -->
 				<!-- wp:material/email-input-field {"id":"material-design-email-3","outlined":true} -->
diff --git a/plugin/tests/phpunit/php/class-test-importer.php b/plugin/tests/phpunit/php/class-test-importer.php
index 32db4d769..0c2de797b 100644
--- a/plugin/tests/phpunit/php/class-test-importer.php
+++ b/plugin/tests/phpunit/php/class-test-importer.php
@@ -176,7 +176,7 @@ public function test_kses_post() {
 
 		$this->assertEquals( $content, $this->importer->kses_post( $content ) );
 
-		$content = '<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>';
+		$content = '<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>';
 
 		$this->assertEquals( $content, $this->importer->kses_post( $content ) );
 	}
diff --git a/plugin/tests/phpunit/php/customizer/class-test-controls.php b/plugin/tests/phpunit/php/customizer/class-test-controls.php
index 6f7dd61a6..41c029618 100644
--- a/plugin/tests/phpunit/php/customizer/class-test-controls.php
+++ b/plugin/tests/phpunit/php/customizer/class-test-controls.php
@@ -314,34 +314,29 @@ public function test_add_typography_controls() {
 
 		// Set up the expectation for the add_setting() method
 		// to be called.
-		$this->wp_customize->expects( $this->exactly( 20 ) )
+		$this->wp_customize->expects( $this->exactly( 15 ) )
 			->method( 'add_setting' )
 			->withConsecutive(
-				[ $this->equalTo( "{$controls->slug}[display_font_family]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_font_family]" ) ],
-				[ $this->equalTo( "{$controls->slug}[title_font_family]" ) ],
-				[ $this->equalTo( "{$controls->slug}[label_font_family]" ) ],
+				[ $this->equalTo( "{$controls->slug}[head_font_family]" ) ],
 				[ $this->equalTo( "{$controls->slug}[body_font_family]" ) ],
-				[ $this->equalTo( "{$controls->slug}[display_large]" ) ],
-				[ $this->equalTo( "{$controls->slug}[display_medium]" ) ],
-				[ $this->equalTo( "{$controls->slug}[display_small]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_large]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_medium]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_small]" ) ],
-				[ $this->equalTo( "{$controls->slug}[title_large]" ) ],
-				[ $this->equalTo( "{$controls->slug}[title_medium]" ) ],
-				[ $this->equalTo( "{$controls->slug}[title_small]" ) ],
-				[ $this->equalTo( "{$controls->slug}[label_large]" ) ],
-				[ $this->equalTo( "{$controls->slug}[label_medium]" ) ],
-				[ $this->equalTo( "{$controls->slug}[label_small]" ) ],
-				[ $this->equalTo( "{$controls->slug}[body_large]" ) ],
-				[ $this->equalTo( "{$controls->slug}[body_medium]" ) ],
-				[ $this->equalTo( "{$controls->slug}[body_small]" ) ]
+				[ $this->equalTo( "{$controls->slug}[headline_1]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_2]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_3]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_4]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_5]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_6]" ) ],
+				[ $this->equalTo( "{$controls->slug}[subtitle_1]" ) ],
+				[ $this->equalTo( "{$controls->slug}[subtitle_2]" ) ],
+				[ $this->equalTo( "{$controls->slug}[body1]" ) ],
+				[ $this->equalTo( "{$controls->slug}[body2]" ) ],
+				[ $this->equalTo( "{$controls->slug}[button]" ) ],
+				[ $this->equalTo( "{$controls->slug}[caption]" ) ],
+				[ $this->equalTo( "{$controls->slug}[overline]" ) ]
 			);
 
 		// Set up the expectation for the add_control() method
 		// to be called.
-		$this->wp_customize->expects( $this->exactly( 20 ) )
+		$this->wp_customize->expects( $this->exactly( 15 ) )
 			->method( 'add_control' )
 			->withConsecutive(
 				[
@@ -575,7 +570,7 @@ public function test_get_google_fonts_url() {
 
 		// Add filters to return `Raleway` for headings and `Open Sans` for body.
 		add_filter(
-			"{$controls->slug}_get_option_headline_font_family",
+			"{$controls->slug}_get_option_head_font_family",
 			function () {
 				return 'Raleway';
 			}
@@ -589,7 +584,7 @@ function () {
 		);
 
 		// Assert we get updated fonts.
-		$this->assertEquals( '//fonts.googleapis.com/css?family=Material+Icons|Roboto:300,400,500|Raleway:300,400|Open+Sans:400', $controls->get_google_fonts_url() );
+		$this->assertEquals( $controls->get_google_fonts_url(), '//fonts.googleapis.com/css?family=Material+Icons|Raleway:100,400,500|Open+Sans:400,500' );
 	}
 
 	/**
@@ -644,25 +639,19 @@ public function test_get_frontend_css() {
 		$this->assertContains( '--mdc-theme-surface-mix-4: #f5f5f5;', $css );
 		$this->assertContains( '--mdc-theme-surface-mix-12: #e0e0e0;', $css );
 
-		$this->assertContains( '--md-sys-typescale-title-large-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-title-medium-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-title-small-font: "Roboto", sans-serif;', $css );
-
-		$this->assertContains( '--md-sys-typescale-display-large-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-display-medium-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-display-small-font: "Roboto", sans-serif;', $css );
-
-		$this->assertContains( '--md-sys-typescale-label-large-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-label-medium-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-label-small-font: "Roboto", sans-serif;', $css );
-
-		$this->assertContains( '--md-sys-typescale-headline-large-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-headline-medium-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-headline-small-font: "Roboto", sans-serif;', $css );
-
-		$this->assertContains( '--md-sys-typescale-body-large-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-body-medium-font: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--md-sys-typescale-body-small-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-headline1-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-headline2-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-headline3-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-headline4-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-headline5-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-headline6-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-body1-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-body2-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-caption-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-button-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--mdc-typography-overline-font-family: "Roboto", sans-serif;', $css );
 
 		$this->assertContains( '--mdc-button-radius: 4px;', $css );
 		$this->assertContains( '--mdc-card-radius: 4px;', $css );
@@ -703,7 +692,7 @@ public function test_get_default() {
 		$baseline = $controls->get_design_styles()['baseline'];
 
 		$this->assertEquals( $controls->get_default( 'primary_color' ), $baseline['primary_color'] );
-		$this->assertEquals( $controls->get_default( 'body_font_family' ), $baseline['body_font_family'] );
+		$this->assertEquals( $controls->get_default( 'head_font_family' ), $baseline['head_font_family'] );
 		$this->assertEquals( $controls->get_default( 'button_radius' ), $baseline['button_radius'] );
 		$this->assertEquals( $controls->get_default( 'card_radius' ), $baseline['card_radius'] );
 		$this->assertEquals( $controls->get_default( 'data_table_radius' ), $baseline['data_table_radius'] );
diff --git a/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php b/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php
index 7c5bf5ec2..29cc66bc7 100644
--- a/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php
+++ b/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php
@@ -115,7 +115,7 @@ public function test_migrate_posts() {
 <!-- /wp:heading -->
 
 <!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"btn","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":"global","title":"Title card","secondaryText":"Title card","supportingText":"Title card","cardStyle":"elevated"},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-021abc4ab788.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"btn","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":"global","supportingText":"Title card","secondaryText":"Title card","title":"Title card","cardStyle":"elevated"}],"cardStyle":"elevated"} -->
-<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Title card</h2><h3 class="material-design-card__secondary-text label-medium">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-021abc4ab788.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Title card</h2><h3 class="material-design-card__secondary-text label-medium">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div></div></div>
+<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title card</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-021abc4ab788.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title card</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div></div></div>
 <!-- /wp:material/cards-collection -->
 
 <!-- wp:heading {"level":3} -->
@@ -129,7 +129,7 @@ public function test_migrate_posts() {
 <!-- /wp:heading -->
 
 <!-- wp:material/card {"title":"card","secondaryText":"card","imageSourceUrl":"http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg","isImageEditMode":false,"supportingText":"card","primaryActionButtonLabel":"BTN","cardStyle":"outlined"} -->
-<div class="wp-block-material-card"><div class="mdc-card mdc-card--outlined material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">card</h2><h3 class="material-design-card__secondary-text label-medium">card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">BTN</span></a></div></div></div></div>
+<div class="wp-block-material-card"><div class="mdc-card mdc-card--outlined material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">card</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">BTN</span></a></div></div></div></div>
 <!-- /wp:material/card -->',
 			]
 		);
diff --git a/theme/404.php b/theme/404.php
index 33796cb11..912771cc6 100644
--- a/theme/404.php
+++ b/theme/404.php
@@ -33,7 +33,7 @@
 
 			<section class="error-404 not-found">
 				<header class="page-header">
-					<h1 class="page-title headline-large"><?php esc_html_e( 'Page not found.', 'material-design-google' ); ?></h1>
+					<h1 class="page-title mdc-typography--headline2"><?php esc_html_e( 'Page not found.', 'material-design-google' ); ?></h1>
 				</header><!-- .page-header -->
 
 				<div class="page-content">
diff --git a/theme/archive.php b/theme/archive.php
index 883335bae..0fdb96bfc 100644
--- a/theme/archive.php
+++ b/theme/archive.php
@@ -40,8 +40,8 @@
 
 			<header class="page-header">
 				<?php
-				the_archive_title( '<h1 class="page-title display-small">', '</h1>' );
-				the_archive_description( '<div class="archive-description body-large">', '</div>' );
+				the_archive_title( '<h1 class="page-title mdc-typography mdc-typography--headline1">', '</h1>' );
+				the_archive_description( '<div class="archive-description mdc-typography mdc-typography--body1">', '</div>' );
 				?>
 			</header><!-- .page-header -->
 
diff --git a/theme/assets/css/src/base/typography.css b/theme/assets/css/src/base/typography.css
index 5e8f9a968..b5508469c 100644
--- a/theme/assets/css/src/base/typography.css
+++ b/theme/assets/css/src/base/typography.css
@@ -16,51 +16,13 @@
 
 /**
  * Material typography styles for html elements.
- * See https://github.com/material-foundation/material-tokens/blob/325df4f3d53fa748298d9f3650ed9cdb951f8af4/css/typography.css
+ * see https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L57
  **/
-@mixin selector-typography h1, display-small, 6, 6, 300;
-@mixin selector-typography h2, headline-large, 3.75, 3.75, 300;
-@mixin selector-typography h3, headline-medium, 3, 3.125, 400;
-@mixin selector-typography h4, headline-small, 2.125, 2.5, 400;
-@mixin selector-typography h5, title-large, 1.5, 2, 400;
-@mixin selector-typography h6, title-medium, 1.25, 2, 500;
-@mixin selector-typography p, body-large, 1, 1.5, 400;
-@mixin selector-typography figcaption, label-large, 1, 1.75, 400;
-
-/* Add typography m3 classes. */
-@mixin typography display-large, 7.5, 6, 300;
-@mixin typography display-medium, 6.875, 6, 300;
-@mixin typography display-small, 6, 6, 300;
-@mixin typography headline-large, 3.75, 3.75, 300;
-@mixin typography headline-medium, 3, 3.125, 400;
-@mixin typography headline-small, 2.125, 2.5, 400;
-@mixin typography title-large, 1.5, 2, 400;
-@mixin typography title-medium, 1.25, 2, 500;
-@mixin typography title-small, 0.875, 1.57, 500;
-@mixin typography label-large, 1, 1.75, 400;
-@mixin typography label-medium, 0.875, 1.375, 500;
-@mixin typography label-small, 0.75, 2, 500;
-@mixin typography body-large, 1, 1.5, 400;
-@mixin typography body-medium, 0.875, 1.25, 400;
-@mixin typography body-small, 0.75, 1.25, 400;
-
-/** Backward compatibility for old typography classes. */
-@mixin selector-typography .mdc-typography--headline1, display-small, 6, 6, 300;
-@mixin selector-typography .mdc-typography--headline2, headline-large, 3.75, 3.75, 300;
-@mixin selector-typography .mdc-typography--headline3, headline-medium, 3, 3.125, 400;
-@mixin selector-typography .mdc-typography--headline4, headline-small, 2.125, 2.5, 400;
-@mixin selector-typography .mdc-typography--headline5, title-large, 1.5, 2, 400;
-@mixin selector-typography .mdc-typography--headline6, title-medium, 1.25, 2, 500;
-@mixin selector-typography .mdc-typography--subhead1, title-medium, 1.25, 2, 500;
-@mixin selector-typography .mdc-typography--subhead2, title-small, 0.875, 1.57, 500;
-@mixin selector-typography .mdc-typography--body1, body-large, 1, 1.5, 400;
-@mixin selector-typography .mdc-typography--body2, body-medium, 0.875, 1.25, 400;
-@mixin selector-typography .mdc-typography--caption, body-small, 0.75, 1.25, 400;
-@mixin selector-typography .mdc-typography--button, label-large, 1, 1.75, 400;
-@mixin selector-typography .mdc-typography--overline, label-medium, 0.875, 1.375, 500;
-@mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400;
-@mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500;
-
-/* Backward compat: For `body` types typography should be applied to child elements as well */
-@mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400;
-@mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400;
+@mixin selector-typography h1, headline1, 6, 6, 300;
+@mixin selector-typography h2, headline2, 3.75, 3.75, 300;
+@mixin selector-typography h3, headline3, 3, 3.125, 400;
+@mixin selector-typography h4, headline4, 2.125, 2.5, 400;
+@mixin selector-typography h5, headline5, 1.5, 2, 400;
+@mixin selector-typography h6, headline6, 1.25, 2, 500;
+@mixin selector-typography p, body1, 1, 1.5, 400;
+@mixin selector-typography figcaption, subtitle1, 1, 1.75, 400;
diff --git a/theme/assets/css/src/components/top-app-bar.css b/theme/assets/css/src/components/top-app-bar.css
index 3cd2d15a1..5269062b7 100644
--- a/theme/assets/css/src/components/top-app-bar.css
+++ b/theme/assets/css/src/components/top-app-bar.css
@@ -103,7 +103,7 @@
 		color: var(--mdc-theme-on-header, var(--mdc-theme-on-primary, #fff));
 		max-width: 48px;
 		min-width: auto;
-		--md-sys-typescale-label-large-size: 24px;
+		--mdc-typography-button-font-size: 24px;
 
 		&:focus {
 			outline: 1px dotted;
diff --git a/theme/assets/css/src/conf/mixins.css b/theme/assets/css/src/conf/mixins.css
index c16973fac..a7fcfe02b 100644
--- a/theme/assets/css/src/conf/mixins.css
+++ b/theme/assets/css/src/conf/mixins.css
@@ -17,31 +17,31 @@
 /* stylelint-disable */
 
 @define-mixin fontvars $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $tracking: 0.25, $font-style: normal {
-	--md-sys-typescale-$(type)-size: calc($font-size * 16)px;
-	--md-sys-typescale-$(type)-line-height: $line-height;
-	--md-sys-typescale-$(type)-style: $font-style;
-	--md-sys-typescale-$(type)-weight: $font-weight;
-	--md-sys-typescale-$(type)-tracking: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
+	--mdc-typography-$(type)-font-size: calc($font-size * 16)px;
+	--mdc-typography-$(type)-line-height: $line-height;
+	--mdc-typography-$(type)-font-style: $font-style;
+	--mdc-typography-$(type)-font-weight: $font-weight;
+	--mdc-typography-$(type)-letter-spacing: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
 }
 
 @define-mixin typography $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
-	.$type $child {
-		font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
-		font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
-		line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
-		font-style: var(--md-sys-typescale-$(type)-style, $font-style);
-		font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
-		letter-spacing: var(--md-sys-typescale-$(type)-tracking);
-	}
+.mdc-typography--$type $child {
+	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em);
+	line-height: var(--mdc-typography-$(type)-line-height, $(line-height));
+	font-style: var(--mdc-typography-$(type)-font-style, $font-style);
+	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight);
+	letter-spacing: var(--mdc-typography-$(type)-letter-spacing);
+}
 }
 
 @define-mixin selector-typography $selector, $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
 $selector $child {
-	font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
-	font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
-	line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
-	font-style: var(--md-sys-typescale-$(type)-style, $font-style);
-	font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
-	letter-spacing: var(--md-sys-typescale-$(type)-tracking);
+	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em);
+	line-height: var(--mdc-typography-$(type)-line-height, $(line-height));
+	font-style: var(--mdc-typography-$(type)-font-style, $font-style);
+	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight);
+	letter-spacing: var(--mdc-typography-$(type)-letter-spacing);
 }
 }
diff --git a/theme/assets/css/src/conf/variables.css b/theme/assets/css/src/conf/variables.css
index d80dd0609..b2f753812 100644
--- a/theme/assets/css/src/conf/variables.css
+++ b/theme/assets/css/src/conf/variables.css
@@ -29,19 +29,17 @@
 	--back-to-top-boder: var(--mdc-theme-primary, #18191a);
 	--outline-color: rgb(0, 95, 204);
 
-	@mixin fontvars display-small, 6, 1, 300, -1.5;
-	@mixin fontvars headline-large, 3.75, 1, 300, -.5;
-	@mixin fontvars headline-medium, 3, 1.04, 400, 0;
-	@mixin fontvars headline-small, 2.125, 1.18, 400, .25;
-	@mixin fontvars title-large, 1.5, 1.33, 400, 0;
-
-	/* @mixin fontvars title-medium, 1.25, 1.6, 500, 0.15; */
-
-	@mixin fontvars title-medium, 1, 1.75, 400, .15;
-	@mixin fontvars title-small, 0.875, 1.57, 500, .1;
-	@mixin fontvars body-large, 1, 1.5, 400, .5;
-	@mixin fontvars body-medium, 0.875, 1.43, 400, .25;
-	@mixin fontvars body-small, 0.75, 1.67, 400, .4;
-	@mixin fontvars label-large, 0.875, 2.57, 500, 1.25;
-	@mixin fontvars label-medium, 0.75, 2.67, 500, 1.5;
+	@mixin fontvars headline1, 6, 1, 300, -1.5;
+	@mixin fontvars headline2, 3.75, 1, 300, -.5;
+	@mixin fontvars headline3, 3, 1.04, 400, 0;
+	@mixin fontvars headline4, 2.125, 1.18, 400, .25;
+	@mixin fontvars headline5, 1.5, 1.33, 400, 0;
+	@mixin fontvars headline6, 1.25, 1.6, 500, 0.15;
+	@mixin fontvars subtitle1, 1, 1.75, 400, .15;
+	@mixin fontvars subtitle2, 0.875, 1.57, 500, .1;
+	@mixin fontvars body1, 1, 1.5, 400, .5;
+	@mixin fontvars body2, 0.875, 1.43, 400, .25;
+	@mixin fontvars caption, 0.75, 1.67, 400, .4;
+	@mixin fontvars button, 0.875, 2.57, 500, 1.25;
+	@mixin fontvars overline, 0.75, 2.67, 500, 1.5;
 }
diff --git a/theme/assets/css/src/editor.css b/theme/assets/css/src/editor.css
index ca249bf20..484ab3223 100644
--- a/theme/assets/css/src/editor.css
+++ b/theme/assets/css/src/editor.css
@@ -16,9 +16,9 @@
 
 @import "./conf/variables.css";
 @import "./base/typography.css";
-@mixin selector-typography .wp-block div, body-large;
-@mixin selector-typography p, body-large;
-@mixin selector-typography .editor-post-title__input, headline-large, 6, 6, 300;
+@mixin selector-typography .wp-block div, body1;
+@mixin selector-typography p, body1;
+@mixin selector-typography .editor-post-title__input, headline2, 6, 6, 300;
 
 body {
 	background: var(--mdc-theme-background, #fff);
diff --git a/theme/assets/css/src/material-components.css b/theme/assets/css/src/material-components.css
index 525df4546..de7a1c92e 100644
--- a/theme/assets/css/src/material-components.css
+++ b/theme/assets/css/src/material-components.css
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+@import "@material/typography/dist/mdc.typography.css";
 @import "@material/button/dist/mdc.button.css";
 @import "@material/top-app-bar/dist/mdc.top-app-bar.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
diff --git a/theme/comments.php b/theme/comments.php
index 5d993840e..9e2130288 100644
--- a/theme/comments.php
+++ b/theme/comments.php
@@ -56,7 +56,7 @@
 
 $args = [
 	'title_reply'        => __( 'Leave a comment', 'material-design-google' ),
-	'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title headline-small">',
+	'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title mdc-typography--headline4">',
 	'title_reply_after'  => '</h2>',
 	'fields'             => [
 		'author' => sprintf(
@@ -163,7 +163,7 @@ class="mdc-checkbox__native-control"
 	if ( have_comments() ) :
 		$count = get_comments_number();
 		?>
-		<h2 class="comments-title headline-small">
+		<h2 class="comments-title mdc-typography--headline4">
 			<?php esc_html_e( 'Join the conversation', 'material-design-google' ); ?>
 		</h2><!-- .comments-title -->
 		<div class="comments-title-count">
diff --git a/theme/functions.php b/theme/functions.php
index 9f96c35cd..5f92da245 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -137,7 +137,7 @@ function material_design_theme_widgets_init() {
 			'description'   => esc_html__( 'Footer left area.', 'material-design-google' ),
 			'before_widget' => '<section id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</section>',
-			'before_title'  => '<h2 class="widget-title title-large">',
+			'before_title'  => '<h2 class="widget-title mdc-typography--headline5">',
 			'after_title'   => '</h2>',
 		]
 	);
@@ -149,7 +149,7 @@ function material_design_theme_widgets_init() {
 			'description'   => esc_html__( 'Footer right area.', 'material-design-google' ),
 			'before_widget' => '<section id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</section>',
-			'before_title'  => '<h2 class="widget-title title-large">',
+			'before_title'  => '<h2 class="widget-title mdc-typography--headline5">',
 			'after_title'   => '</h2>',
 		]
 	);
diff --git a/theme/inc/class-walker-comment.php b/theme/inc/class-walker-comment.php
index 3f1a9a27a..a39015d18 100644
--- a/theme/inc/class-walker-comment.php
+++ b/theme/inc/class-walker-comment.php
@@ -64,11 +64,11 @@ protected function html5_comment( $comment, $depth, $args ) {
 				</div><!-- .comment-author-avatar -->
 
 				<div class="comment-content">
-					<h3 class="comment-author vcard body-large">
+					<h3 class="comment-author vcard mdc-typography--body1">
 						<?php echo get_comment_author_link( $comment ); ?>
 					</h3>
 
-					<div class="comment-meta body-medium">
+					<div class="comment-meta mdc-typography--body2">
 						<time datetime="<?php comment_time( 'c' ); ?>">
 							<?php
 								printf(
@@ -83,7 +83,7 @@ protected function html5_comment( $comment, $depth, $args ) {
 					</div><!-- .comment-meta -->
 
 					<?php if ( 0 === absint( $comment->comment_approved ) ) : ?>
-						<em class="comment-awaiting-moderation display-small">
+						<em class="comment-awaiting-moderation mdc-typography--caption">
 							<?php echo esc_html( $moderation_note ); ?>
 						</em>
 					<?php endif; ?>
diff --git a/theme/inc/template-tags.php b/theme/inc/template-tags.php
index f34c607b9..e01f85862 100644
--- a/theme/inc/template-tags.php
+++ b/theme/inc/template-tags.php
@@ -43,7 +43,7 @@ function material_design_theme_posted_on() {
 			esc_html( get_the_modified_date() )
 		);
 
-		$posted_on = '<a class="date label-medium" href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>';
+		$posted_on = '<a class="date mdc-typography--overline" href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>';
 
 		echo '<span class="posted-on">' . $posted_on . '</span>'; // phpcs:ignore
 
@@ -55,7 +55,7 @@ function material_design_theme_posted_on() {
 		if ( ! empty( $categories ) ) {
 			?>
 		<span class="cat-links">
-			<span class="label-medium">
+			<span class="mdc-typography--overline">
 				<?php foreach ( $categories as $category ) : ?>
 					<?php ob_start(); ?>
 					<a
@@ -104,7 +104,7 @@ function material_design_theme_posted_on() {
 	 * Prints HTML with meta information for the current author.
 	 */
 	function material_design_theme_posted_by() {
-		$byline = '<span class="author vcard">' . get_avatar( get_the_author_meta( 'ID' ), 36 ) . '<a class="url fn n body-small" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>';
+		$byline = '<span class="author vcard">' . get_avatar( get_the_author_meta( 'ID' ), 36 ) . '<a class="url fn n mdc-typography--caption" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>';
 
 		echo '<div class="byline"> ' . $byline . '</div>'; // phpcs:ignore
 
@@ -126,7 +126,7 @@ function material_design_theme_entry_footer() {
 			<span class="tags-links">
 				<i class="material-icons mdc-button__icon" aria-hidden="true">label</i>
 
-				<span class="body-small">
+				<span class="mdc-typography--caption">
 					<?php foreach ( $tags as $tag ) : ?>
 						<?php ob_start(); ?>
 						<a
@@ -204,7 +204,7 @@ function material_design_theme_entry_footer() {
 				),
 				get_the_title()
 			),
-			'<span class="edit-link body-small"><i class="material-icons mdc-button__icon" aria-hidden="true">create</i>',
+			'<span class="edit-link mdc-typography--caption"><i class="material-icons mdc-button__icon" aria-hidden="true">create</i>',
 			'</span>'
 		);
 	}
diff --git a/theme/search.php b/theme/search.php
index 77808e8f7..038568a97 100644
--- a/theme/search.php
+++ b/theme/search.php
@@ -34,7 +34,7 @@
 		<?php if ( have_posts() ) : ?>
 
 			<header class="page-header">
-				<h1 class="page-title headline-large">
+				<h1 class="page-title mdc-typography mdc-typography--headline2">
 					<?php
 					/* translators: %s: search query. */
 					printf( esc_html__( 'Search Results for: %s', 'material-design-google' ), '<span>' . get_search_query() . '</span>' );
diff --git a/theme/template-parts/content-none.php b/theme/template-parts/content-none.php
index 5cec4133a..d0a511964 100644
--- a/theme/template-parts/content-none.php
+++ b/theme/template-parts/content-none.php
@@ -29,7 +29,7 @@
 
 <section class="no-results not-found">
 	<header class="page-header">
-		<h1 class="page-title headline-large"><?php esc_html_e( 'Nothing Found.', 'material-design-google' ); ?></h1>
+		<h1 class="page-title mdc-typography--headline2"><?php esc_html_e( 'Nothing Found.', 'material-design-google' ); ?></h1>
 	</header><!-- .page-header -->
 
 	<div class="page-content">
diff --git a/theme/template-parts/content.php b/theme/template-parts/content.php
index 59d8dbf80..b54b39059 100644
--- a/theme/template-parts/content.php
+++ b/theme/template-parts/content.php
@@ -44,7 +44,7 @@
 				<div class="post-card__primary">
 					<?php if ( is_sticky() ) : ?>
 						<h2
-							class="post-card__title title-large"
+							class="post-card__title mdc-typography mdc-typography--headline6"
 							aria-label="
 							<?php
 								printf(
@@ -59,15 +59,15 @@ class="post-card__title title-large"
 							<?php the_title(); ?>
 						</h2>
 					<?php else : ?>
-						<?php the_title( '<h2 class="post-card__title title-large">', '</h2>' ); ?>
+						<?php the_title( '<h2 class="post-card__title mdc-typography mdc-typography--headline6">', '</h2>' ); ?>
 					<?php endif; ?>
 
 					<?php if ( ! empty( $show_date ) ) : ?>
-						<time class="post-card__subtitle label-medium"><?php the_time( 'F j, Y' ); ?></time>
+						<time class="post-card__subtitle mdc-typography mdc-typography--subtitle2"><?php the_time( 'F j, Y' ); ?></time>
 					<?php endif; ?>
 				</div>
 				<?php if ( ! empty( $show_excerpt ) ) : ?>
-					<div class="post-card__secondary body-medium"><?php the_excerpt(); ?></div>
+					<div class="post-card__secondary mdc-typography mdc-typography--body2"><?php the_excerpt(); ?></div>
 				<?php endif; ?>
 			</div>
 		</a>
diff --git a/theme/template-parts/footer.php b/theme/template-parts/footer.php
index 3de31cd94..b01cc2321 100644
--- a/theme/template-parts/footer.php
+++ b/theme/template-parts/footer.php
@@ -14,7 +14,7 @@ class="mdc-layout-grid site-footer__inner"
 	>
 		<div class="mdc-layout-grid__inner">
 			<div class="site-footer__copyright mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
-				<small class="site-footer__text label-medium"><?php echo esc_html( $footer_text ); ?></small>
+				<small class="site-footer__text mdc-typography--subtitle2"><?php echo esc_html( $footer_text ); ?></small>
 			</div>
 
 			<?php get_template_part( 'template-parts/back-to-top' ); ?>
diff --git a/theme/template-parts/single-page.php b/theme/template-parts/single-page.php
index c53c5846b..5ef85e43e 100644
--- a/theme/template-parts/single-page.php
+++ b/theme/template-parts/single-page.php
@@ -29,7 +29,7 @@
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header class="entry-header section-inner">
-		<?php the_title( '<h1 class="entry-title headline-large">', '</h1>' ); ?>
+		<?php the_title( '<h1 class="entry-title mdc-typography mdc-typography--headline2">', '</h1>' ); ?>
 	</header><!-- .entry-header -->
 
 	<?php material_design_theme_post_thumbnail(); ?>
@@ -40,7 +40,7 @@
 
 		wp_link_pages(
 			array(
-				'before' => '<div class="page-links label-large">' . esc_html__( 'Pages:', 'material-design-google' ),
+				'before' => '<div class="page-links mdc-typography mdc-typography--subtitle1">' . esc_html__( 'Pages:', 'material-design-google' ),
 				'after'  => '</div>',
 			)
 		);
diff --git a/theme/template-parts/single.php b/theme/template-parts/single.php
index c40e19cdd..274bc59fe 100644
--- a/theme/template-parts/single.php
+++ b/theme/template-parts/single.php
@@ -41,9 +41,9 @@
 
 		<?php
 		if ( is_singular() ) :
-			the_title( '<h1 class="entry-title headline-large">', '</h1>' );
+			the_title( '<h1 class="entry-title mdc-typography mdc-typography--headline2">', '</h1>' );
 		else :
-			the_title( '<h2 class="entry-title headline-large"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
+			the_title( '<h2 class="entry-title mdc-typography mdc-typography--headline2"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
 		endif;
 
 		if ( 'post' === get_post_type() ) :
@@ -71,7 +71,7 @@
 
 		wp_link_pages(
 			array(
-				'before' => '<div class="page-links label-large">' . esc_html__( 'Pages:', 'material-design-google' ),
+				'before' => '<div class="page-links mdc-typography mdc-typography--subtitle1">' . esc_html__( 'Pages:', 'material-design-google' ),
 				'after'  => '</div>',
 			)
 		);
diff --git a/theme/template-parts/site-title.php b/theme/template-parts/site-title.php
index 385b3c4d7..e0b7f545e 100644
--- a/theme/template-parts/site-title.php
+++ b/theme/template-parts/site-title.php
@@ -33,7 +33,7 @@
 	?>
 	<div class="site-title__wrapper">
 		<div class="site-title__row">
-			<h1 class="site-title title-large">
+			<h1 class="site-title mdc-typography mdc-typography--headline6">
 				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 			</h1>
 
@@ -43,14 +43,14 @@
 				<span class="screen-reader-text"><?php esc_html_e( 'Close drawer', 'material-design-google' ); ?></span>
 			</button>
 		</div>
-		<div class="site-tagline label-large"><?php bloginfo( 'description' ); ?></div>
+		<div class="site-tagline mdc-typography--subtitle1"><?php bloginfo( 'description' ); ?></div>
 	</div>
 	<?php
 else :
 	?>
 	<div class="site-title__wrapper">
 		<div class="site-title__row">
-			<div class="site-title title-large">
+			<div class="site-title mdc-typography mdc-typography--headline6">
 				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 			</div>
 
@@ -60,7 +60,7 @@
 				<span class="screen-reader-text"><?php esc_html_e( 'Close drawer', 'material-design-google' ); ?></span>
 			</button>
 		</div>
-		<div class="site-tagline label-large"><?php bloginfo( 'description' ); ?></div>
+		<div class="site-tagline mdc-typography--subtitle1"><?php bloginfo( 'description' ); ?></div>
 	</div>
 	<?php
 endif;

From 8ce7a1da8f264c05fee6ed0d144816d5c4d76963 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Thu, 9 Jun 2022 14:44:26 +0530
Subject: [PATCH 05/12] Revert "Add spacing; Move font size as first"

---
 .../components/google-fonts-control/item.js   | 42 +++++++++----------
 .../components/google-fonts-control/style.css |  4 --
 .../__snapshots__/item.test.js.snap           | 30 ++++++-------
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index 0efa74feb..cb25cd5c6 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -59,27 +59,28 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
 						>
-							{ size.label }
+							{ lineHeight.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-line-height-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ size.value || size.default }
-							min={ size.min }
-							max={ size.max }
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
 							onChange={ event => {
-								const sizeValue = event.target.value;
+								const lineHeightValue = event.target.value;
 
 								onChange( {
 									id,
-									sizeValue,
+									lineHeightValue,
 									trackingValue: tracking.value,
+									sizeValue: size.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
@@ -89,28 +90,27 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
-							{ lineHeight.label }
+							{ size.label }
 						</label>
 						<input
-							id={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
+							value={ size.value || size.default }
+							min={ size.min }
+							max={ size.max }
 							onChange={ event => {
-								const lineHeightValue = event.target.value;
+								const sizeValue = event.target.value;
 
 								onChange( {
 									id,
-									lineHeightValue,
+									sizeValue,
 									trackingValue: tracking.value,
-									sizeValue: size.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index 2cb266261..a80e2b4f8 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -59,10 +59,6 @@
 		padding: 8px 0 8px 8px;
 	}
 
-	.google-fonts-control-child + .google-fonts-control-child {
-		margin-top: 20px;
-	}
-
 	.components-google-fonts-control__select {
 		flex-direction: row;
 		align-items: center;
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 9cb9c2ad0..1ffeb8f49 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -20,19 +20,20 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-size-control-headline-large"
-          id="inspector-size-label-headline-large"
+          htmlFor="inspector-line-height-control-headline-large"
+          id="inspector-line-height-label-headline-large"
         >
-          Size
+          Line height
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-size-control-headline-large"
-          max={96}
-          min={2}
+          id="inspector-line-height-control-headline-large"
+          max={64}
+          min={0}
           onChange={[Function]}
+          step="0.01"
           type="number"
-          value={96}
+          value={0}
         />
       </div>
     </div>
@@ -44,20 +45,19 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-line-height-control-headline-large"
-          id="inspector-line-height-label-headline-large"
+          htmlFor="inspector-size-control-headline-large"
+          id="inspector-size-label-headline-large"
         >
-          Line height
+          Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-line-height-control-headline-large"
-          max={64}
-          min={0}
+          id="inspector-size-control-headline-large"
+          max={96}
+          min={2}
           onChange={[Function]}
-          step="0.01"
           type="number"
-          value={0}
+          value={96}
         />
       </div>
     </div>

From f327bf089c2a64b32244933f3fa56b92a0828ae6 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 14 Jun 2022 20:14:57 +0530
Subject: [PATCH 06/12] Fix button block invalidation issue

---
 plugin/assets/src/block-editor/blocks/button/block.json | 3 +--
 plugin/assets/src/block-editor/blocks/buttons/edit.js   | 4 +---
 plugin/assets/src/block-editor/blocks/buttons/save.js   | 4 ++--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json
index 9b1e0dfaf..a31451d63 100644
--- a/plugin/assets/src/block-editor/blocks/button/block.json
+++ b/plugin/assets/src/block-editor/blocks/button/block.json
@@ -77,6 +77,5 @@
       "type": "string",
       "default": "normal"
     }
-  },
-  "apiVersion": 2
+  }
 }
diff --git a/plugin/assets/src/block-editor/blocks/buttons/edit.js b/plugin/assets/src/block-editor/blocks/buttons/edit.js
index 893cd4072..79df21168 100644
--- a/plugin/assets/src/block-editor/blocks/buttons/edit.js
+++ b/plugin/assets/src/block-editor/blocks/buttons/edit.js
@@ -31,9 +31,7 @@ const ALLOWED_BLOCKS = [ name ];
 const BUTTONS_TEMPLATE = [ [ name ] ];
 
 const Edit = () => {
-	const blockProps = useBlockProps( {
-		className: 'wp-block-material-buttons',
-	} );
+	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
 			<InnerBlocks
diff --git a/plugin/assets/src/block-editor/blocks/buttons/save.js b/plugin/assets/src/block-editor/blocks/buttons/save.js
index 5f1cf069f..a5d7f5258 100644
--- a/plugin/assets/src/block-editor/blocks/buttons/save.js
+++ b/plugin/assets/src/block-editor/blocks/buttons/save.js
@@ -17,11 +17,11 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 const Save = () => {
 	return (
-		<div>
+		<div { ...useBlockProps.save() }>
 			<InnerBlocks.Content />
 		</div>
 	);

From 3dddc678556dacdf5d84d975221089c2b2e823a6 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 14 Jun 2022 21:09:24 +0530
Subject: [PATCH 07/12] Fix image card

---
 plugin/assets/src/block-editor/blocks/image-list/edit.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/plugin/assets/src/block-editor/blocks/image-list/edit.js b/plugin/assets/src/block-editor/blocks/image-list/edit.js
index 3b1194f48..12e5c1cfb 100644
--- a/plugin/assets/src/block-editor/blocks/image-list/edit.js
+++ b/plugin/assets/src/block-editor/blocks/image-list/edit.js
@@ -233,8 +233,6 @@ const ImageListEdit = ( {
 		noticeOperations.createErrorNotice( message );
 	};
 
-	const classNames = useBlockProps()?.className;
-
 	const galleryProps = {
 		images: images.map( image => {
 			image.caption = getCaption( image.id ) || image.caption;
@@ -252,11 +250,10 @@ const ImageListEdit = ( {
 		onMove: moveImage,
 		onSelect: setSelectedImage,
 		onLinkChange: updateImageLink,
-		className: classNames,
 	};
 
 	return (
-		<>
+		<div { ...useBlockProps() }>
 			{ 'function' === typeof noticeUI ? noticeUI() : noticeUI }
 
 			{ hasImages && <Gallery { ...galleryProps } /> }
@@ -264,7 +261,6 @@ const ImageListEdit = ( {
 			<MediaPlaceholder
 				addToGallery={ hasImagesWithId }
 				isAppender={ hasImages }
-				className={ classNames }
 				disableMediaButtons={ hasImages && ! isSelected }
 				icon={
 					! hasImages && (
@@ -400,7 +396,7 @@ const ImageListEdit = ( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-		</>
+		</div>
 	);
 };
 

From 6829fb080bc74ff02e1794d93e6b833fee7f9f9f Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 14 Jun 2022 21:14:04 +0530
Subject: [PATCH 08/12] Update snap

---
 .../buttons/__snapshots__/edit.test.js.snap   |    8 +-
 .../__snapshots__/edit.test.js.snap           | 3046 +++++++++--------
 2 files changed, 1527 insertions(+), 1527 deletions(-)

diff --git a/plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap
index ee4799291..0513ab4ed 100644
--- a/plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap
@@ -5,9 +5,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div
-        class="wp-block-material-buttons"
-      >
+      <div>
         <div>
            
           {"id":"button-1","name":"material/button"}
@@ -17,9 +15,7 @@ Object {
     </div>
   </body>,
   "container": <div>
-    <div
-      class="wp-block-material-buttons"
-    >
+    <div>
       <div>
          
         {"id":"button-1","name":"material/button"}
diff --git a/plugin/tests/js/block-editor/blocks/image-list/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/image-list/__snapshots__/edit.test.js.snap
index 26862baed..d72e9f8bf 100644
--- a/plugin/tests/js/block-editor/blocks/image-list/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/image-list/__snapshots__/edit.test.js.snap
@@ -29,800 +29,1055 @@ Object {
       style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
     />
     <div>
-      <ul
-        class="mdc-image-list mdc-image-list--masonry"
-        style="column-count: 4; column-gap: 24px;"
-      >
-        <li
-          class="mdc-image-list__item"
+      <div>
+        <ul
+          class="mdc-image-list mdc-image-list--masonry"
+          style="column-count: 4; column-gap: 24px;"
         >
-          <div
-            class="mdc-image-list__item-wrap"
-            style="margin-bottom: 24px;"
+          <li
+            class="mdc-image-list__item"
           >
-            <img
-              alt="Example Image 1 alt"
-              class="mdc-image-list__image"
-              data-id="1"
-              data-link="http://example.com/image-1"
-              src="https://i.picsum.photos/id/22/500/500.jpg"
-              style="border-radius: 4px;"
-            />
             <div
-              class="mdc-image-list__supporting"
-              style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
+              class="mdc-image-list__item-wrap"
+              style="margin-bottom: 24px;"
             >
-              <span
-                class="mdc-image-list__label"
+              <img
+                alt="Example Image 1 alt"
+                class="mdc-image-list__image"
+                data-id="1"
+                data-link="http://example.com/image-1"
+                src="https://i.picsum.photos/id/22/500/500.jpg"
+                style="border-radius: 4px;"
+              />
+              <div
+                class="mdc-image-list__supporting"
+                style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
               >
-                Example Image 1 caption
-              </span>
-            </div>
-            <div
-              class="move-image"
-            >
-              <button
-                title="Move left"
+                <span
+                  class="mdc-image-list__label"
+                >
+                  Example Image 1 caption
+                </span>
+              </div>
+              <div
+                class="move-image"
               >
-                <i
-                  class="material-icons"
+                <button
+                  title="Move left"
                 >
-                  arrow_left
-                </i>
-              </button>
-              <button
-                title="Move right"
+                  <i
+                    class="material-icons"
+                  >
+                    arrow_left
+                  </i>
+                </button>
+                <button
+                  title="Move right"
+                >
+                  <i
+                    class="material-icons"
+                  >
+                    arrow_right
+                  </i>
+                </button>
+              </div>
+              <div
+                class="remove-image"
               >
-                <i
-                  class="material-icons"
+                <button
+                  title="Remove image"
                 >
-                  arrow_right
-                </i>
-              </button>
+                  <i
+                    class="material-icons"
+                  >
+                    close
+                  </i>
+                </button>
+              </div>
             </div>
+          </li>
+          <li
+            class="mdc-image-list__item"
+          >
             <div
-              class="remove-image"
+              class="mdc-image-list__item-wrap"
+              style="margin-bottom: 24px;"
             >
-              <button
-                title="Remove image"
+              <img
+                alt="Example Image 2 alt"
+                class="mdc-image-list__image"
+                data-id="2"
+                data-link="http://example.com/image-2"
+                src="https://i.picsum.photos/id/22/500/500.jpg"
+                style="border-radius: 4px;"
+              />
+              <div
+                class="mdc-image-list__supporting"
+                style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
               >
-                <i
-                  class="material-icons"
+                <span
+                  class="mdc-image-list__label"
                 >
-                  close
-                </i>
-              </button>
+                  Example Image 2 caption
+                </span>
+              </div>
+              <div
+                class="move-image"
+              >
+                <button
+                  title="Move left"
+                >
+                  <i
+                    class="material-icons"
+                  >
+                    arrow_left
+                  </i>
+                </button>
+                <button
+                  title="Move right"
+                >
+                  <i
+                    class="material-icons"
+                  >
+                    arrow_right
+                  </i>
+                </button>
+              </div>
+              <div
+                class="remove-image"
+              >
+                <button
+                  title="Remove image"
+                >
+                  <i
+                    class="material-icons"
+                  >
+                    close
+                  </i>
+                </button>
+              </div>
             </div>
-          </div>
-        </li>
-        <li
-          class="mdc-image-list__item"
+          </li>
+        </ul>
+        <div
+          class="components-placeholder block-editor-media-placeholder is-small"
         >
-          <div
-            class="mdc-image-list__item-wrap"
-            style="margin-bottom: 24px;"
+          Placeholder
+        </div>
+        <div
+          class="components-panel__body is-opened"
+        >
+          <h2
+            class="components-panel__body-title"
           >
-            <img
-              alt="Example Image 2 alt"
-              class="mdc-image-list__image"
-              data-id="2"
-              data-link="http://example.com/image-2"
-              src="https://i.picsum.photos/id/22/500/500.jpg"
-              style="border-radius: 4px;"
-            />
-            <div
-              class="mdc-image-list__supporting"
-              style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
+            <button
+              aria-expanded="true"
+              class="components-button components-panel__body-toggle"
+              type="button"
             >
               <span
-                class="mdc-image-list__label"
+                aria-hidden="true"
               >
-                Example Image 2 caption
+                <svg
+                  aria-hidden="true"
+                  class="components-panel__arrow"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+                  />
+                </svg>
               </span>
-            </div>
+              Styles
+            </button>
+          </h2>
+          <div
+            class="components-base-control components-radio-control components-image-radio-control css-wdf2ti-Wrapper e1puf3u3"
+          >
             <div
-              class="move-image"
+              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
-              <button
-                title="Move left"
-              >
-                <i
-                  class="material-icons"
-                >
-                  arrow_left
-                </i>
-              </button>
-              <button
-                title="Move right"
+              <div
+                class="components-radio-control__option active"
               >
-                <i
-                  class="material-icons"
+                <input
+                  checked=""
+                  class="components-radio-control__input"
+                  id="image-radio-control-0-0"
+                  name="image-radio-control-0"
+                  type="radio"
+                  value="masonry"
+                />
+                <label
+                  for="image-radio-control-0-0"
                 >
-                  arrow_right
-                </i>
-              </button>
-            </div>
-            <div
-              class="remove-image"
-            >
-              <button
-                title="Remove image"
+                  <div
+                    class="components-image-radio-control__image"
+                  >
+                    <svg
+                      fill="none"
+                      height="37"
+                      viewBox="0 0 37 37"
+                      width="37"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        fill="#565D66"
+                        height="16"
+                        width="16"
+                        x="0.133057"
+                        y="16.3413"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="0.133057"
+                        y="34.3413"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="16"
+                        width="16"
+                        x="20.3596"
+                        y="0.0395508"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="20.3596"
+                        y="18.0396"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="8"
+                        width="16"
+                        x="20.1624"
+                        y="24.3413"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="20.1624"
+                        y="34.3413"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="8"
+                        width="16"
+                        x="0.321533"
+                        y="0.0395508"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="0.321533"
+                        y="10.0396"
+                      />
+                    </svg>
+                  </div>
+                  <span
+                    class="components-image-radio-control__label"
+                  >
+                    Masonry
+                  </span>
+                </label>
+              </div>
+              <div
+                class="components-radio-control__option"
               >
-                <i
-                  class="material-icons"
+                <input
+                  class="components-radio-control__input"
+                  id="image-radio-control-0-1"
+                  name="image-radio-control-0"
+                  type="radio"
+                  value="grid"
+                />
+                <label
+                  for="image-radio-control-0-1"
                 >
-                  close
-                </i>
-              </button>
+                  <div
+                    class="components-image-radio-control__image"
+                  >
+                    <svg
+                      fill="none"
+                      height="45"
+                      viewBox="0 0 37 45"
+                      width="37"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        fill="#565D66"
+                        height="16"
+                        width="16"
+                        x="0.24646"
+                        y="24.8232"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="0.24646"
+                        y="42.8232"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="16"
+                        width="16"
+                        x="20.2465"
+                        y="24.5835"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="20.2465"
+                        y="42.5835"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="16"
+                        width="16"
+                        x="0.24646"
+                        y="0.583496"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="0.24646"
+                        y="18.5835"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="16"
+                        width="16"
+                        x="20.2465"
+                        y="0.583496"
+                      />
+                      <rect
+                        fill="#565D66"
+                        height="2"
+                        width="10"
+                        x="20.2465"
+                        y="18.5835"
+                      />
+                    </svg>
+                  </div>
+                  <span
+                    class="components-image-radio-control__label"
+                  >
+                    Grid
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
-        </li>
-      </ul>
-      <div
-        class="components-placeholder block-editor-media-placeholder is-small"
-      >
-        Placeholder
-      </div>
-      <div
-        class="components-panel__body is-opened"
-      >
-        <h2
-          class="components-panel__body-title"
+        </div>
+        <div
+          class="components-panel__body is-opened"
         >
-          <button
-            aria-expanded="true"
-            class="components-button components-panel__body-toggle"
-            type="button"
+          <h2
+            class="components-panel__body-title"
           >
-            <span
-              aria-hidden="true"
+            <button
+              aria-expanded="true"
+              class="components-button components-panel__body-toggle"
+              type="button"
             >
-              <svg
+              <span
                 aria-hidden="true"
-                class="components-panel__arrow"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
-                />
-              </svg>
-            </span>
-            Styles
-          </button>
-        </h2>
-        <div
-          class="components-base-control components-radio-control components-image-radio-control css-wdf2ti-Wrapper e1puf3u3"
-        >
+                <svg
+                  aria-hidden="true"
+                  class="components-panel__arrow"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+                  />
+                </svg>
+              </span>
+              Settings
+            </button>
+          </h2>
           <div
-            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
           >
             <div
-              class="components-radio-control__option active"
-            >
-              <input
-                checked=""
-                class="components-radio-control__input"
-                id="image-radio-control-0-0"
-                name="image-radio-control-0"
-                type="radio"
-                value="masonry"
-              />
-              <label
-                for="image-radio-control-0-0"
-              >
-                <div
-                  class="components-image-radio-control__image"
-                >
-                  <svg
-                    fill="none"
-                    height="37"
-                    viewBox="0 0 37 37"
-                    width="37"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <rect
-                      fill="#565D66"
-                      height="16"
-                      width="16"
-                      x="0.133057"
-                      y="16.3413"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="0.133057"
-                      y="34.3413"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="16"
-                      width="16"
-                      x="20.3596"
-                      y="0.0395508"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="20.3596"
-                      y="18.0396"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="8"
-                      width="16"
-                      x="20.1624"
-                      y="24.3413"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="20.1624"
-                      y="34.3413"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="8"
-                      width="16"
-                      x="0.321533"
-                      y="0.0395508"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="0.321533"
-                      y="10.0396"
-                    />
-                  </svg>
-                </div>
-                <span
-                  class="components-image-radio-control__label"
-                >
-                  Masonry
-                </span>
-              </label>
-            </div>
-            <div
-              class="components-radio-control__option"
+              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
-              <input
-                class="components-radio-control__input"
-                id="image-radio-control-0-1"
-                name="image-radio-control-0"
-                type="radio"
-                value="grid"
-              />
-              <label
-                for="image-radio-control-0-1"
+              <span
+                class="components-base-control__label components-base-control__layout-controls-label"
               >
+                Layout
                 <div
-                  class="components-image-radio-control__image"
+                  class="components-base-control__label-actions components-base-control__layout-controls"
                 >
-                  <svg
-                    fill="none"
-                    height="45"
-                    viewBox="0 0 37 45"
-                    width="37"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <button
+                    class="is-selected"
                   >
-                    <rect
-                      fill="#565D66"
-                      height="16"
-                      width="16"
-                      x="0.24646"
-                      y="24.8232"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="0.24646"
-                      y="42.8232"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="16"
-                      width="16"
-                      x="20.2465"
-                      y="24.5835"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="20.2465"
-                      y="42.5835"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="16"
-                      width="16"
-                      x="0.24646"
-                      y="0.583496"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="0.24646"
-                      y="18.5835"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="16"
-                      width="16"
-                      x="20.2465"
-                      y="0.583496"
-                    />
-                    <rect
-                      fill="#565D66"
-                      height="2"
-                      width="10"
-                      x="20.2465"
-                      y="18.5835"
-                    />
-                  </svg>
-                </div>
-                <span
-                  class="components-image-radio-control__label"
-                >
-                  Grid
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="components-panel__body is-opened"
-      >
-        <h2
-          class="components-panel__body-title"
-        >
-          <button
-            aria-expanded="true"
-            class="components-button components-panel__body-toggle"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-            >
-              <svg
-                aria-hidden="true"
-                class="components-panel__arrow"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
-                />
-              </svg>
-            </span>
-            Settings
-          </button>
-        </h2>
-        <div
-          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
-        >
-          <div
-            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-          >
-            <span
-              class="components-base-control__label components-base-control__layout-controls-label"
-            >
-              Layout
-              <div
-                class="components-base-control__label-actions components-base-control__layout-controls"
-              >
-                <button
-                  class="is-selected"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    computer
-                  </i>
-                </button>
-                <button
-                  class=""
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      computer
+                    </i>
+                  </button>
+                  <button
+                    class=""
                   >
-                    tablet
-                  </i>
-                </button>
-                <button
-                  class=""
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      tablet
+                    </i>
+                  </button>
+                  <button
+                    class=""
                   >
-                    smartphone
-                  </i>
-                </button>
-              </div>
-            </span>
-            <div
-              class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
-            >
+                    <i
+                      class="material-icons"
+                    >
+                      smartphone
+                    </i>
+                  </button>
+                </div>
+              </span>
               <div
-                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+                class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
               >
-                <label
-                  class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
-                  for="inspector-range-control-0"
-                >
-                  Columns
-                </label>
                 <div
-                  class="components-range-control__root css-2cg8er-Root exqw8y214"
+                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                 >
-                  <div
-                    class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
-                    color="var( --wp-admin-theme-color, #00669b)"
+                  <label
+                    class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
+                    for="inspector-range-control-0"
                   >
-                    <input
-                      aria-hidden="false"
-                      aria-label="Columns"
-                      class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
-                      id="inspector-range-control-0"
-                      max="6"
-                      min="1"
-                      step="1"
-                      tabindex="0"
-                      type="range"
-                      value="1"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="css-43abdt-Rail-railBackgroundColor exqw8y210"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
-                      style="width: 0%;"
-                    />
-                    <span
-                      class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
-                      style="left: 0%;"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="css-yd4y8u-Thumb-thumbColor exqw8y24"
-                      />
-                    </span>
-                    <span
-                      aria-hidden="false"
-                      class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
-                      role="tooltip"
-                      style="left: 0%; z-index: 100;"
-                    >
-                      1
-                    </span>
-                  </div>
+                    Columns
+                  </label>
                   <div
-                    class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
-                    data-wp-c16t="true"
-                    data-wp-component="Flex"
+                    class="components-range-control__root css-2cg8er-Root exqw8y214"
                   >
                     <div
-                      class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
-                      data-wp-c16t="true"
-                      data-wp-component="FlexItem"
-                    />
-                    <div
-                      class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                      class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
+                      color="var( --wp-admin-theme-color, #00669b)"
                     >
                       <input
+                        aria-hidden="false"
                         aria-label="Columns"
-                        autocomplete="off"
-                        class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
-                        id="inspector-input-control-0"
-                        inputmode="decimal"
+                        class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
+                        id="inspector-range-control-0"
                         max="6"
                         min="1"
                         step="1"
-                        type="number"
+                        tabindex="0"
+                        type="range"
                         value="1"
                       />
-                      <div
+                      <span
                         aria-hidden="true"
-                        class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                        class="css-43abdt-Rail-railBackgroundColor exqw8y210"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
+                        style="width: 0%;"
                       />
+                      <span
+                        class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
+                        style="left: 0%;"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                        />
+                      </span>
+                      <span
+                        aria-hidden="false"
+                        class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
+                        role="tooltip"
+                        style="left: 0%; z-index: 100;"
+                      >
+                        1
+                      </span>
+                    </div>
+                    <div
+                      class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
+                      data-wp-c16t="true"
+                      data-wp-component="Flex"
+                    >
+                      <div
+                        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                        data-wp-c16t="true"
+                        data-wp-component="FlexItem"
+                      />
+                      <div
+                        class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                      >
+                        <input
+                          aria-label="Columns"
+                          autocomplete="off"
+                          class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+                          id="inspector-input-control-0"
+                          inputmode="decimal"
+                          max="6"
+                          min="1"
+                          step="1"
+                          type="number"
+                          value="1"
+                        />
+                        <div
+                          aria-hidden="true"
+                          class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
-            >
               <div
-                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+                class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
               >
-                <label
-                  class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
-                  for="inspector-range-control-1"
-                >
-                  Gutter
-                </label>
                 <div
-                  class="components-range-control__root css-2cg8er-Root exqw8y214"
+                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                 >
+                  <label
+                    class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
+                    for="inspector-range-control-1"
+                  >
+                    Gutter
+                  </label>
                   <div
-                    class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
-                    color="var( --wp-admin-theme-color, #00669b)"
+                    class="components-range-control__root css-2cg8er-Root exqw8y214"
                   >
-                    <input
-                      aria-hidden="false"
-                      aria-label="Gutter"
-                      class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
-                      id="inspector-range-control-1"
-                      max="24"
-                      min="0"
-                      step="1"
-                      tabindex="0"
-                      type="range"
-                      value="24"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="css-43abdt-Rail-railBackgroundColor exqw8y210"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
-                      style="width: 100%;"
-                    />
-                    <span
-                      class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
-                      style="left: 100%;"
+                    <div
+                      class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
+                      color="var( --wp-admin-theme-color, #00669b)"
                     >
+                      <input
+                        aria-hidden="false"
+                        aria-label="Gutter"
+                        class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
+                        id="inspector-range-control-1"
+                        max="24"
+                        min="0"
+                        step="1"
+                        tabindex="0"
+                        type="range"
+                        value="24"
+                      />
                       <span
                         aria-hidden="true"
-                        class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                        class="css-43abdt-Rail-railBackgroundColor exqw8y210"
                       />
-                    </span>
-                    <span
-                      aria-hidden="false"
-                      class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
-                      role="tooltip"
-                      style="left: 100%; z-index: 100;"
+                      <span
+                        aria-hidden="true"
+                        class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
+                        style="width: 100%;"
+                      />
+                      <span
+                        class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
+                        style="left: 100%;"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                        />
+                      </span>
+                      <span
+                        aria-hidden="false"
+                        class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
+                        role="tooltip"
+                        style="left: 100%; z-index: 100;"
+                      >
+                        24
+                      </span>
+                    </div>
+                    <div
+                      class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
+                      data-wp-c16t="true"
+                      data-wp-component="Flex"
                     >
-                      24
-                    </span>
+                      <div
+                        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                        data-wp-c16t="true"
+                        data-wp-component="FlexItem"
+                      />
+                      <div
+                        class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                      >
+                        <input
+                          aria-label="Gutter"
+                          autocomplete="off"
+                          class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+                          id="inspector-input-control-1"
+                          inputmode="decimal"
+                          max="24"
+                          min="0"
+                          step="1"
+                          type="number"
+                          value="24"
+                        />
+                        <div
+                          aria-hidden="true"
+                          class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                        />
+                      </div>
+                    </div>
                   </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="components-base-control"
+          >
+            <label
+              class="components-base-control__label"
+              for="shape-size"
+            >
+              Corner Styles
+            </label>
+            <div>
+              Overrides will only apply to these images. Change Image Lists corner styles in 
+              <a
+                href="http://example.com/shape"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                Material Design Options
+              </a>
+               to update all Image Lists.
+            </div>
+            <div
+              class="components-base-control components-global-shape-size"
+            >
+              <div
+                class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
+              >
+                <div
+                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+                >
+                  <label
+                    class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
+                    for="inspector-range-control-2"
+                  >
+                    Corner Styles
+                  </label>
                   <div
-                    class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
-                    data-wp-c16t="true"
-                    data-wp-component="Flex"
+                    class="components-range-control__root css-2cg8er-Root exqw8y214"
                   >
                     <div
-                      class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
-                      data-wp-c16t="true"
-                      data-wp-component="FlexItem"
-                    />
-                    <div
-                      class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                      class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
+                      color="var( --wp-admin-theme-color, #00669b)"
                     >
                       <input
-                        aria-label="Gutter"
-                        autocomplete="off"
-                        class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
-                        id="inspector-input-control-1"
-                        inputmode="decimal"
-                        max="24"
+                        aria-hidden="false"
+                        aria-label="Corner Styles"
+                        class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
+                        id="inspector-range-control-2"
+                        max="16"
                         min="0"
                         step="1"
-                        type="number"
-                        value="24"
+                        tabindex="0"
+                        type="range"
+                        value="4"
                       />
-                      <div
+                      <span
                         aria-hidden="true"
-                        class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                        class="css-43abdt-Rail-railBackgroundColor exqw8y210"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
+                        style="width: 25%;"
+                      />
+                      <span
+                        class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
+                        style="left: 25%;"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                        />
+                      </span>
+                      <span
+                        aria-hidden="false"
+                        class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
+                        role="tooltip"
+                        style="left: 25%; z-index: 100;"
+                      >
+                        4
+                      </span>
+                    </div>
+                    <div
+                      class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
+                      data-wp-c16t="true"
+                      data-wp-component="Flex"
+                    >
+                      <div
+                        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                        data-wp-c16t="true"
+                        data-wp-component="FlexItem"
                       />
+                      <div
+                        class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                      >
+                        <input
+                          aria-label="Corner Styles"
+                          autocomplete="off"
+                          class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+                          id="inspector-input-control-2"
+                          inputmode="decimal"
+                          max="16"
+                          min="0"
+                          step="1"
+                          type="number"
+                          value="4"
+                        />
+                        <div
+                          aria-hidden="true"
+                          class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
+              <button
+                class="components-button global-shape-size-reset is-small"
+                type="button"
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+          <div
+            class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
+          >
+            <div
+              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+            >
+              <span
+                class="components-form-toggle is-checked"
+              >
+                <input
+                  checked=""
+                  class="components-form-toggle__input"
+                  id="inspector-toggle-control-0"
+                  type="checkbox"
+                />
+                <span
+                  class="components-form-toggle__track"
+                />
+                <span
+                  class="components-form-toggle__thumb"
+                />
+              </span>
+              <label
+                class="components-toggle-control__label"
+                for="inspector-toggle-control-0"
+              >
+                Captions
+              </label>
+            </div>
+          </div>
+          <div
+            class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
+          >
+            <div
+              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+            >
+              <span
+                class="components-form-toggle"
+              >
+                <input
+                  class="components-form-toggle__input"
+                  id="inspector-toggle-control-1"
+                  type="checkbox"
+                />
+                <span
+                  class="components-form-toggle__track"
+                />
+                <span
+                  class="components-form-toggle__thumb"
+                />
+              </span>
+              <label
+                class="components-toggle-control__label"
+                for="inspector-toggle-control-1"
+              >
+                Text Protection
+              </label>
             </div>
           </div>
         </div>
         <div
-          class="components-base-control"
+          class="components-panel__body is-opened"
         >
-          <label
-            class="components-base-control__label"
-            for="shape-size"
+          <h2
+            class="components-panel__body-title"
           >
-            Corner Styles
-          </label>
-          <div>
-            Overrides will only apply to these images. Change Image Lists corner styles in 
-            <a
-              href="http://example.com/shape"
-              rel="noreferrer noopener"
-              target="_blank"
+            <button
+              aria-expanded="true"
+              class="components-button components-panel__body-toggle"
+              type="button"
             >
-              Material Design Options
-            </a>
-             to update all Image Lists.
-          </div>
+              <span
+                aria-hidden="true"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="components-panel__arrow"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+                  />
+                </svg>
+              </span>
+              Link Settings
+            </button>
+          </h2>
           <div
-            class="components-base-control components-global-shape-size"
+            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
           >
             <div
-              class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
+              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
               <div
-                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+                class="components-flex components-select-control em5sgkm7 css-c0mqng-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles em57xhy0"
+                data-wp-c16t="true"
+                data-wp-component="Flex"
               >
-                <label
-                  class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
-                  for="inspector-range-control-2"
+                <div
+                  class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                  data-wp-c16t="true"
+                  data-wp-component="FlexItem"
                 >
-                  Corner Styles
-                </label>
+                  <label
+                    class="components-truncate components-text components-input-control__label em5sgkm4 css-uhi73o-View-Text-sx-Base-BaseLabel-labelPadding em57xhy0"
+                    data-wp-c16t="true"
+                    data-wp-component="Text"
+                    for="inspector-select-control-0"
+                  >
+                    Link to
+                  </label>
+                </div>
                 <div
-                  class="components-range-control__root css-2cg8er-Root exqw8y214"
+                  class="components-input-control__container css-1t6cb2b-Container-containerDisabledStyles-containerWidthStyles em5sgkm6"
                 >
-                  <div
-                    class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
-                    color="var( --wp-admin-theme-color, #00669b)"
+                  <select
+                    class="components-select-control__input css-vsvrv2-Select-fontSizeStyles-sizeStyles e1mv6sxx1"
+                    id="inspector-select-control-0"
                   >
-                    <input
-                      aria-hidden="false"
-                      aria-label="Corner Styles"
-                      class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
-                      id="inspector-range-control-2"
-                      max="16"
-                      min="0"
-                      step="1"
-                      tabindex="0"
-                      type="range"
-                      value="4"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="css-43abdt-Rail-railBackgroundColor exqw8y210"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
-                      style="width: 25%;"
-                    />
-                    <span
-                      class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
-                      style="left: 25%;"
+                    <option
+                      value="media"
                     >
-                      <span
-                        aria-hidden="true"
-                        class="css-yd4y8u-Thumb-thumbColor exqw8y24"
-                      />
-                    </span>
-                    <span
-                      aria-hidden="false"
-                      class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
-                      role="tooltip"
-                      style="left: 25%; z-index: 100;"
+                      Media File
+                    </option>
+                    <option
+                      value="attachment"
                     >
-                      4
-                    </span>
-                  </div>
-                  <div
-                    class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
-                    data-wp-c16t="true"
-                    data-wp-component="Flex"
+                      Attachment Page
+                    </option>
+                    <option
+                      value="custom"
+                    >
+                      Custom URL
+                    </option>
+                    <option
+                      value="none"
+                    >
+                      None
+                    </option>
+                  </select>
+                  <span
+                    class="components-input-control__suffix css-6tfwoi-Suffix em5sgkm0"
                   >
                     <div
-                      class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
-                      data-wp-c16t="true"
-                      data-wp-component="FlexItem"
-                    />
-                    <div
-                      class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                      class="css-1einvap-DownArrowWrapper e1mv6sxx0"
                     >
-                      <input
-                        aria-label="Corner Styles"
-                        autocomplete="off"
-                        class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
-                        id="inspector-input-control-2"
-                        inputmode="decimal"
-                        max="16"
-                        min="0"
-                        step="1"
-                        type="number"
-                        value="4"
-                      />
-                      <div
+                      <svg
                         aria-hidden="true"
-                        class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
-                      />
+                        focusable="false"
+                        height="18"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="18"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
+                        />
+                      </svg>
                     </div>
-                  </div>
+                  </span>
+                  <div
+                    aria-hidden="true"
+                    class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                  />
                 </div>
               </div>
             </div>
-            <button
-              class="components-button global-shape-size-reset is-small"
-              type="button"
-            >
-              Reset
-            </button>
           </div>
         </div>
-        <div
-          class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div>
+      <ul
+        class="mdc-image-list mdc-image-list--masonry"
+        style="column-count: 4; column-gap: 24px;"
+      >
+        <li
+          class="mdc-image-list__item"
         >
           <div
-            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+            class="mdc-image-list__item-wrap"
+            style="margin-bottom: 24px;"
           >
-            <span
-              class="components-form-toggle is-checked"
+            <img
+              alt="Example Image 1 alt"
+              class="mdc-image-list__image"
+              data-id="1"
+              data-link="http://example.com/image-1"
+              src="https://i.picsum.photos/id/22/500/500.jpg"
+              style="border-radius: 4px;"
+            />
+            <div
+              class="mdc-image-list__supporting"
+              style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
             >
-              <input
-                checked=""
-                class="components-form-toggle__input"
-                id="inspector-toggle-control-0"
-                type="checkbox"
-              />
-              <span
-                class="components-form-toggle__track"
-              />
               <span
-                class="components-form-toggle__thumb"
-              />
-            </span>
-            <label
-              class="components-toggle-control__label"
-              for="inspector-toggle-control-0"
+                class="mdc-image-list__label"
+              >
+                Example Image 1 caption
+              </span>
+            </div>
+            <div
+              class="move-image"
             >
-              Captions
-            </label>
+              <button
+                title="Move left"
+              >
+                <i
+                  class="material-icons"
+                >
+                  arrow_left
+                </i>
+              </button>
+              <button
+                title="Move right"
+              >
+                <i
+                  class="material-icons"
+                >
+                  arrow_right
+                </i>
+              </button>
+            </div>
+            <div
+              class="remove-image"
+            >
+              <button
+                title="Remove image"
+              >
+                <i
+                  class="material-icons"
+                >
+                  close
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
+        </li>
+        <li
+          class="mdc-image-list__item"
         >
           <div
-            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+            class="mdc-image-list__item-wrap"
+            style="margin-bottom: 24px;"
           >
-            <span
-              class="components-form-toggle"
+            <img
+              alt="Example Image 2 alt"
+              class="mdc-image-list__image"
+              data-id="2"
+              data-link="http://example.com/image-2"
+              src="https://i.picsum.photos/id/22/500/500.jpg"
+              style="border-radius: 4px;"
+            />
+            <div
+              class="mdc-image-list__supporting"
+              style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
             >
-              <input
-                class="components-form-toggle__input"
-                id="inspector-toggle-control-1"
-                type="checkbox"
-              />
-              <span
-                class="components-form-toggle__track"
-              />
               <span
-                class="components-form-toggle__thumb"
-              />
-            </span>
-            <label
-              class="components-toggle-control__label"
-              for="inspector-toggle-control-1"
+                class="mdc-image-list__label"
+              >
+                Example Image 2 caption
+              </span>
+            </div>
+            <div
+              class="move-image"
             >
-              Text Protection
-            </label>
+              <button
+                title="Move left"
+              >
+                <i
+                  class="material-icons"
+                >
+                  arrow_left
+                </i>
+              </button>
+              <button
+                title="Move right"
+              >
+                <i
+                  class="material-icons"
+                >
+                  arrow_right
+                </i>
+              </button>
+            </div>
+            <div
+              class="remove-image"
+            >
+              <button
+                title="Remove image"
+              >
+                <i
+                  class="material-icons"
+                >
+                  close
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
+        </li>
+      </ul>
+      <div
+        class="components-placeholder block-editor-media-placeholder is-small"
+      >
+        Placeholder
       </div>
       <div
         class="components-panel__body is-opened"
@@ -853,1000 +1108,749 @@ Object {
                 />
               </svg>
             </span>
-            Link Settings
+            Styles
           </button>
         </h2>
         <div
-          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
+          class="components-base-control components-radio-control components-image-radio-control css-wdf2ti-Wrapper e1puf3u3"
         >
           <div
             class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
           >
             <div
-              class="components-flex components-select-control em5sgkm7 css-c0mqng-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles em57xhy0"
-              data-wp-c16t="true"
-              data-wp-component="Flex"
+              class="components-radio-control__option active"
             >
-              <div
-                class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
-                data-wp-c16t="true"
-                data-wp-component="FlexItem"
+              <input
+                checked=""
+                class="components-radio-control__input"
+                id="image-radio-control-0-0"
+                name="image-radio-control-0"
+                type="radio"
+                value="masonry"
+              />
+              <label
+                for="image-radio-control-0-0"
               >
-                <label
-                  class="components-truncate components-text components-input-control__label em5sgkm4 css-uhi73o-View-Text-sx-Base-BaseLabel-labelPadding em57xhy0"
-                  data-wp-c16t="true"
-                  data-wp-component="Text"
-                  for="inspector-select-control-0"
+                <div
+                  class="components-image-radio-control__image"
                 >
-                  Link to
-                </label>
-              </div>
-              <div
-                class="components-input-control__container css-1t6cb2b-Container-containerDisabledStyles-containerWidthStyles em5sgkm6"
+                  <svg
+                    fill="none"
+                    height="37"
+                    viewBox="0 0 37 37"
+                    width="37"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      fill="#565D66"
+                      height="16"
+                      width="16"
+                      x="0.133057"
+                      y="16.3413"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="0.133057"
+                      y="34.3413"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="16"
+                      width="16"
+                      x="20.3596"
+                      y="0.0395508"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="20.3596"
+                      y="18.0396"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="8"
+                      width="16"
+                      x="20.1624"
+                      y="24.3413"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="20.1624"
+                      y="34.3413"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="8"
+                      width="16"
+                      x="0.321533"
+                      y="0.0395508"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="0.321533"
+                      y="10.0396"
+                    />
+                  </svg>
+                </div>
+                <span
+                  class="components-image-radio-control__label"
+                >
+                  Masonry
+                </span>
+              </label>
+            </div>
+            <div
+              class="components-radio-control__option"
+            >
+              <input
+                class="components-radio-control__input"
+                id="image-radio-control-0-1"
+                name="image-radio-control-0"
+                type="radio"
+                value="grid"
+              />
+              <label
+                for="image-radio-control-0-1"
               >
-                <select
-                  class="components-select-control__input css-vsvrv2-Select-fontSizeStyles-sizeStyles e1mv6sxx1"
-                  id="inspector-select-control-0"
+                <div
+                  class="components-image-radio-control__image"
                 >
-                  <option
-                    value="media"
-                  >
-                    Media File
-                  </option>
-                  <option
-                    value="attachment"
-                  >
-                    Attachment Page
-                  </option>
-                  <option
-                    value="custom"
-                  >
-                    Custom URL
-                  </option>
-                  <option
-                    value="none"
+                  <svg
+                    fill="none"
+                    height="45"
+                    viewBox="0 0 37 45"
+                    width="37"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    None
-                  </option>
-                </select>
+                    <rect
+                      fill="#565D66"
+                      height="16"
+                      width="16"
+                      x="0.24646"
+                      y="24.8232"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="0.24646"
+                      y="42.8232"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="16"
+                      width="16"
+                      x="20.2465"
+                      y="24.5835"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="20.2465"
+                      y="42.5835"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="16"
+                      width="16"
+                      x="0.24646"
+                      y="0.583496"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="0.24646"
+                      y="18.5835"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="16"
+                      width="16"
+                      x="20.2465"
+                      y="0.583496"
+                    />
+                    <rect
+                      fill="#565D66"
+                      height="2"
+                      width="10"
+                      x="20.2465"
+                      y="18.5835"
+                    />
+                  </svg>
+                </div>
                 <span
-                  class="components-input-control__suffix css-6tfwoi-Suffix em5sgkm0"
+                  class="components-image-radio-control__label"
                 >
-                  <div
-                    class="css-1einvap-DownArrowWrapper e1mv6sxx0"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      height="18"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="18"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                      />
-                    </svg>
-                  </div>
+                  Grid
                 </span>
-                <div
-                  aria-hidden="true"
-                  class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
-                />
-              </div>
+              </label>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <ul
-      class="mdc-image-list mdc-image-list--masonry"
-      style="column-count: 4; column-gap: 24px;"
-    >
-      <li
-        class="mdc-image-list__item"
+      <div
+        class="components-panel__body is-opened"
       >
-        <div
-          class="mdc-image-list__item-wrap"
-          style="margin-bottom: 24px;"
+        <h2
+          class="components-panel__body-title"
         >
-          <img
-            alt="Example Image 1 alt"
-            class="mdc-image-list__image"
-            data-id="1"
-            data-link="http://example.com/image-1"
-            src="https://i.picsum.photos/id/22/500/500.jpg"
-            style="border-radius: 4px;"
-          />
-          <div
-            class="mdc-image-list__supporting"
-            style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
+          <button
+            aria-expanded="true"
+            class="components-button components-panel__body-toggle"
+            type="button"
           >
             <span
-              class="mdc-image-list__label"
-            >
-              Example Image 1 caption
-            </span>
-          </div>
-          <div
-            class="move-image"
-          >
-            <button
-              title="Move left"
-            >
-              <i
-                class="material-icons"
-              >
-                arrow_left
-              </i>
-            </button>
-            <button
-              title="Move right"
-            >
-              <i
-                class="material-icons"
-              >
-                arrow_right
-              </i>
-            </button>
-          </div>
-          <div
-            class="remove-image"
-          >
-            <button
-              title="Remove image"
+              aria-hidden="true"
             >
-              <i
-                class="material-icons"
+              <svg
+                aria-hidden="true"
+                class="components-panel__arrow"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                close
-              </i>
-            </button>
-          </div>
-        </div>
-      </li>
-      <li
-        class="mdc-image-list__item"
-      >
-        <div
-          class="mdc-image-list__item-wrap"
-          style="margin-bottom: 24px;"
-        >
-          <img
-            alt="Example Image 2 alt"
-            class="mdc-image-list__image"
-            data-id="2"
-            data-link="http://example.com/image-2"
-            src="https://i.picsum.photos/id/22/500/500.jpg"
-            style="border-radius: 4px;"
-          />
-          <div
-            class="mdc-image-list__supporting"
-            style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
-          >
-            <span
-              class="mdc-image-list__label"
-            >
-              Example Image 2 caption
+                <path
+                  d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+                />
+              </svg>
             </span>
-          </div>
-          <div
-            class="move-image"
-          >
-            <button
-              title="Move left"
-            >
-              <i
-                class="material-icons"
-              >
-                arrow_left
-              </i>
-            </button>
-            <button
-              title="Move right"
-            >
-              <i
-                class="material-icons"
-              >
-                arrow_right
-              </i>
-            </button>
-          </div>
-          <div
-            class="remove-image"
-          >
-            <button
-              title="Remove image"
-            >
-              <i
-                class="material-icons"
-              >
-                close
-              </i>
-            </button>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div
-      class="components-placeholder block-editor-media-placeholder is-small"
-    >
-      Placeholder
-    </div>
-    <div
-      class="components-panel__body is-opened"
-    >
-      <h2
-        class="components-panel__body-title"
-      >
-        <button
-          aria-expanded="true"
-          class="components-button components-panel__body-toggle"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-          >
-            <svg
-              aria-hidden="true"
-              class="components-panel__arrow"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
-              />
-            </svg>
-          </span>
-          Styles
-        </button>
-      </h2>
-      <div
-        class="components-base-control components-radio-control components-image-radio-control css-wdf2ti-Wrapper e1puf3u3"
-      >
+            Settings
+          </button>
+        </h2>
         <div
-          class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
         >
           <div
-            class="components-radio-control__option active"
-          >
-            <input
-              checked=""
-              class="components-radio-control__input"
-              id="image-radio-control-0-0"
-              name="image-radio-control-0"
-              type="radio"
-              value="masonry"
-            />
-            <label
-              for="image-radio-control-0-0"
-            >
-              <div
-                class="components-image-radio-control__image"
-              >
-                <svg
-                  fill="none"
-                  height="37"
-                  viewBox="0 0 37 37"
-                  width="37"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <rect
-                    fill="#565D66"
-                    height="16"
-                    width="16"
-                    x="0.133057"
-                    y="16.3413"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="0.133057"
-                    y="34.3413"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="16"
-                    width="16"
-                    x="20.3596"
-                    y="0.0395508"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="20.3596"
-                    y="18.0396"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="8"
-                    width="16"
-                    x="20.1624"
-                    y="24.3413"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="20.1624"
-                    y="34.3413"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="8"
-                    width="16"
-                    x="0.321533"
-                    y="0.0395508"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="0.321533"
-                    y="10.0396"
-                  />
-                </svg>
-              </div>
-              <span
-                class="components-image-radio-control__label"
-              >
-                Masonry
-              </span>
-            </label>
-          </div>
-          <div
-            class="components-radio-control__option"
+            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
           >
-            <input
-              class="components-radio-control__input"
-              id="image-radio-control-0-1"
-              name="image-radio-control-0"
-              type="radio"
-              value="grid"
-            />
-            <label
-              for="image-radio-control-0-1"
+            <span
+              class="components-base-control__label components-base-control__layout-controls-label"
             >
+              Layout
               <div
-                class="components-image-radio-control__image"
-              >
-                <svg
-                  fill="none"
-                  height="45"
-                  viewBox="0 0 37 45"
-                  width="37"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <rect
-                    fill="#565D66"
-                    height="16"
-                    width="16"
-                    x="0.24646"
-                    y="24.8232"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="0.24646"
-                    y="42.8232"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="16"
-                    width="16"
-                    x="20.2465"
-                    y="24.5835"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="20.2465"
-                    y="42.5835"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="16"
-                    width="16"
-                    x="0.24646"
-                    y="0.583496"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="0.24646"
-                    y="18.5835"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="16"
-                    width="16"
-                    x="20.2465"
-                    y="0.583496"
-                  />
-                  <rect
-                    fill="#565D66"
-                    height="2"
-                    width="10"
-                    x="20.2465"
-                    y="18.5835"
-                  />
-                </svg>
-              </div>
-              <span
-                class="components-image-radio-control__label"
-              >
-                Grid
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="components-panel__body is-opened"
-    >
-      <h2
-        class="components-panel__body-title"
-      >
-        <button
-          aria-expanded="true"
-          class="components-button components-panel__body-toggle"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-          >
-            <svg
-              aria-hidden="true"
-              class="components-panel__arrow"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
-              />
-            </svg>
-          </span>
-          Settings
-        </button>
-      </h2>
-      <div
-        class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
-      >
-        <div
-          class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-        >
-          <span
-            class="components-base-control__label components-base-control__layout-controls-label"
-          >
-            Layout
-            <div
-              class="components-base-control__label-actions components-base-control__layout-controls"
-            >
-              <button
-                class="is-selected"
-              >
-                <i
-                  class="material-icons"
-                >
-                  computer
-                </i>
-              </button>
-              <button
-                class=""
-              >
-                <i
-                  class="material-icons"
-                >
-                  tablet
-                </i>
-              </button>
-              <button
-                class=""
+                class="components-base-control__label-actions components-base-control__layout-controls"
               >
-                <i
-                  class="material-icons"
+                <button
+                  class="is-selected"
                 >
-                  smartphone
-                </i>
-              </button>
-            </div>
-          </span>
-          <div
-            class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
-          >
-            <div
-              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-            >
-              <label
-                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
-                for="inspector-range-control-0"
-              >
-                Columns
-              </label>
-              <div
-                class="components-range-control__root css-2cg8er-Root exqw8y214"
-              >
-                <div
-                  class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
-                  color="var( --wp-admin-theme-color, #00669b)"
+                  <i
+                    class="material-icons"
+                  >
+                    computer
+                  </i>
+                </button>
+                <button
+                  class=""
                 >
-                  <input
-                    aria-hidden="false"
-                    aria-label="Columns"
-                    class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
-                    id="inspector-range-control-0"
-                    max="6"
-                    min="1"
-                    step="1"
-                    tabindex="0"
-                    type="range"
-                    value="1"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="css-43abdt-Rail-railBackgroundColor exqw8y210"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
-                    style="width: 0%;"
-                  />
-                  <span
-                    class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
-                    style="left: 0%;"
+                  <i
+                    class="material-icons"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="css-yd4y8u-Thumb-thumbColor exqw8y24"
-                    />
-                  </span>
-                  <span
-                    aria-hidden="false"
-                    class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
-                    role="tooltip"
-                    style="left: 0%; z-index: 100;"
+                    tablet
+                  </i>
+                </button>
+                <button
+                  class=""
+                >
+                  <i
+                    class="material-icons"
                   >
-                    1
-                  </span>
-                </div>
+                    smartphone
+                  </i>
+                </button>
+              </div>
+            </span>
+            <div
+              class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
+            >
+              <div
+                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+              >
+                <label
+                  class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
+                  for="inspector-range-control-0"
+                >
+                  Columns
+                </label>
                 <div
-                  class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
-                  data-wp-c16t="true"
-                  data-wp-component="Flex"
+                  class="components-range-control__root css-2cg8er-Root exqw8y214"
                 >
                   <div
-                    class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  />
-                  <div
-                    class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                    class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
+                    color="var( --wp-admin-theme-color, #00669b)"
                   >
                     <input
+                      aria-hidden="false"
                       aria-label="Columns"
-                      autocomplete="off"
-                      class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
-                      id="inspector-input-control-0"
-                      inputmode="decimal"
+                      class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
+                      id="inspector-range-control-0"
                       max="6"
                       min="1"
                       step="1"
-                      type="number"
+                      tabindex="0"
+                      type="range"
                       value="1"
                     />
-                    <div
+                    <span
+                      aria-hidden="true"
+                      class="css-43abdt-Rail-railBackgroundColor exqw8y210"
+                    />
+                    <span
                       aria-hidden="true"
-                      class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                      class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
+                      style="width: 0%;"
+                    />
+                    <span
+                      class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
+                      style="left: 0%;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                      />
+                    </span>
+                    <span
+                      aria-hidden="false"
+                      class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
+                      role="tooltip"
+                      style="left: 0%; z-index: 100;"
+                    >
+                      1
+                    </span>
+                  </div>
+                  <div
+                    class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
+                    data-wp-c16t="true"
+                    data-wp-component="Flex"
+                  >
+                    <div
+                      class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                      data-wp-c16t="true"
+                      data-wp-component="FlexItem"
                     />
+                    <div
+                      class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                    >
+                      <input
+                        aria-label="Columns"
+                        autocomplete="off"
+                        class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+                        id="inspector-input-control-0"
+                        inputmode="decimal"
+                        max="6"
+                        min="1"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <div
+                        aria-hidden="true"
+                        class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
-          >
             <div
-              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+              class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
             >
-              <label
-                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
-                for="inspector-range-control-1"
-              >
-                Gutter
-              </label>
               <div
-                class="components-range-control__root css-2cg8er-Root exqw8y214"
+                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
               >
-                <div
-                  class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
-                  color="var( --wp-admin-theme-color, #00669b)"
+                <label
+                  class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
+                  for="inspector-range-control-1"
                 >
-                  <input
-                    aria-hidden="false"
-                    aria-label="Gutter"
-                    class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
-                    id="inspector-range-control-1"
-                    max="24"
-                    min="0"
-                    step="1"
-                    tabindex="0"
-                    type="range"
-                    value="24"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="css-43abdt-Rail-railBackgroundColor exqw8y210"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
-                    style="width: 100%;"
-                  />
-                  <span
-                    class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
-                    style="left: 100%;"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="css-yd4y8u-Thumb-thumbColor exqw8y24"
-                    />
-                  </span>
-                  <span
-                    aria-hidden="false"
-                    class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
-                    role="tooltip"
-                    style="left: 100%; z-index: 100;"
-                  >
-                    24
-                  </span>
-                </div>
+                  Gutter
+                </label>
                 <div
-                  class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
-                  data-wp-c16t="true"
-                  data-wp-component="Flex"
+                  class="components-range-control__root css-2cg8er-Root exqw8y214"
                 >
                   <div
-                    class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  />
-                  <div
-                    class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                    class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
+                    color="var( --wp-admin-theme-color, #00669b)"
                   >
                     <input
+                      aria-hidden="false"
                       aria-label="Gutter"
-                      autocomplete="off"
-                      class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
-                      id="inspector-input-control-1"
-                      inputmode="decimal"
+                      class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
+                      id="inspector-range-control-1"
                       max="24"
                       min="0"
                       step="1"
-                      type="number"
+                      tabindex="0"
+                      type="range"
                       value="24"
                     />
-                    <div
+                    <span
+                      aria-hidden="true"
+                      class="css-43abdt-Rail-railBackgroundColor exqw8y210"
+                    />
+                    <span
                       aria-hidden="true"
-                      class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                      class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
+                      style="width: 100%;"
+                    />
+                    <span
+                      class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
+                      style="left: 100%;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                      />
+                    </span>
+                    <span
+                      aria-hidden="false"
+                      class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
+                      role="tooltip"
+                      style="left: 100%; z-index: 100;"
+                    >
+                      24
+                    </span>
+                  </div>
+                  <div
+                    class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
+                    data-wp-c16t="true"
+                    data-wp-component="Flex"
+                  >
+                    <div
+                      class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                      data-wp-c16t="true"
+                      data-wp-component="FlexItem"
                     />
+                    <div
+                      class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                    >
+                      <input
+                        aria-label="Gutter"
+                        autocomplete="off"
+                        class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+                        id="inspector-input-control-1"
+                        inputmode="decimal"
+                        max="24"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="24"
+                      />
+                      <div
+                        aria-hidden="true"
+                        class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="components-base-control"
-      >
-        <label
-          class="components-base-control__label"
-          for="shape-size"
-        >
-          Corner Styles
-        </label>
-        <div>
-          Overrides will only apply to these images. Change Image Lists corner styles in 
-          <a
-            href="http://example.com/shape"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            Material Design Options
-          </a>
-           to update all Image Lists.
-        </div>
         <div
-          class="components-base-control components-global-shape-size"
+          class="components-base-control"
         >
+          <label
+            class="components-base-control__label"
+            for="shape-size"
+          >
+            Corner Styles
+          </label>
+          <div>
+            Overrides will only apply to these images. Change Image Lists corner styles in 
+            <a
+              href="http://example.com/shape"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              Material Design Options
+            </a>
+             to update all Image Lists.
+          </div>
           <div
-            class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
+            class="components-base-control components-global-shape-size"
           >
             <div
-              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+              class="components-base-control components-range-control css-wdf2ti-Wrapper e1puf3u3"
             >
-              <label
-                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
-                for="inspector-range-control-2"
-              >
-                Corner Styles
-              </label>
               <div
-                class="components-range-control__root css-2cg8er-Root exqw8y214"
+                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
               >
+                <label
+                  class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
+                  for="inspector-range-control-2"
+                >
+                  Corner Styles
+                </label>
                 <div
-                  class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
-                  color="var( --wp-admin-theme-color, #00669b)"
+                  class="components-range-control__root css-2cg8er-Root exqw8y214"
                 >
-                  <input
-                    aria-hidden="false"
-                    aria-label="Corner Styles"
-                    class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
-                    id="inspector-range-control-2"
-                    max="16"
-                    min="0"
-                    step="1"
-                    tabindex="0"
-                    type="range"
-                    value="4"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="css-43abdt-Rail-railBackgroundColor exqw8y210"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
-                    style="width: 25%;"
-                  />
-                  <span
-                    class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
-                    style="left: 25%;"
+                  <div
+                    class="components-range-control__wrapper css-2udiwk-Wrapper-wrapperColor-rangeHeight-wrapperMargin exqw8y213"
+                    color="var( --wp-admin-theme-color, #00669b)"
                   >
+                    <input
+                      aria-hidden="false"
+                      aria-label="Corner Styles"
+                      class="components-range-control__slider css-12dovbr-InputRange exqw8y23"
+                      id="inspector-range-control-2"
+                      max="16"
+                      min="0"
+                      step="1"
+                      tabindex="0"
+                      type="range"
+                      value="4"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="css-43abdt-Rail-railBackgroundColor exqw8y210"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="components-range-control__track css-1d41935-Track-trackBackgroundColor exqw8y29"
+                      style="width: 25%;"
+                    />
+                    <span
+                      class="css-11060oh-ThumbWrapper-thumbColor exqw8y25"
+                      style="left: 25%;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="css-yd4y8u-Thumb-thumbColor exqw8y24"
+                      />
+                    </span>
                     <span
-                      aria-hidden="true"
-                      class="css-yd4y8u-Thumb-thumbColor exqw8y24"
-                    />
-                  </span>
-                  <span
-                    aria-hidden="false"
-                    class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
-                    role="tooltip"
-                    style="left: 25%; z-index: 100;"
-                  >
-                    4
-                  </span>
-                </div>
-                <div
-                  class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
-                  data-wp-c16t="true"
-                  data-wp-component="Flex"
-                >
+                      aria-hidden="false"
+                      class="components-simple-tooltip components-range-control__tooltip css-1ct94j4-Tooltip-tooltipShow-tooltipPosition exqw8y22"
+                      role="tooltip"
+                      style="left: 25%; z-index: 100;"
+                    >
+                      4
+                    </span>
+                  </div>
                   <div
-                    class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                    class="components-flex components-input-control components-number-control components-range-control__number exqw8y21 ep48uk90 em5sgkm7 css-ep9ym1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-InputNumber-rangeHeight em57xhy0"
                     data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  />
-                  <div
-                    class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                    data-wp-component="Flex"
                   >
-                    <input
-                      aria-label="Corner Styles"
-                      autocomplete="off"
-                      class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
-                      id="inspector-input-control-2"
-                      inputmode="decimal"
-                      max="16"
-                      min="0"
-                      step="1"
-                      type="number"
-                      value="4"
-                    />
                     <div
-                      aria-hidden="true"
-                      class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                      class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+                      data-wp-c16t="true"
+                      data-wp-component="FlexItem"
                     />
+                    <div
+                      class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+                    >
+                      <input
+                        aria-label="Corner Styles"
+                        autocomplete="off"
+                        class="components-input-control__input css-zq8abe-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+                        id="inspector-input-control-2"
+                        inputmode="decimal"
+                        max="16"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="4"
+                      />
+                      <div
+                        aria-hidden="true"
+                        class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+            <button
+              class="components-button global-shape-size-reset is-small"
+              type="button"
+            >
+              Reset
+            </button>
           </div>
-          <button
-            class="components-button global-shape-size-reset is-small"
-            type="button"
-          >
-            Reset
-          </button>
         </div>
-      </div>
-      <div
-        class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
-      >
         <div
-          class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+          class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
         >
-          <span
-            class="components-form-toggle is-checked"
+          <div
+            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
           >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-0"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
             <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-0"
-          >
-            Captions
-          </label>
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-0"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-toggle-control__label"
+              for="inspector-toggle-control-0"
+            >
+              Captions
+            </label>
+          </div>
         </div>
-      </div>
-      <div
-        class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
-      >
         <div
-          class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+          class="components-base-control components-toggle-control css-wdf2ti-Wrapper e1puf3u3"
         >
-          <span
-            class="components-form-toggle"
+          <div
+            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
           >
-            <input
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-1"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
             <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-1"
-          >
-            Text Protection
-          </label>
+              class="components-form-toggle"
+            >
+              <input
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-1"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-toggle-control__label"
+              for="inspector-toggle-control-1"
+            >
+              Text Protection
+            </label>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="components-panel__body is-opened"
-    >
-      <h2
-        class="components-panel__body-title"
+      <div
+        class="components-panel__body is-opened"
       >
-        <button
-          aria-expanded="true"
-          class="components-button components-panel__body-toggle"
-          type="button"
+        <h2
+          class="components-panel__body-title"
         >
-          <span
-            aria-hidden="true"
+          <button
+            aria-expanded="true"
+            class="components-button components-panel__body-toggle"
+            type="button"
           >
-            <svg
+            <span
               aria-hidden="true"
-              class="components-panel__arrow"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
-              />
-            </svg>
-          </span>
-          Link Settings
-        </button>
-      </h2>
-      <div
-        class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
-      >
+              <svg
+                aria-hidden="true"
+                class="components-panel__arrow"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+                />
+              </svg>
+            </span>
+            Link Settings
+          </button>
+        </h2>
         <div
-          class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
+          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
         >
           <div
-            class="components-flex components-select-control em5sgkm7 css-c0mqng-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles em57xhy0"
-            data-wp-c16t="true"
-            data-wp-component="Flex"
+            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
           >
             <div
-              class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+              class="components-flex components-select-control em5sgkm7 css-c0mqng-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles em57xhy0"
               data-wp-c16t="true"
-              data-wp-component="FlexItem"
+              data-wp-component="Flex"
             >
-              <label
-                class="components-truncate components-text components-input-control__label em5sgkm4 css-uhi73o-View-Text-sx-Base-BaseLabel-labelPadding em57xhy0"
+              <div
+                class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
                 data-wp-c16t="true"
-                data-wp-component="Text"
-                for="inspector-select-control-0"
-              >
-                Link to
-              </label>
-            </div>
-            <div
-              class="components-input-control__container css-1t6cb2b-Container-containerDisabledStyles-containerWidthStyles em5sgkm6"
-            >
-              <select
-                class="components-select-control__input css-vsvrv2-Select-fontSizeStyles-sizeStyles e1mv6sxx1"
-                id="inspector-select-control-0"
+                data-wp-component="FlexItem"
               >
-                <option
-                  value="media"
-                >
-                  Media File
-                </option>
-                <option
-                  value="attachment"
-                >
-                  Attachment Page
-                </option>
-                <option
-                  value="custom"
-                >
-                  Custom URL
-                </option>
-                <option
-                  value="none"
+                <label
+                  class="components-truncate components-text components-input-control__label em5sgkm4 css-uhi73o-View-Text-sx-Base-BaseLabel-labelPadding em57xhy0"
+                  data-wp-c16t="true"
+                  data-wp-component="Text"
+                  for="inspector-select-control-0"
                 >
-                  None
-                </option>
-              </select>
-              <span
-                class="components-input-control__suffix css-6tfwoi-Suffix em5sgkm0"
+                  Link to
+                </label>
+              </div>
+              <div
+                class="components-input-control__container css-1t6cb2b-Container-containerDisabledStyles-containerWidthStyles em5sgkm6"
               >
-                <div
-                  class="css-1einvap-DownArrowWrapper e1mv6sxx0"
+                <select
+                  class="components-select-control__input css-vsvrv2-Select-fontSizeStyles-sizeStyles e1mv6sxx1"
+                  id="inspector-select-control-0"
                 >
-                  <svg
-                    aria-hidden="true"
-                    focusable="false"
-                    height="18"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="18"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <option
+                    value="media"
                   >
-                    <path
-                      d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                    />
-                  </svg>
-                </div>
-              </span>
-              <div
-                aria-hidden="true"
-                class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
-              />
+                    Media File
+                  </option>
+                  <option
+                    value="attachment"
+                  >
+                    Attachment Page
+                  </option>
+                  <option
+                    value="custom"
+                  >
+                    Custom URL
+                  </option>
+                  <option
+                    value="none"
+                  >
+                    None
+                  </option>
+                </select>
+                <span
+                  class="components-input-control__suffix css-6tfwoi-Suffix em5sgkm0"
+                >
+                  <div
+                    class="css-1einvap-DownArrowWrapper e1mv6sxx0"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      focusable="false"
+                      height="18"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="18"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <div
+                  aria-hidden="true"
+                  class="components-input-control__backdrop css-1gb9p1j-BackdropUI-backdropFocusedStyles em5sgkm2"
+                />
+              </div>
             </div>
           </div>
         </div>

From 2338be741cd9e08548b3cad48dcdb39c8005ed03 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 14 Jun 2022 21:27:08 +0530
Subject: [PATCH 09/12] Fix test

---
 plugin/tests/phpunit/php/class-test-block-types.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugin/tests/phpunit/php/class-test-block-types.php b/plugin/tests/phpunit/php/class-test-block-types.php
index 7c36b69c6..6786b42dd 100644
--- a/plugin/tests/phpunit/php/class-test-block-types.php
+++ b/plugin/tests/phpunit/php/class-test-block-types.php
@@ -103,6 +103,7 @@ function( $block_name ) use ( $blocks ) {
 				$metadata     = json_decode( file_get_contents( $block_json ), true ); // phpcs:ignore
 
 				$this->assertEquals( $metadata['category'], $block->category );
+				unset( $block->attributes['lock'] );
 				$this->assertEquals( $metadata['attributes'], $block->attributes );
 
 				if ( isset( $metadata['supports'] ) ) {

From e06a5f4dd7d2b0b1a722b1ace93043e362d99d3e Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 14 Jun 2022 21:47:02 +0530
Subject: [PATCH 10/12] Bump to 0.6.0

---
 plugin/material-design.php | 2 +-
 plugin/readme.md           | 2 +-
 plugin/readme.txt          | 2 +-
 theme/README.md            | 2 +-
 theme/readme.txt           | 2 +-
 theme/style.css            | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugin/material-design.php b/plugin/material-design.php
index 91e7b0715..56f14dedf 100644
--- a/plugin/material-design.php
+++ b/plugin/material-design.php
@@ -3,7 +3,7 @@
  * Plugin Name: Material Design
  * Plugin URI: https://github.com/material-components/material-design-for-wordpress
  * Description: The official Material Design plugin for WordPress. Customize your site’s navigation, colors, typography, and shapes, use Material Components, and choose from over 1,000 Google Fonts and Material Design icons. From the team behind Google’s open-source design system.
- * Version: 0.5.1
+ * Version: 0.6.0
  * Requires at least: 5.6
  * Requires PHP:      5.6.20+
  * Author:  Material Design
diff --git a/plugin/readme.md b/plugin/readme.md
index b77733db8..9bc38084a 100644
--- a/plugin/readme.md
+++ b/plugin/readme.md
@@ -8,7 +8,7 @@ The official Material Design plugin for WordPress. Customize your site’s navig
 **Contributors:** [google](https://profiles.wordpress.org/google), [materialdesign](https://profiles.wordpress.org/materialdesign), [xwp](https://profiles.wordpress.org/xwp)
 **Requires at least:** 5.6
 **Tested up to:** 5.8.2
-**Stable tag:** 0.5.1
+**Stable tag:** 0.6.0
 **License:** [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0)
 
 ## Description ##
diff --git a/plugin/readme.txt b/plugin/readme.txt
index 91a6d3177..ac4d647af 100644
--- a/plugin/readme.txt
+++ b/plugin/readme.txt
@@ -2,7 +2,7 @@
 Contributors: google, materialdesign, xwp
 Requires at least: 5.6
 Tested up to: 5.8.2
-Stable tag: 0.5.1
+Stable tag: 0.6.0
 License: Apache License, Version 2.0
 License URI: https://www.apache.org/licenses/LICENSE-2.0
 Tags: material-design, material-theming, google, blocks, gutenberg, theme-builder, accessibility, dark-mode
diff --git a/theme/README.md b/theme/README.md
index 71dd17fca..98047f498 100644
--- a/theme/README.md
+++ b/theme/README.md
@@ -7,7 +7,7 @@ The official Material Design Theme for WordPress.
 **Contributors:** [google](https://profiles.wordpress.org/google), [materialdesign](https://profiles.wordpress.org/materialdesign), [xwp](https://profiles.wordpress.org/xwp)
 **Requires at least:** 5.6
 **Tested up to:** 5.8.2
-**Stable tag:** 0.5.1
+**Stable tag:** 0.6.0
 **License:** [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0)
 **Requires PHP:** 5.6
 
diff --git a/theme/readme.txt b/theme/readme.txt
index 965244c4c..6a8b47ed1 100644
--- a/theme/readme.txt
+++ b/theme/readme.txt
@@ -3,7 +3,7 @@ Contributors: google, materialdesign, xwp
 Requires at least: 5.6
 Tested up to: 5.8.2
 Requires PHP: 5.6
-Stable tag: 0.5.1
+Stable tag: 0.6.0
 License: Apache License, Version 2.0
 License URI: https://www.apache.org/licenses/LICENSE-2.0
 
diff --git a/theme/style.css b/theme/style.css
index 174f36011..9966dfbde 100644
--- a/theme/style.css
+++ b/theme/style.css
@@ -19,7 +19,7 @@ Theme URI: https://github.com/material-components/material-design-for-wordpress
 Author: Material Design
 Author URI: https://material.io/
 Description: The official Material Design theme for WordPress – from the team behind Google’s open-source design system. Apply Material Design principles and Material Theming to your site, and customize its style. Pair this with the official Material Design for WordPress plugin to customize your site’s navigation, colors, typography, and shapes, use Material Components, and choose from over 1,000 Google Fonts and Material Design icons.
-Version: 0.5.1
+Version: 0.6.0
 License: Apache License, Version 2.0
 License URI: https://www.apache.org/licenses/LICENSE-2.0
 Text Domain: material-design-google

From abf9fe390f9f0de173b103997d680f8ee9ccff29 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Fri, 24 Jun 2022 17:13:02 +0530
Subject: [PATCH 11/12] Revert "Merge pull request #360 from
 material-components/m3/typography-revert"

This reverts commit e86ee71584e72477297b680c1a852575e2a3d258, reversing
changes made to 9a453deed39c98c98e157e3a9a3726706bd8b14f.
---
 plugin/assets/css/src/components/material.css |  40 +-
 plugin/assets/css/src/front-end.css           |   2 +
 plugin/assets/css/src/getting-started.css     |   2 +-
 plugin/assets/css/src/gsm/base.css            |  20 +-
 plugin/assets/css/src/material-components.css |   1 -
 plugin/assets/css/src/mixins.css              |  38 +-
 plugin/assets/css/src/overrides.css           |  54 --
 plugin/assets/css/src/settings.css            |   2 +-
 plugin/assets/css/src/settings/base.css       |  18 +-
 plugin/assets/css/src/typography.css          |  94 ++++
 plugin/assets/css/src/wizard.css              |   2 +-
 plugin/assets/css/src/wizard/base.css         |  11 +-
 plugin/assets/css/src/wizard/content.css      |  12 +-
 plugin/assets/importer/demo-content.xml       |   2 +-
 .../blocks/card/components/card-primary.js    |   8 +-
 .../card/components/card-supporting-text.js   |   4 +-
 .../components/card-header.js                 |   4 +-
 .../components/vertical-card-layout.js        |   2 +-
 .../src/block-editor/blocks/tab-bar/save.js   |   9 +-
 .../components/google-fonts-control/index.js  |  10 +-
 .../components/google-fonts-control/item.js   |  72 ++-
 .../components/google-fonts-control/style.css |  18 +-
 .../components/material-library/index.js      |  44 +-
 .../material-library/sections/buttons.js      |   2 +-
 .../material-library/sections/cards.js        |  11 +-
 .../material-library/sections/checkboxes.js   |   2 +-
 .../material-library/sections/chips.js        |   2 +-
 .../material-library/sections/fields.js       |   2 +-
 .../material-library/sections/image-lists.js  |   2 +-
 .../material-library/sections/lists.js        |   2 +-
 .../material-library/sections/radios.js       |   2 +-
 .../material-library/sections/switch.js       |   2 +-
 .../material-library/sections/tab-bar.js      |   2 +-
 .../material-library/sections/table.js        |   2 +-
 .../components/material-library/styles.js     |  23 +-
 .../src/customizer/customize-controls.js      |   2 +
 .../src/customizer/customize-preview.js       |   8 +-
 .../components/content/customize.js           |  36 +-
 .../components/content/learn-content.js       |   4 +-
 .../components/content/learn.js               |   2 +-
 .../components/content/overview.js            |   4 +-
 .../components/content/updates.js             |   2 +-
 .../components/content/wizard.js              |   2 +-
 .../src/getting-started/components/index.js   |   2 +-
 .../components/navigation/index.js            |   2 +-
 .../assets/src/settings/components/index.js   |   2 +-
 .../settings/components/integrations/index.js |  10 +-
 .../components/integrations/updater.js        |   8 +-
 .../src/wizard/components/content/addons.js   |   6 +-
 .../src/wizard/components/content/welcome.js  |   2 +-
 .../src/wizard/components/content/work.js     |   2 +-
 .../src/wizard/components/header/index.js     |   2 +-
 plugin/php/class-admin.php                    |   2 +-
 plugin/php/class-migration.php                |  99 ++++
 plugin/php/class-plugin.php                   |  10 +
 plugin/php/customizer/class-controls.php      | 498 +++++++++++-------
 .../php/templates/partials/card-content.php   |   2 +-
 plugin/php/templates/partials/card-header.php |   4 +-
 .../block-editor/blocks/render/blocks.html    | 155 +++---
 .../card/__snapshots__/edit.test.js.snap      |  32 +-
 .../card/__snapshots__/save.test.js.snap      |  32 +-
 .../__snapshots__/card-primary.test.js.snap   |  32 +-
 .../card-supporting-text.test.js.snap         |   8 +-
 .../horizontal-card-layout.test.js.snap       |  32 +-
 .../vertical-card-layout.test.js.snap         | 112 ++--
 .../__snapshots__/edit.test.js.snap           | 120 ++---
 .../__snapshots__/save.test.js.snap           |  32 +-
 .../edit-with-select.test.js.snap             |  40 +-
 .../__snapshots__/edit.test.js.snap           |  40 +-
 .../__snapshots__/card-header.test.js.snap    |  20 +-
 .../__snapshots__/card-image.test.js.snap     |   8 +-
 .../horizontal-card-layout.test.js.snap       |  48 +-
 .../__snapshots__/posts-list.test.js.snap     |  64 +--
 .../__snapshots__/single-post.test.js.snap    |  32 +-
 .../vertical-card-layout.test.js.snap         | 136 ++---
 .../__snapshots__/edit.test.js.snap           |  24 +-
 .../__snapshots__/edit.test.js.snap           |  24 +-
 .../tab-bar/__snapshots__/save.test.js.snap   |   8 +-
 .../material-library.test.js.snap             |  68 +--
 .../__snapshots__/item.test.js.snap           |  57 +-
 .../google-fonts-control/item.test.js         |  78 ++-
 .../__snapshots__/index.test.js.snap          | 116 ++--
 .../__snapshots__/customize.test.js.snap      | 108 ++--
 .../__snapshots__/overview.test.js.snap       |  12 +-
 .../__snapshots__/wizard.test.js.snap         |   4 +-
 .../__snapshots__/index.test.js.snap          |   4 +-
 .../__snapshots__/updater.test.js.snap        |  16 +-
 .../wizard/__snapshots__/index.test.js.snap   |   4 +-
 .../content/__snapshots__/addons.test.js.snap |  12 +-
 .../content/__snapshots__/index.test.js.snap  |   4 +-
 .../content/__snapshots__/works.test.js.snap  |  20 +-
 .../js/wizard/components/header/index.test.js |  12 +-
 .../php/class-test-blocks-frontend.php        |   6 +-
 .../tests/phpunit/php/class-test-importer.php |   2 +-
 .../php/customizer/class-test-controls.php    |  75 +--
 ...-test-reset-card-style-rest-controller.php |   4 +-
 theme/404.php                                 |   2 +-
 theme/archive.php                             |   4 +-
 theme/assets/css/src/base/typography.css      |  56 +-
 .../assets/css/src/components/top-app-bar.css |   2 +-
 theme/assets/css/src/conf/mixins.css          |  38 +-
 theme/assets/css/src/conf/variables.css       |  28 +-
 theme/assets/css/src/editor.css               |   6 +-
 theme/assets/css/src/material-components.css  |   1 -
 theme/comments.php                            |   4 +-
 theme/functions.php                           |   4 +-
 theme/inc/class-walker-comment.php            |   6 +-
 theme/inc/template-tags.php                   |  10 +-
 theme/search.php                              |   2 +-
 theme/template-parts/content-none.php         |   2 +-
 theme/template-parts/content.php              |   8 +-
 theme/template-parts/footer.php               |   2 +-
 theme/template-parts/single-page.php          |   4 +-
 theme/template-parts/single.php               |   6 +-
 theme/template-parts/site-title.php           |   8 +-
 115 files changed, 1811 insertions(+), 1217 deletions(-)
 create mode 100644 plugin/assets/css/src/typography.css
 create mode 100644 plugin/php/class-migration.php

diff --git a/plugin/assets/css/src/components/material.css b/plugin/assets/css/src/components/material.css
index e79a093a3..503b76cd7 100644
--- a/plugin/assets/css/src/components/material.css
+++ b/plugin/assets/css/src/components/material.css
@@ -36,31 +36,9 @@
 	}
 }
 
-/* Typography */
-.mdc-typography--headline1 {
-	font-style: var(--mdc-typography-headline1-font-style, normal);
-}
-
-.mdc-typography--headline2 {
-	font-style: var(--mdc-typography-headline2-font-style, normal);
-}
-
-.mdc-typography--headline3 {
-	font-style: var(--mdc-typography-headline3-font-style, normal);
-}
-
-.mdc-typography--headline4 {
-	font-style: var(--mdc-typography-headline4-font-style, normal);
-}
-
-.mdc-typography--headline5 {
-	font-style: var(--mdc-typography-headline5-font-style, normal);
-}
-
-.mdc-typography--headline6,
 .mdc-drawer__title,
 .mdc-top-app-bar__title {
-	font-style: var(--mdc-typography-headline6-font-style, normal);
+	font-style: var(--md-sys-typescale-title-medium-style, normal);
 }
 
 .mdc-typography--subtitle1,
@@ -71,18 +49,18 @@
 .mdc-select__selected-text,
 .mdc-text-field__input,
 .mdc-text-field__affix {
-	font-style: var(--mdc-typography-subtitle1-font-style, normal);
+	font-style: var(--md-sys-typescale-label-large-style, normal);
 }
 
-.mdc-typography--subtitle2,
+.label-medium,
 .mdc-data-table__header-cell,
 .mdc-drawer .mdc-list-item,
 .mdc-slider .mdc-slider__value-indicator-text {
-	font-style: var(--mdc-typography-subtitle2-font-style, normal);
+	font-style: var(--md-sys-typescale-label-medium-style, normal);
 }
 
 .mdc-typography--body1 {
-	font-style: var(--mdc-typography-body1-font-style, normal);
+	font-style: var(--md-sys-typescale-body-large-style, normal);
 }
 
 .mdc-typography--body2,
@@ -95,7 +73,7 @@
 .mdc-drawer__subtitle,
 .mdc-form-field,
 .mdc-list-item__secondary-text {
-	font-style: var(--mdc-typography-body2-font-style, normal);
+	font-style: var(--md-sys-typescale-body-medium-style, normal);
 }
 
 .mdc-typography--caption,
@@ -104,17 +82,17 @@
 .mdc-text-field-helper-text,
 .mdc-text-field-character-counter,
 .mdc-tooltip__surface {
-	font-style: var(--mdc-typography-caption-font-style, normal);
+	font-style: var(--md-sys-typescale-body-small-style, normal);
 }
 
 .mdc-typography--button,
 .mdc-button,
 .mdc-tab {
-	font-style: var(--mdc-typography-button-font-style, normal);
+	font-style: var(--md-sys-typescale-label-large-style, normal);
 }
 
 .mdc-typography--overline {
-	font-style: var(--mdc-typography-overline-font-style, normal);
+	font-style: var(--md-sys-typescale-label-medium-style, normal);
 }
 
 /* Image List */
diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css
index 1b822fbc2..3c5604062 100644
--- a/plugin/assets/css/src/front-end.css
+++ b/plugin/assets/css/src/front-end.css
@@ -19,6 +19,7 @@
  */
 @import "./base/variables.css";
 @import "./conf/index.css";
+@import "typography.css";
 @import "./material-components.css";
 @import "./components/contact-form.css";
 @import "./components/masonry-grid.css";
@@ -27,3 +28,4 @@
 @import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
 @import "../../src/block-editor/blocks/card/style.css";
 @import "./block/style/masonry.css";
+@import "overrides.css";
diff --git a/plugin/assets/css/src/getting-started.css b/plugin/assets/css/src/getting-started.css
index 968b79f20..29fb349bd 100644
--- a/plugin/assets/css/src/getting-started.css
+++ b/plugin/assets/css/src/getting-started.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "@material/typography/dist/mdc.typography.css";
+@import "typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/button/dist/mdc.button.css";
 @import "@material/ripple/dist/mdc.ripple.css";
diff --git a/plugin/assets/css/src/gsm/base.css b/plugin/assets/css/src/gsm/base.css
index 1f7cfc3d6..04519d48d 100644
--- a/plugin/assets/css/src/gsm/base.css
+++ b/plugin/assets/css/src/gsm/base.css
@@ -15,20 +15,6 @@
  */
 
 .material-gsm {
-	--mdc-typography-headline1-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline2-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline3-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline4-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline5-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline6-font-family: "Roboto", sans-serif;
-	--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
-	--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
-	--mdc-typography-font-family: "Roboto", sans-serif;
-	--mdc-typography-body1-font-family: "Roboto", sans-serif;
-	--mdc-typography-body2-font-family: "Roboto", sans-serif;
-	--mdc-typography-caption-font-family: "Roboto", sans-serif;
-	--mdc-typography-button-font-family: "Roboto", sans-serif;
-	--mdc-typography-overline-font-family: "Roboto", sans-serif;
 	--material-design-gsm-primary-color: #212121;
 	--material-design-gsm-primary-text: #fff;
 	--material-design-gsm-background-color: #fff;
@@ -49,9 +35,15 @@
 	}
 
 	& h1,
+	& h2,
 	& h3,
 	& h4 {
 		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	.material-gsm__content-actions + h2 {
+		margin-top: 2rem;
 	}
 
 	& p {
diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css
index 485f78053..271510f28 100644
--- a/plugin/assets/css/src/material-components.css
+++ b/plugin/assets/css/src/material-components.css
@@ -30,6 +30,5 @@
 @import "@material/tab-indicator/dist/mdc.tab-indicator.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
 @import "@material/textfield/dist/mdc.textfield.css";
-@import "@material/typography/dist/mdc.typography.css";
 @import "@material/tooltip/dist/mdc.tooltip.css";
 @import "./components/material.css";
diff --git a/plugin/assets/css/src/mixins.css b/plugin/assets/css/src/mixins.css
index 184263781..56ad84476 100644
--- a/plugin/assets/css/src/mixins.css
+++ b/plugin/assets/css/src/mixins.css
@@ -17,31 +17,31 @@
 /* stylelint-disable */
 
 @define-mixin fontvars $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $tracking: 0.25, $font-style: normal {
-	--mdc-typography-$(type)-font-size: calc($font-size * 16)px;
-	--mdc-typography-$(type)-line-height: calc($line-height * 16)px;
-	--mdc-typography-$(type)-font-style: $font-style;
-	--mdc-typography-$(type)-font-weight: $font-weight;
-	--mdc-typography-$(type)-letter-spacing: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
+	--md-sys-typescale-$(type)-size: calc($font-size * 16)px;
+	--md-sys-typescale-$(type)-line-height: $line-height;
+	--md-sys-typescale-$(type)-style: $font-style;
+	--md-sys-typescale-$(type)-weight: $font-weight;
+	--md-sys-typescale-$(type)-tracking: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
 }
 
 @define-mixin typography $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
-.mdc-typography--$type $child {
-	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
-	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em) !important;
-	line-height: var(--mdc-typography-$(type)-line-height, $(line-height)em) !important;
-	font-style: var(--mdc-typography-$(type)-font-style, $font-style) !important;
-	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight) !important;
-	letter-spacing: var(--mdc-typography-$(type)-letter-spacing) !important;
-}
+	.$(type) $child {
+		font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
+		font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
+		line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
+		font-style: var(--md-sys-typescale-$(type)-style, $font-style);
+		font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
+		letter-spacing: var(--md-sys-typescale-$(type)-tracking);
+	}
 }
 
 @define-mixin selector-typography $selector, $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
 $selector $child {
-	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
-	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em) !important;
-	line-height: var(--mdc-typography-$(type)-line-height, $(line-height)em) !important;
-	font-style: var(--mdc-typography-$(type)-font-style, $font-style) !important;
-	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight) !important;
-	letter-spacing: var(--mdc-typography-$(type)-letter-spacing) !important;
+	font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
+	font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
+	line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
+	font-style: var(--md-sys-typescale-$(type)-style, $font-style);
+	font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
+	letter-spacing: var(--md-sys-typescale-$(type)-tracking);
 }
 }
diff --git a/plugin/assets/css/src/overrides.css b/plugin/assets/css/src/overrides.css
index 76dfe0986..371c2c6d7 100644
--- a/plugin/assets/css/src/overrides.css
+++ b/plugin/assets/css/src/overrides.css
@@ -14,60 +14,6 @@
  * limitations under the License.
  */
 
-/*
- * Frontend CSS to override other theme styles
- * which impact the material components.
- */
-
-@import "./mixins.css";
-
-/*
- * Set the typography vars by calculating with base font-size of 16px (browser default)
- * to override any theme font rem declaration on html element.
- * Material typography vars can be found at
- * https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L60
- */
-html {
-
-	@mixin fontvars headline1, 6, 6, 300, -1.5;
-	@mixin fontvars headline2, 3.75, 3.75, 300, -.5;
-	@mixin fontvars headline3, 3, 3.125, 400, 0;
-	@mixin fontvars headline4, 2.125, 2.5, 400, .25;
-	@mixin fontvars headline5, 1.5, 2, 400, 0;
-	@mixin fontvars headline6, 1.25, 2, 500, 0.15;
-	@mixin fontvars subtitle1, 1, 1.75, 400, .15;
-	@mixin fontvars subtitle2, 0.875, 1.375, 500, .1;
-	@mixin fontvars body1, 1, 1.5, 400, .5;
-	@mixin fontvars body2, 0.875, 1.25, 400, .25;
-	@mixin fontvars caption, 0.75, 1.25, 400, .4;
-	@mixin fontvars button, 0.875, 2.25, 500, 1.25;
-	@mixin fontvars overline, 0.75, 2, 500, 1.5;
-}
-
-@mixin typography headline1, 6, 6, 300;
-@mixin typography headline2, 3.75, 3.75, 300;
-@mixin typography headline3, 3, 3.125, 400;
-@mixin typography headline4, 2.125, 2.5, 400;
-@mixin typography headline5, 1.5, 2, 400;
-@mixin typography headline6, 1.25, 2, 500;
-@mixin typography subtitle1, 1, 1.75, 400;
-@mixin typography subtitle2, 0.875, 1.375, 500;
-@mixin typography body1, 1, 1.5, 400;
-@mixin typography body2, 0.875, 1.25, 400;
-@mixin typography caption, 0.75, 1.25, 400;
-@mixin typography button, 0.875, 2.25, 500;
-@mixin typography overline, 0.75, 2, 500;
-
-/* For `body` types typography should be applied to child elements as well */
-@mixin typography body1, 1, 1.5, 400, *;
-@mixin typography body2, 0.875, 1.25, 400, *;
-
-/* Additional selectors requiring typography styles */
-@mixin selector-typography .mdc-button, button, 0.875, 2.25, 500;
-@mixin selector-typography .mdc-button .mdc-button__label, button, 0.875, 2.25, 500;
-@mixin selector-typography .mdc-list-item__primary-text, body1, 1, 1.5, 400;
-@mixin selector-typography .mdc-list-item__secondary-text, body2, 0.875, 1.25, 400;
-
 /* Material Design Icons */
 .material-icons {
 	font-family: var(--mdc-icons-font-family) !important;
diff --git a/plugin/assets/css/src/settings.css b/plugin/assets/css/src/settings.css
index 27afc1c3e..94a5dad7d 100644
--- a/plugin/assets/css/src/settings.css
+++ b/plugin/assets/css/src/settings.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "@material/typography/dist/mdc.typography.css";
+@import "typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/ripple/dist/mdc.ripple.css";
 @import "@material/switch/dist/mdc.switch.css";
diff --git a/plugin/assets/css/src/settings/base.css b/plugin/assets/css/src/settings/base.css
index 71a3c503f..50d9f4c08 100644
--- a/plugin/assets/css/src/settings/base.css
+++ b/plugin/assets/css/src/settings/base.css
@@ -15,20 +15,10 @@
  */
 
 .material-settings {
-	--mdc-typography-headline1-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline2-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline3-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline4-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline5-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline6-font-family: "Roboto", sans-serif;
-	--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
-	--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
-	--mdc-typography-font-family: "Roboto", sans-serif;
-	--mdc-typography-body1-font-family: "Roboto", sans-serif;
-	--mdc-typography-body2-font-family: "Roboto", sans-serif;
-	--mdc-typography-caption-font-family: "Roboto", sans-serif;
-	--mdc-typography-button-font-family: "Roboto", sans-serif;
-	--mdc-typography-overline-font-family: "Roboto", sans-serif;
+	--md-sys-typescale-headline-large-line-height: 2em;
+	--md-sys-typescale-headline-medium-line-height: 2em;
+	--md-sys-typescale-headline-small-line-height: 2em;
+
 	--material-design-settings-background-color: #fff;
 	--material-design-settings-primary-color: #212121;
 	--material-design-settings-primary-text: #fff;
diff --git a/plugin/assets/css/src/typography.css b/plugin/assets/css/src/typography.css
new file mode 100644
index 000000000..a5fdf7ef9
--- /dev/null
+++ b/plugin/assets/css/src/typography.css
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Frontend CSS to override other theme styles
+ * which impact the material components.
+ */
+
+@import "./mixins.css";
+
+/*
+ * Set the typography vars by calculating with base font-size of 16px (browser default)
+ * to override any theme font rem declaration on html element.
+ * Material typography vars can be found at
+ * https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L60
+ */
+html {
+
+	@mixin fontvars display-large, 7.5, 6, 300, -1.5;
+	@mixin fontvars display-medium, 6.875, 6, 300, -1.5;
+	@mixin fontvars display-small, 6, 6, 300, -1.5;
+	@mixin fontvars headline-large, 3.75, 3.75, 300, -.5;
+	@mixin fontvars headline-medium, 3, 3.125, 400, 0;
+	@mixin fontvars headline-small, 2.125, 2.5, 400, .25;
+	@mixin fontvars title-large, 1.5, 2, 400, 0;
+	@mixin fontvars title-medium, 1.25, 2, 500, 0.15;
+	@mixin fontvars label-large, 1, 1.75, 400, .15;
+	@mixin fontvars label-medium, 0.875, 1.375, 500, .1;
+	@mixin fontvars label-small, 0.75, 2, 500, 1.5;
+	@mixin fontvars body-large, 1, 1.5, 400, .5;
+	@mixin fontvars body-medium, 0.875, 1.25, 400, .25;
+	@mixin fontvars body-small, 0.75, 1.25, 400, .4;
+}
+
+@mixin typography display-large, 7.5, 6, 300;
+@mixin typography display-medium, 6.875, 6, 300;
+@mixin typography display-small, 6, 6, 300;
+@mixin typography headline-large, 3.75, 3.75, 300;
+@mixin typography headline-medium, 3, 3.125, 400;
+@mixin typography headline-small, 2.125, 2.5, 400;
+@mixin typography title-large, 1.5, 2, 400;
+@mixin typography title-medium, 1.25, 2, 500;
+@mixin typography title-small, 0.875, 1.57, 500;
+@mixin typography label-large, 1, 1.75, 400;
+@mixin typography label-medium, 0.875, 1.375, 500;
+@mixin typography body-large, 1, 1.5, 400;
+@mixin typography body-medium, 0.875, 1.25, 400;
+@mixin typography body-small, 0.75, 1.25, 400;
+@mixin typography label-large, 0.875, 2.25, 500;
+@mixin typography label-medium, 0.75, 2, 500;
+
+/* For `body` types typography should be applied to child elements as well */
+@mixin typography body-large, 1, 1.5, 400, *;
+@mixin typography body-medium, 0.875, 1.25, 400, *;
+
+/* Additional selectors requiring typography styles */
+@mixin selector-typography .mdc-button, label-large, 0.875, 2.25, 500;
+@mixin selector-typography .mdc-button .mdc-button__label, label-large, 0.875, 2.25, 500;
+@mixin selector-typography .mdc-list-item__primary-text, body-large, 1, 1.5, 400;
+@mixin selector-typography .mdc-list-item__secondary-text, body-medium, 0.875, 1.25, 400;
+
+/* Backward compatibility for old typography classes. */
+@mixin selector-typography .mdc-typography--headline1, display-small, 6, 6, 300;
+@mixin selector-typography .mdc-typography--headline2, headline-large, 3.75, 3.75, 300;
+@mixin selector-typography .mdc-typography--headline3, headline-medium, 3, 3.125, 400;
+@mixin selector-typography .mdc-typography--headline4, headline-small, 2.125, 2.5, 400;
+@mixin selector-typography .mdc-typography--headline5, title-large, 1.5, 2, 400;
+@mixin selector-typography .mdc-typography--headline6, title-medium, 1.25, 2, 500;
+@mixin selector-typography .mdc-typography--subhead1, title-medium, 1.25, 2, 500;
+@mixin selector-typography .mdc-typography--subhead2, title-small, 0.875, 1.57, 500;
+@mixin selector-typography .mdc-typography--body1, body-large, 1, 1.5, 400;
+@mixin selector-typography .mdc-typography--body2, body-medium, 0.875, 1.25, 400;
+@mixin selector-typography .mdc-typography--caption, body-small, 0.75, 1.25, 400;
+@mixin selector-typography .mdc-typography--button, label-large, 1, 1.75, 400;
+@mixin selector-typography .mdc-typography--overline, label-medium, 0.875, 1.375, 500;
+@mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400;
+@mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500;
+
+/* Backward compat: For `body` types typography should be applied to child elements as well */
+@mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400;
+@mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400;
diff --git a/plugin/assets/css/src/wizard.css b/plugin/assets/css/src/wizard.css
index 8ab2fb5db..f268c6dc5 100644
--- a/plugin/assets/css/src/wizard.css
+++ b/plugin/assets/css/src/wizard.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "@material/typography/dist/mdc.typography.css";
+@import "typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/button/dist/mdc.button.css";
 @import "@material/switch/dist/mdc.switch.css";
diff --git a/plugin/assets/css/src/wizard/base.css b/plugin/assets/css/src/wizard/base.css
index a1e9db49d..89483d6fa 100644
--- a/plugin/assets/css/src/wizard/base.css
+++ b/plugin/assets/css/src/wizard/base.css
@@ -15,7 +15,11 @@
  */
 
 .material-wizard {
-	--mdc-typography-headline5-font-family: "Roboto Mono", monospace;
+	--md-sys-typescale-headline-large-line-height: 2em;
+	--md-sys-typescale-headline-medium-line-height: 2em;
+	--md-sys-typescale-headline-small-line-height: 2em;
+	--md-sys-typescale-title-large-font: "Roboto Mono", monospace;
+
 	--material-design-wizard-primary-color: #212121;
 	--material-design-wizard-primary-text: #fff;
 	max-width: 1024px;
@@ -47,10 +51,5 @@
 }
 
 #material-onboarding-wizard {
-	--mdc-typography-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline3-font-family: "Roboto", sans-serif;
-	--mdc-typography-headline4-font-family: "Roboto", sans-serif;
-	--mdc-typography-body1-font-family: "Roboto", sans-serif;
-	--mdc-typography-button-font-family: "Roboto", sans-serif;
 	margin-top: -32px;
 }
diff --git a/plugin/assets/css/src/wizard/content.css b/plugin/assets/css/src/wizard/content.css
index 474b5ac66..26c085591 100644
--- a/plugin/assets/css/src/wizard/content.css
+++ b/plugin/assets/css/src/wizard/content.css
@@ -20,13 +20,11 @@
 	padding: 2.5rem;
 
 	& p {
-		font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto,));
-		font-size: var(--mdc-typography-body1-font-size, 1rem);
-		line-height: var(--mdc-typography-body1-line-height, 1.5);
-		font-weight: var(--mdc-typography-body1-font-weight, 400);
-		letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
-		text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
-		text-transform: var(--mdc-typography-body1-text-transform, inherit);
+		font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
+		font-size: var(--md-sys-typescale-body-large-size, 1rem);
+		line-height: var(--md-sys-typescale-body-large-line-height, 1.5);
+		font-weight: var(--md-sys-typescale-body-large-weight, 400);
+		letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.03125em);
 	}
 
 	& hr {
diff --git a/plugin/assets/importer/demo-content.xml b/plugin/assets/importer/demo-content.xml
index c0861820f..77c4f5d42 100644
--- a/plugin/assets/importer/demo-content.xml
+++ b/plugin/assets/importer/demo-content.xml
@@ -538,7 +538,7 @@
 <!-- /wp:heading -->
 
 <!-- wp:material/cards-collection {"style":"grid","cardsProps":[{"contentLayout":"text-under-media","title":"Nulla libero ex","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":false,"imageSourceUrl":"https://images.unsplash.com/photo-1558906217-200fade11db0?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=900\u0026q=60","isImageEditMode":false,"displayImage":true,"supportingText":"Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":false,"displaySecondaryActionButton":false},{"contentLayout":"text-under-media","title":"Praesent non convallis","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":false,"imageSourceUrl":"https://images.unsplash.com/photo-1558905586-d9bc8798d488?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=2612\u0026q=80","isImageEditMode":false,"displayImage":true,"supportingText":"Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":false,"displaySecondaryActionButton":false}],"displaySecondaryText":false,"displayActions":false} -->
-<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558906217-200fade11db0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=900&amp;q=60" alt="Nulla libero ex"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558905586-d9bc8798d488?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2612&amp;q=80" alt="Praesent non convallis"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>
+<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558906217-200fade11db0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=900&amp;q=60" alt="Nulla libero ex"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography--headline6">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography--body2">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="https://images.unsplash.com/photo-1558905586-d9bc8798d488?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2612&amp;q=80" alt="Praesent non convallis"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography--headline6">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography--body2">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>
 <!-- /wp:material/cards-collection -->
 
 <!-- wp:cover {"customOverlayColor":"#f3f3f3","align":"full"} -->
diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-primary.js b/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
index bc94371b6..a29fa6605 100644
--- a/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
+++ b/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
@@ -49,7 +49,7 @@ const CardPrimary = ( {
 				{ displayTitle && (
 					<RichText
 						tagName="h2"
-						className="material-design-card__title mdc-typography mdc-typography--headline6"
+						className="material-design-card__title title-large"
 						value={ title }
 						onChange={ value =>
 							setter( 'title', value, cardIndex )
@@ -63,7 +63,7 @@ const CardPrimary = ( {
 				{ displaySecondaryText && (
 					<RichText
 						tagName="h3"
-						className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+						className="material-design-card__secondary-text label-medium"
 						value={ secondaryText }
 						onChange={ value =>
 							setter( 'secondaryText', value, cardIndex )
@@ -78,12 +78,12 @@ const CardPrimary = ( {
 		) : (
 			<>
 				{ displayTitle && (
-					<h2 className="material-design-card__title mdc-typography mdc-typography--headline6">
+					<h2 className="material-design-card__title title-large">
 						{ title }
 					</h2>
 				) }
 				{ displaySecondaryText && (
-					<h3 className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">
+					<h3 className="material-design-card__secondary-text label-medium">
 						{ secondaryText }
 					</h3>
 				) }
diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js b/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js
index 99f230115..77b60b342 100644
--- a/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js
+++ b/plugin/assets/src/block-editor/blocks/card/components/card-supporting-text.js
@@ -52,7 +52,7 @@ const CardSupportingText = ( {
 					'material-design-card__supporting-text',
 					`material-design-card__supporting-text_${ contentLayout }`,
 					'mdc-typography',
-					'mdc-typography--body2'
+					'body-medium'
 				) }
 				value={ supportingText }
 				onChange={ value =>
@@ -66,7 +66,7 @@ const CardSupportingText = ( {
 					'material-design-card__supporting-text',
 					`material-design-card__supporting-text_${ contentLayout }`,
 					'mdc-typography',
-					'mdc-typography--body2'
+					'body-medium'
 				) }
 			>
 				{ supportingText }
diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js
index 70a77d24e..ead38a16e 100644
--- a/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js
+++ b/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-header.js
@@ -34,7 +34,7 @@ import { RawHTML } from '@wordpress/element';
  */
 const CardHeader = ( { titleTrimmed, displayPostDate, post, dateFormat } ) => (
 	<div className="single-post-card__primary">
-		<h2 className="single-post-card__title mdc-typography mdc-typography--headline6">
+		<h2 className="single-post-card__title title-large">
 			{ titleTrimmed ? (
 				<RawHTML>{ titleTrimmed }</RawHTML>
 			) : (
@@ -42,7 +42,7 @@ const CardHeader = ( { titleTrimmed, displayPostDate, post, dateFormat } ) => (
 			) }
 		</h2>
 		{ displayPostDate && (
-			<h3 className="single-post-card__subtitle mdc-typography mdc-typography--subtitle2">
+			<h3 className="single-post-card__subtitle label-medium">
 				<time dateTime={ format( 'Y-m-d h:i:s', post.date_gmt ) }>
 					{ dateI18n( dateFormat, post.date_gmt ) }
 				</time>
diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js
index 658a85475..3e1858d65 100644
--- a/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js
+++ b/plugin/assets/src/block-editor/blocks/common-posts-list/components/vertical-card-layout.js
@@ -107,7 +107,7 @@ const VerticalCardLayout = props => {
 							'single-post-card__secondary',
 							`single-post-card__secondary-${ contentLayout }`,
 							'mdc-typography',
-							'mdc-typography--body2'
+							'body-medium'
 						) }
 					>
 						<RawHTML key="html">
diff --git a/plugin/assets/src/block-editor/blocks/tab-bar/save.js b/plugin/assets/src/block-editor/blocks/tab-bar/save.js
index 49b7449ff..8fc77d202 100644
--- a/plugin/assets/src/block-editor/blocks/tab-bar/save.js
+++ b/plugin/assets/src/block-editor/blocks/tab-bar/save.js
@@ -58,12 +58,9 @@ const TabBarSave = ( { attributes: { tabs, iconPosition } } ) => {
 				{ tabs.map( ( tab, index ) => (
 					<RawHTML
 						key={ tab.label + tab.position }
-						className={ classNames(
-							'mdc-tab-content mdc-typography--body1',
-							{
-								'mdc-tab-content--active': index === 0,
-							}
-						) }
+						className={ classNames( 'mdc-tab-content body-large', {
+							'mdc-tab-content--active': index === 0,
+						} ) }
 					>
 						{ tab.content &&
 							Array.isArray( tab.content ) &&
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/index.js b/plugin/assets/src/customizer/components/google-fonts-control/index.js
index 472b0e986..2fac7361f 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/index.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/index.js
@@ -80,6 +80,8 @@ const GoogleFontsControl = props => {
 		const settings = {
 			size: child.sizeValue,
 			weight: child.weightValue,
+			tracking: child.trackingValue,
+			lineHeight: child.lineHeightValue,
 		};
 
 		childControl.setting.set( JSON.stringify( settings ) );
@@ -97,16 +99,20 @@ const GoogleFontsControl = props => {
 		}
 
 		const newChildren = children.map( child => {
-			const { size, weight } = child;
+			const { size, weight, tracking, lineHeight } = child;
 
 			setChildValues( {
 				id: child.id,
 				sizeValue: size.default,
 				weightValue: weight.default,
+				trackingValue: tracking.default,
+				lineHeightValue: lineHeight.default,
 			} );
 
 			size.value = size.default;
 			weight.value = weight.default;
+			tracking.value = tracking.default;
+			lineHeight.value = lineHeight.default;
 
 			return child;
 		} );
@@ -124,6 +130,8 @@ const GoogleFontsControl = props => {
 
 			child.size.value = values.sizeValue;
 			child.weight.value = values.weightValue;
+			child.tracking.value = values.trackingValue;
+			child.lineHeight.value = values.lineHeightValue;
 
 			return child;
 		} );
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index 4a9207fd5..cb25cd5c6 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -30,7 +30,7 @@ import { SelectControl } from '@wordpress/components';
 import { STYLES } from './styles';
 
 const Item = props => {
-	const { label, size, weight, id, onChange } = props;
+	const { label, size, weight, lineHeight, id, onChange, tracking } = props;
 	const [ choices, setChoices ] = useState( [] );
 
 	useEffect( () => {
@@ -59,13 +59,44 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-number-control-${ id }` }
-							id={ `inspector-number-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
+						>
+							{ lineHeight.label }
+						</label>
+						<input
+							id={ `inspector-line-height-control-${ id }` }
+							className="components-google-fonts-control__number"
+							type="number"
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
+							onChange={ event => {
+								const lineHeightValue = event.target.value;
+
+								onChange( {
+									id,
+									lineHeightValue,
+									trackingValue: tracking.value,
+									sizeValue: size.value,
+									weightValue: weight.value,
+								} );
+							} }
+						/>
+					</div>
+				</div>
+				<div className="components-base-control">
+					<div className="components-base-control__field">
+						<label
+							className="components-base-control__label"
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
 							{ size.label }
 						</label>
 						<input
-							id={ `inspector-number-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
 							value={ size.value || size.default }
@@ -77,13 +108,44 @@ const Item = props => {
 								onChange( {
 									id,
 									sizeValue,
+									trackingValue: tracking.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
 					</div>
 				</div>
+				<div className="components-base-control">
+					<div className="components-base-control__field">
+						<label
+							className="components-base-control__label"
+							htmlFor={ `inspector-tracking-control-${ id }` }
+							id={ `inspector-tracking-label-${ id }` }
+						>
+							{ tracking.label }
+						</label>
+						<input
+							id={ `inspector-tracking-control-${ id }` }
+							className="components-google-fonts-control__number"
+							type="number"
+							value={ tracking.value || tracking.default }
+							min={ tracking.min }
+							max={ tracking.max }
+							onChange={ event => {
+								const trackingValue = event.target.value;
 
+								onChange( {
+									id,
+									trackingValue,
+									sizeValue: size.value,
+									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
+								} );
+							} }
+						/>
+					</div>
+				</div>
 				<SelectControl
 					className="components-google-fonts-control__select"
 					value={ weight.value || weight.default }
@@ -93,7 +155,9 @@ const Item = props => {
 						onChange( {
 							id,
 							sizeValue: size.value,
+							trackingValue: tracking.value,
 							weightValue: value,
+							lineHeightValue: lineHeight.value,
 						} )
 					}
 				/>
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index a3d8260e4..a80e2b4f8 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -27,19 +27,21 @@
 
 	.google-fonts-control__values {
 		display: flex;
+		flex-direction: column;
+		gap: 20px;
 	}
 
 	.components-base-control {
-		width: 40%;
 
-		&:last-child {
-			width: 52%;
+		&:last-child .components-base-control__field {
+			display: block;
 		}
 	}
 
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
+		justify-content: space-between;
 
 		& input {
 			max-width: 50%;
@@ -57,6 +59,16 @@
 		padding: 8px 0 8px 8px;
 	}
 
+	.components-google-fonts-control__select {
+		flex-direction: row;
+		align-items: center;
+
+		& .components-input-control__container {
+			flex: auto;
+			max-width: 50%;
+		}
+	}
+
 	.components-google-fonts-control__select select {
 		max-width: 80%;
 	}
diff --git a/plugin/assets/src/customizer/components/material-library/index.js b/plugin/assets/src/customizer/components/material-library/index.js
index 7e0d2b19b..bd933f6b7 100644
--- a/plugin/assets/src/customizer/components/material-library/index.js
+++ b/plugin/assets/src/customizer/components/material-library/index.js
@@ -45,25 +45,40 @@ import colorUtils from '../../../common/color-utils';
  * Adds link tag with appropriate google fonts to head.
  *
  * @param {string} headings Import headings font
+ * @param {string} headline Import headline font
  * @param {string} body     Import body font
+ * @param {string} display  Import display font
+ * @param {string} label    Import label font
  *
  * @return {HTMLLinkElement} Link to google fonts.
  */
-const googleFontsUrl = ( headings, body ) => {
+const googleFontsUrl = ( headings, headline, body, display, label ) => {
 	const join = str => str.replace( ' ', '+' );
 	const link = document.createElement( 'link' );
 
+	const fonts = [ headline, headings, body, display, label ];
+
+	// Make fonts unique.
+	const uniqueFonts = [ ...new Set( fonts ) ];
+
+	// Clean up empty fonts.
+	const cleanFonts = uniqueFonts.filter( font => font );
+
+	// Join fonts into string as pipe.
+	const fontString = join( cleanFonts.join( '|' ) );
+
 	link.rel = 'stylesheet';
-	link.href = `https://fonts.googleapis.com/css?family=${ join(
-		headings
-	) }|${ join( body ) }`;
+	link.href = `https://fonts.googleapis.com/css?family=${ fontString }`;
 
 	return link;
 };
 
 const MaterialLibrary = ( {
 	bodyFontFamily,
-	headFontFamily,
+	labelFontFamily,
+	headlineFontFamily,
+	displayFontFamily,
+	titleFontFamily,
 	iconCollection,
 	primaryColor,
 	onPrimaryColor,
@@ -82,7 +97,13 @@ const MaterialLibrary = ( {
 	theme,
 } ) => {
 	const [ link ] = useState(
-		googleFontsUrl( headFontFamily, bodyFontFamily )
+		googleFontsUrl(
+			titleFontFamily,
+			headlineFontFamily,
+			bodyFontFamily,
+			displayFontFamily,
+			labelFontFamily
+		)
 	);
 
 	const iconStyle = materialIconClass( iconCollection );
@@ -95,8 +116,11 @@ const MaterialLibrary = ( {
 	return (
 		<>
 			<Overrides
-				headings={ headFontFamily }
+				headline={ headlineFontFamily }
 				body={ bodyFontFamily }
+				title={ bodyFontFamily }
+				display={ displayFontFamily }
+				label={ labelFontFamily }
 				primaryColor={ primaryColor }
 				secondaryColor={ secondaryColor }
 				onPrimaryColor={ onPrimaryColor }
@@ -119,11 +143,11 @@ const MaterialLibrary = ( {
 			/>
 
 			<div id="material-library-preview">
-				<h2 className="mdc-typography--headline2">
+				<h2 className="headline-large">
 					{ __( 'Material Components', 'material-design' ) }
 				</h2>
 				<section>
-					<h3 className="mdc-typography--headline3">
+					<h3 className="headline-medium">
 						{ __( 'Blocks', 'material-design' ) }
 					</h3>
 					<p>
@@ -157,7 +181,7 @@ const MaterialLibrary = ( {
 				<hr />
 
 				<section style={ { marginTop: '100px' } }>
-					<h3 className="mdc-typography--headline3">
+					<h3 className="headline-medium">
 						{ __( 'Components', 'material-design' ) }
 					</h3>
 					<p>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/buttons.js b/plugin/assets/src/customizer/components/material-library/sections/buttons.js
index 99f030444..c80282626 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/buttons.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/buttons.js
@@ -27,7 +27,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Buttons = ( { radius, iconStyle, primaryColor } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Buttons', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/buttons"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/cards.js b/plugin/assets/src/customizer/components/material-library/sections/cards.js
index 6e007d0bf..50cf23c0a 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/cards.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/cards.js
@@ -27,7 +27,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Cards = ( { radius, buttonRadius } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Cards', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/cards"></IconButtonLink>
@@ -59,13 +59,13 @@ const Cards = ( { radius, buttonRadius } ) => (
 					></div>
 					<div style={ { padding: '16px' } }>
 						<h2
-							className="mdc-typography mdc-typography--headline6 material-design-card__title"
+							className="title-large material-design-card__title"
 							style={ { margin: 0, marginBottom: '5px' } }
 						>
 							{ __( 'Our Changing Planet', 'material-design' ) }
 						</h2>
 						<h3
-							className="mdc-typography material-design-card__secondary-text"
+							className="material-design-card__secondary-text"
 							style={ {
 								fontSize: '0.875rem',
 								fontWeight: 500,
@@ -76,10 +76,7 @@ const Cards = ( { radius, buttonRadius } ) => (
 							{ __( 'by John Smith', 'material-design' ) }
 						</h3>
 					</div>
-					<div
-						className="mdc-typography mdc-typography--body2"
-						style={ { padding: '16px' } }
-					>
+					<div className="body-medium" style={ { padding: '16px' } }>
 						{ __(
 							'Visit ten places on our planet that are undergoing the biggest changes today.',
 							'material-design'
diff --git a/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js b/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js
index d53d5fae0..4d2f7ea59 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/checkboxes.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Checkboxes = () => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Checkboxes', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/develop/web/components/input-controls/checkboxes"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/chips.js b/plugin/assets/src/customizer/components/material-library/sections/chips.js
index e2c31889c..e441566c3 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/chips.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/chips.js
@@ -33,7 +33,7 @@ import IconButtonLink from '../common/icon-button-link';
  */
 const Chips = ( { radius } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Chips', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/chips"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/fields.js b/plugin/assets/src/customizer/components/material-library/sections/fields.js
index 95cc860fd..09cccc4dd 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/fields.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/fields.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Fields = ( { radius } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Text fields', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/text-fields"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/image-lists.js b/plugin/assets/src/customizer/components/material-library/sections/image-lists.js
index d4f799e8a..009d2fd0d 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/image-lists.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/image-lists.js
@@ -27,7 +27,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const ImageLists = ( { radius } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Gallery (Image Lists)', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/image-lists"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/lists.js b/plugin/assets/src/customizer/components/material-library/sections/lists.js
index 54a31d7e5..e1f625f03 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/lists.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/lists.js
@@ -31,7 +31,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Lists = ( { iconStyle } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Lists', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/lists"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/radios.js b/plugin/assets/src/customizer/components/material-library/sections/radios.js
index 4602b6510..7ece299f9 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/radios.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/radios.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Radios = () => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Radio buttons', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/develop/web/components/input-controls/radio-buttons"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/switch.js b/plugin/assets/src/customizer/components/material-library/sections/switch.js
index 8a8568e5e..0a1305380 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/switch.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/switch.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Switch = () => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Switches', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/develop/web/components/input-controls/switches"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js b/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js
index e56ef4f14..474754f2e 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/tab-bar.js
@@ -31,7 +31,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const TabBar = ( { iconStyle } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Tabs', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/tabs"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/sections/table.js b/plugin/assets/src/customizer/components/material-library/sections/table.js
index ceaf994d4..a8af25c88 100644
--- a/plugin/assets/src/customizer/components/material-library/sections/table.js
+++ b/plugin/assets/src/customizer/components/material-library/sections/table.js
@@ -26,7 +26,7 @@ import IconButtonLink from '../common/icon-button-link';
 
 const Table = ( { radius } ) => (
 	<div>
-		<h4 className="mdc-typography--headline4" style={ { margin: 0 } }>
+		<h4 className="headline-small" style={ { margin: 0 } }>
 			{ __( 'Data Tables', 'material-design' ) }
 		</h4>
 		<IconButtonLink href="https://material.io/components/data-tables"></IconButtonLink>
diff --git a/plugin/assets/src/customizer/components/material-library/styles.js b/plugin/assets/src/customizer/components/material-library/styles.js
index 29c1caf15..6f862d74d 100644
--- a/plugin/assets/src/customizer/components/material-library/styles.js
+++ b/plugin/assets/src/customizer/components/material-library/styles.js
@@ -26,8 +26,21 @@ import colorUtils from '../../../common/color-utils';
 
 export const Overrides = createGlobalStyle`
 	:root {
-    	--body-font: ${ props => props.body };
-    	--heading-font: ${ props => props.headings };
+		--md-sys-typescale-headline-large-font: ${ props => props.headline };
+		--md-sys-typescale-headline-medium-font: ${ props => props.headline };
+		--md-sys-typescale-headline-small-font: ${ props => props.headline };
+		--md-sys-typescale-body-large-font: ${ props => props.body };
+		--md-sys-typescale-body-medium-font: ${ props => props.body };
+		--md-sys-typescale-body-small-font: ${ props => props.body };
+		--md-sys-typescale-display-large-font: ${ props => props.display };
+		--md-sys-typescale-display-medium-font: ${ props => props.display };
+		--md-sys-typescale-display-small-font: ${ props => props.display };
+		--md-sys-typescale-label-large-font: ${ props => props.label };
+		--md-sys-typescale-label-medium-font: ${ props => props.label };
+		--md-sys-typescale-label-small-font: ${ props => props.label };
+		--md-sys-typescale-title-large-font: ${ props => props.title };
+		--md-sys-typescale-title-medium-font: ${ props => props.title };
+		--md-sys-typescale-title-small-font: ${ props => props.title };
 
 		--mdc-theme-primary: ${ props => props.primaryColor };
 		--mdc-theme-secondary: ${ props => props.secondaryColor };
@@ -53,7 +66,7 @@ export const Overrides = createGlobalStyle`
 		--mdc-theme-text-icon-on-background: rgba(--mdc-theme-on-background-rgb, 0.38);
 	}
 
-	#mcb-material-library-preview .mdc-typography {
+	#mcb-material-library-preview .{
 		font-family: var(--heading-font) !important;
 	}
 
@@ -67,7 +80,7 @@ export const Overrides = createGlobalStyle`
 	#mcb-material-library-preview input[type="text"],
 	#mcb-material-library-preview button:not([class*="material-icons"]),
 	#mcb-material-library-preview span:not([class*="material-icons"]) {
-		font-family: var(--body-font) !important;
+		font-family: var(--md-sys-typescale-body-large-font) !important;
 		font-size: 16px;
 	}
 
@@ -76,7 +89,7 @@ export const Overrides = createGlobalStyle`
 	#mcb-material-library-preview h3,
 	#mcb-material-library-preview h4 {
 		color: var(--mdc-theme-on-background) !important;
-		font-family: var(--heading-font);
+		font-family: var(--md-sys-typescale-title-large-font);
 	}
 
 	#mcb-material-library-preview .mdc-list-item__secondary-text {
diff --git a/plugin/assets/src/customizer/customize-controls.js b/plugin/assets/src/customizer/customize-controls.js
index 8968ff1d0..8ad36416c 100644
--- a/plugin/assets/src/customizer/customize-controls.js
+++ b/plugin/assets/src/customizer/customize-controls.js
@@ -652,6 +652,8 @@ import handleGlobalStyleResetButtonClick from './components/reset-card-style';
 
 				child.size.value = valueObject.size;
 				child.weight.value = valueObject.weight;
+				child.tracking.value = valueObject.tracking;
+				child.lineHeight.value = valueObject.lineHeight;
 
 				return child;
 			} );
diff --git a/plugin/assets/src/customizer/customize-preview.js b/plugin/assets/src/customizer/customize-preview.js
index 5d56ea759..d0ebd6f8e 100644
--- a/plugin/assets/src/customizer/customize-preview.js
+++ b/plugin/assets/src/customizer/customize-preview.js
@@ -196,7 +196,11 @@ export const COLOR_MODES = {
 
 					if ( 'size' === rule ) {
 						styles += `${ typographyControls[ control ][ rule ] }: ${ rules[ rule ] }px !important;`;
-					} else {
+					} else if ( 'tracking' === rule ) {
+						// Compute tracking to line-height.
+						const lineHeight = rules[ rule ] / ( rules.size || 16 );
+						styles += `${ typographyControls[ control ][ rule ] }: ${ lineHeight }rem !important;`;
+					} else if ( 'weight' === rule ) {
 						const fontStyle = /italic$/.test( rules[ rule ] )
 							? 'italic'
 							: 'normal';
@@ -208,6 +212,8 @@ export const COLOR_MODES = {
 
 						styles += `${ typographyControls[ control ].style }: ${ fontStyle } !important;`;
 						styles += `${ typographyControls[ control ][ rule ] }: ${ weight } !important;`;
+					} else {
+						styles += `${ typographyControls[ control ][ rule ] }: ${ rules[ rule ] } !important;`;
 					}
 				}
 			}
diff --git a/plugin/assets/src/getting-started/components/content/customize.js b/plugin/assets/src/getting-started/components/content/customize.js
index a437546d0..fee766ef8 100644
--- a/plugin/assets/src/getting-started/components/content/customize.js
+++ b/plugin/assets/src/getting-started/components/content/customize.js
@@ -29,10 +29,10 @@ import getConfig from '../../get-config';
 export const Customize = () => {
 	return (
 		<Fragment>
-			<h2 className="material-gsm__content-title mdc-typography--headline3">
+			<h2 className="material-gsm__content-title headline-medium">
 				{ __( 'Customize your Theme', 'material-design' ) }
 			</h2>
-			<p>
+			<p className="body-large">
 				{ __(
 					'Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.',
 					'material-design'
@@ -56,11 +56,11 @@ export const Customize = () => {
 				/>
 			</div>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Starter Styles', 'material-design' ) }
 			</h2>
 
-			<p>
+			<p className={ 'body-large' }>
 				{ __(
 					'Start from our existing styles and use ',
 					'material-design'
@@ -78,10 +78,10 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Color Palettes', 'material-design' ) }
 			</h2>
-			<p>
+			<p className={ 'body-large' }>
 				{ __(
 					'Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s ',
 					'material-design'
@@ -99,11 +99,11 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Typography', 'material-design' ) }
 			</h2>
 
-			<p>
+			<p className={ 'body-large' }>
 				{ __(
 					'Choose from more than 1,000 typefaces in ',
 					'material-design'
@@ -132,20 +132,20 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Corner Styles', 'material-design' ) }
 			</h2>
-			<p>
+			<p className={ 'body-large' }>
 				{ __(
 					'Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.',
 					'material-design'
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Icon Style', 'material-design' ) }
 			</h2>
-			<p>
+			<p className="body-large">
 				{ __( 'All ', 'material-design' ) }
 				<a
 					href="http://material.io/icons"
@@ -160,10 +160,10 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline3">
+			<h2 className="material-gsm__content-title headline-medium">
 				{ __( 'Set Layout & Navigation', 'material-design' ) }
 			</h2>
-			<p>
+			<p className="body-large">
 				{ __(
 					'Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. ',
 					'material-design'
@@ -174,21 +174,21 @@ export const Customize = () => {
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Top app bar', 'material-design' ) }
 			</h2>
-			<p>
+			<p className="body-large">
 				{ __(
 					'Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.',
 					'material-design'
 				) }
 			</p>
 
-			<h2 className="material-gsm__content-title mdc-typography--headline5">
+			<h2 className="material-gsm__content-title title-large">
 				{ __( 'Footer', 'material-design' ) }
 			</h2>
 
-			<p>
+			<p className="body-large">
 				{ __(
 					'Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the ',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/learn-content.js b/plugin/assets/src/getting-started/components/content/learn-content.js
index a2c51f57b..29a747a21 100644
--- a/plugin/assets/src/getting-started/components/content/learn-content.js
+++ b/plugin/assets/src/getting-started/components/content/learn-content.js
@@ -24,7 +24,7 @@ import Button from '../../../wizard/components/navigation/button';
 export const LearnContent = ( { materialUrl, newsLetterUrl } ) => {
 	return (
 		<Fragment>
-			<p>
+			<p className="body-large">
 				{ __(
 					'Learn about the concepts behind material Design',
 					'material-design'
@@ -41,7 +41,7 @@ export const LearnContent = ( { materialUrl, newsLetterUrl } ) => {
 				/>
 			</div>
 
-			<p>
+			<p className="body-large">
 				{ __(
 					'Sign up to get updates and news about material design via email',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/learn.js b/plugin/assets/src/getting-started/components/content/learn.js
index de7128f84..2fd3c7c62 100644
--- a/plugin/assets/src/getting-started/components/content/learn.js
+++ b/plugin/assets/src/getting-started/components/content/learn.js
@@ -26,7 +26,7 @@ export const Learn = () => {
 	return (
 		<Fragment>
 			<div className="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9">
-				<h2 className="material-gsm__content-title mdc-typography--headline2">
+				<h2 className="material-gsm__content-title headline-large">
 					{ __(
 						'Learn More about Material Design',
 						'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/overview.js b/plugin/assets/src/getting-started/components/content/overview.js
index 074a9aa03..1aa3e7493 100644
--- a/plugin/assets/src/getting-started/components/content/overview.js
+++ b/plugin/assets/src/getting-started/components/content/overview.js
@@ -29,11 +29,11 @@ import getConfig from '../../get-config';
 export const Overview = () => {
 	return (
 		<Fragment>
-			<h2 className="material-gsm__content-title mdc-typography--headline3">
+			<h2 className="material-gsm__content-title headline-medium">
 				{ __( 'Build with Material Blocks', 'material-design' ) }
 			</h2>
 
-			<p>
+			<p className="body-large">
 				{ __(
 					'Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/content/updates.js b/plugin/assets/src/getting-started/components/content/updates.js
index b34a23e8a..d35346fca 100644
--- a/plugin/assets/src/getting-started/components/content/updates.js
+++ b/plugin/assets/src/getting-started/components/content/updates.js
@@ -76,7 +76,7 @@ export const Updates = () => {
 
 	return (
 		<div className="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9">
-			<h2 className="material-gsm__content-title mdc-typography--headline3">
+			<h2 className="material-gsm__content-title headline-medium">
 				{ __( 'Font and Icons Updates', 'material-design' ) }
 			</h2>
 
diff --git a/plugin/assets/src/getting-started/components/content/wizard.js b/plugin/assets/src/getting-started/components/content/wizard.js
index eae285cd2..faaca68e3 100644
--- a/plugin/assets/src/getting-started/components/content/wizard.js
+++ b/plugin/assets/src/getting-started/components/content/wizard.js
@@ -28,7 +28,7 @@ import getConfig from '../../get-config';
 export const Wizard = props => {
 	return (
 		<>
-			<h2 className="material-gsm__content-title mdc-typography--headline3">
+			<h2 className="material-gsm__content-title headline-small">
 				{ __(
 					'Install the Material Design Theme and quick start examples',
 					'material-design'
diff --git a/plugin/assets/src/getting-started/components/index.js b/plugin/assets/src/getting-started/components/index.js
index 4f62060ab..d2032a857 100644
--- a/plugin/assets/src/getting-started/components/index.js
+++ b/plugin/assets/src/getting-started/components/index.js
@@ -24,7 +24,7 @@ import Content from './content';
 const GettingStarted = () => {
 	return (
 		<TabProvider>
-			<div className="mdc-layout-grid mdc-typography">
+			<div className="mdc-layout-grid">
 				<div className="mdc-layout-grid__inner">
 					<Navigation />
 					<Content />
diff --git a/plugin/assets/src/getting-started/components/navigation/index.js b/plugin/assets/src/getting-started/components/navigation/index.js
index 41bc23ec9..ea8882546 100644
--- a/plugin/assets/src/getting-started/components/navigation/index.js
+++ b/plugin/assets/src/getting-started/components/navigation/index.js
@@ -72,7 +72,7 @@ const Navigation = () => {
 	return (
 		<div className="material-gsm__navigation mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
 			<div className="material-gsm__heading">
-				<div className="mdc-typography--headline6">
+				<div className="title-large">
 					{ __( 'Getting Started', 'material-design' ) }
 				</div>
 			</div>
diff --git a/plugin/assets/src/settings/components/index.js b/plugin/assets/src/settings/components/index.js
index c03f79267..20bf73ae2 100644
--- a/plugin/assets/src/settings/components/index.js
+++ b/plugin/assets/src/settings/components/index.js
@@ -29,7 +29,7 @@ import Integrations from './integrations';
 const Settings = () => {
 	return (
 		<SettingsProvider>
-			<h1 className="mdc-typography--headline3">
+			<h1 className="headline-medium">
 				{ __( 'Material Settings', 'material-design' ) }
 			</h1>
 
diff --git a/plugin/assets/src/settings/components/integrations/index.js b/plugin/assets/src/settings/components/integrations/index.js
index 78daf3fbb..cc2e1ff57 100644
--- a/plugin/assets/src/settings/components/integrations/index.js
+++ b/plugin/assets/src/settings/components/integrations/index.js
@@ -38,12 +38,12 @@ const Integrations = () => {
 
 	return (
 		<div className="material-settings__integrations">
-			<h2 className="mdc-typography--headline6">
+			<h2 className="title-large">
 				{ __( 'Integrations', 'material-design' ) }
 			</h2>
 
 			<p
-				className="mdc-typography--body1"
+				className="body-large"
 				dangerouslySetInnerHTML={ {
 					__html: sprintf(
 						// translators: %1$s: google font anchor tag, %2$s material icon resources link.
@@ -63,7 +63,7 @@ const Integrations = () => {
 				} }
 			></p>
 
-			<p className="mdc-typography--body1">
+			<p className="body-large">
 				{ __(
 					'Turn on auto-updater or update your resources manually.',
 					'material-design'
@@ -90,12 +90,12 @@ const Integrations = () => {
 				) ) }
 			</div>
 
-			<h2 className="mdc-typography--headline6">
+			<h2 className="title-large">
 				{ __( 'Google API Key', 'material-design' ) }
 			</h2>
 
 			<p
-				className="mdc-typography--body1"
+				className="body-large"
 				dangerouslySetInnerHTML={ {
 					__html: sprintf(
 						// translators: %s google api key anchor tag.
diff --git a/plugin/assets/src/settings/components/integrations/updater.js b/plugin/assets/src/settings/components/integrations/updater.js
index 744dfafe7..c44cbb5b1 100644
--- a/plugin/assets/src/settings/components/integrations/updater.js
+++ b/plugin/assets/src/settings/components/integrations/updater.js
@@ -116,11 +116,11 @@ const Updater = ( {
 			<div className="mdc-layout-grid">
 				<div className="mdc-layout-grid__inner">
 					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle">
-						<h3 className="mdc-typography--headline6">{ title }</h3>
+						<h3 className="title-large">{ title }</h3>
 
 						{ isDisabled && (
 							<p
-								className="mdc-typography--body1"
+								className="body-large"
 								dangerouslySetInnerHTML={ {
 									__html: sprintf(
 										// translators: %s: google api link with message.
@@ -138,7 +138,7 @@ const Updater = ( {
 						) }
 
 						{ ! isDisabled && false !== displayUpdatedOn && (
-							<p className="mdc-typography--body1">
+							<p className="body-large">
 								{ sprintf(
 									// translators: %s: last updated date.
 									__(
@@ -151,7 +151,7 @@ const Updater = ( {
 						) }
 
 						{ versionAvailable && (
-							<p className="mdc-typography--body1">
+							<p className="body-large">
 								{ sprintf(
 									// translators: %s: version number.
 									__(
diff --git a/plugin/assets/src/wizard/components/content/addons.js b/plugin/assets/src/wizard/components/content/addons.js
index 820716382..b37e4ac4c 100644
--- a/plugin/assets/src/wizard/components/content/addons.js
+++ b/plugin/assets/src/wizard/components/content/addons.js
@@ -32,7 +32,7 @@ import getConfig from '../../../admin/get-config';
 const Addons = () => {
 	return (
 		<div className="mdc-layout-grid__cell--span-12">
-			<h3 className="mdc-typography--headline3 material-wizard__title">
+			<h3 className="headline-medium material-wizard__title">
 				{ __( 'Install addons', 'material-design' ) }
 			</h3>
 
@@ -43,7 +43,7 @@ const Addons = () => {
 				switch={ ADDONS.THEME }
 				disabled={ 'ok' === getConfig( 'themeStatus' ) }
 			>
-				<h4 className="mdc-typography--headline4">
+				<h4 className="headline-small">
 					{ __( 'Material Design Theme', 'material-design' ) }
 				</h4>
 
@@ -63,7 +63,7 @@ const Addons = () => {
 				) }addon-quick-start-examples.png` }
 				switch={ ADDONS.DEMO }
 			>
-				<h4 className="mdc-typography--headline4">
+				<h4 className="headline-small">
 					{ __( 'Quick Start Examples', 'material-design' ) }
 				</h4>
 
diff --git a/plugin/assets/src/wizard/components/content/welcome.js b/plugin/assets/src/wizard/components/content/welcome.js
index b290b2e6f..06bc87103 100644
--- a/plugin/assets/src/wizard/components/content/welcome.js
+++ b/plugin/assets/src/wizard/components/content/welcome.js
@@ -35,7 +35,7 @@ const Welcome = () => {
 				image={ `${ getConfig( 'assetsPath' ) }welcome.png` }
 				imageSpan="5"
 			>
-				<h3 className="mdc-typography--headline3">
+				<h3 className="headline-medium">
 					{ __( 'Start building', 'material-design' ) }
 				</h3>
 
diff --git a/plugin/assets/src/wizard/components/content/work.js b/plugin/assets/src/wizard/components/content/work.js
index 9b5733d6f..1349a5bf1 100644
--- a/plugin/assets/src/wizard/components/content/work.js
+++ b/plugin/assets/src/wizard/components/content/work.js
@@ -38,7 +38,7 @@ const Work = () => {
 				) }complete-build-with-blocks.png` }
 				imageSpan="5"
 			>
-				<h3 className="mdc-typography--headline3">
+				<h3 className="headline-medium">
 					{ __( 'Congrats!', 'material-design' ) }
 				</h3>
 
diff --git a/plugin/assets/src/wizard/components/header/index.js b/plugin/assets/src/wizard/components/header/index.js
index f4e52aa2f..0e66e312b 100644
--- a/plugin/assets/src/wizard/components/header/index.js
+++ b/plugin/assets/src/wizard/components/header/index.js
@@ -34,7 +34,7 @@ const Header = () => {
 				{ <Logo /> }
 			</div>
 			<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-11 mdc-layout-grid__cell--align-middle">
-				<h2 className="mdc-typography--headline5">
+				<h2 className="title-large">
 					{ __( 'Material Design for WordPress', 'material-design' ) }
 				</h2>
 			</div>
diff --git a/plugin/php/class-admin.php b/plugin/php/class-admin.php
index 7f80b36cc..1c8459959 100644
--- a/plugin/php/class-admin.php
+++ b/plugin/php/class-admin.php
@@ -139,7 +139,7 @@ public function render_onboarding_wizard_page() {
 	 */
 	public function render_settings_page() {
 		?>
-		<div id="material-settings" class="material-settings mdc-layout-grid mdc-typography"></div>
+		<div id="material-settings" class="material-settings mdc-layout-grid"></div>
 		<?php
 	}
 
diff --git a/plugin/php/class-migration.php b/plugin/php/class-migration.php
new file mode 100644
index 000000000..1b5ab447f
--- /dev/null
+++ b/plugin/php/class-migration.php
@@ -0,0 +1,99 @@
+<?php
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @package MaterialDesign
+ */
+
+/**
+ * Bootstraps migration scripts.
+ *
+ * @package MaterialDesign
+ */
+
+namespace MaterialDesign\Plugin;
+
+/**
+ * Migration class.
+ */
+class Migration extends Module_Base {
+
+	const MIGRATION_KEY = 'material_m2_to_m3_migration';
+
+	/**
+	 * Initiate the class and hooks.
+	 */
+	public function init() {
+		add_action( 'admin_init', [ $this, 'migrate_m2_typography_settings_to_m3' ], 10, 2 );
+	}
+
+	/**
+	 * Migrate m2 typography settings to m3.
+	 *
+	 * @return void
+	 */
+	public function migrate_m2_typography_settings_to_m3() {
+		$migration_option = get_option( self::MIGRATION_KEY, [] );
+
+		if ( ! empty( $migration_option['typography'] ) ) {
+			return;
+		}
+
+		$map = [
+			'headline_1'       => 'display_small',
+			'headline_2'       => 'headline_large',
+			'headline_3'       => 'headline_medium',
+			'headline_4'       => 'headline_small',
+			'headline_5'       => 'title_large',
+			'headline_6'       => 'title_large',
+			'subhead_1'        => 'title_medium',
+			'subhead_2'        => 'title_small',
+			'body_1'           => 'body_large',
+			'body_2'           => 'body_medium',
+			'caption'          => 'body_small',
+			'button'           => 'label_large',
+			'overline'         => 'label_medium',
+			'subtitle_1'       => 'label_large',
+			'subtitle_2'       => 'label_medium',
+			'head_font_family' => [ 'display_font_family', 'headline_font_family' ],
+		];
+
+		$slug = $this->plugin->customizer_controls->slug;
+
+		$option = get_option( $slug, [] );
+
+		foreach ( $map as $m2_key => $m3_key ) {
+			if ( is_array( $m3_key ) ) {
+				foreach ( $m3_key as $sub_m3_key ) {
+					if ( isset( $option[ $m2_key ] ) ) {
+						$option[ $sub_m3_key ] = $option[ $m2_key ];
+					}
+				}
+				unset( $option[ $m2_key ] );
+			} else {
+				if ( isset( $option[ $m2_key ] ) ) {
+					$option[ $m3_key ] = $option[ $m2_key ];
+					unset( $option[ $m2_key ] );
+				}
+			}
+		}
+
+		update_option( $slug, $option );
+
+		$migration_option['typography'] = true;
+		update_option( self::MIGRATION_KEY, $migration_option );
+	}
+
+}
diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php
index 5317917f2..745d5b584 100644
--- a/plugin/php/class-plugin.php
+++ b/plugin/php/class-plugin.php
@@ -145,6 +145,13 @@ class Plugin extends Plugin_Base {
 	 */
 	public $frontend;
 
+	/**
+	 * Migration class.
+	 *
+	 * @var Migration
+	 */
+	public $migration;
+
 	/**
 	 * Initiate the plugin resources.
 	 *
@@ -189,6 +196,9 @@ public function init() {
 		$this->frontend = new Frontend( $this );
 		$this->frontend->init();
 
+		$this->migration = new Migration( $this );
+		$this->migration->init();
+
 		// Init CLI.
 		if ( defined( 'WP_CLI' ) && false !== WP_CLI ) {
 			$this->fonts = new Fonts();
diff --git a/plugin/php/customizer/class-controls.php b/plugin/php/customizer/class-controls.php
index 684e2d2aa..9a42fe7ad 100644
--- a/plugin/php/customizer/class-controls.php
+++ b/plugin/php/customizer/class-controls.php
@@ -87,7 +87,7 @@ public function init() {
 	/**
 	 * Register customizer options.
 	 *
-	 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+	 * @param \WP_Customize_Manager $wp_customize Theme Customizer object.
 	 */
 	public function register( $wp_customize ) {
 		$this->wp_customize = $wp_customize;
@@ -393,11 +393,13 @@ public function add_typography_controls() {
 		/**
 		 * Generate list of all the settings in the Typography section.
 		 */
-		$settings     = [];
+		$settings            = [];
+		$typography_controls = $this->get_typography_controls();
+		$extra_controls      = call_user_func_array( 'array_merge', wp_list_pluck( $typography_controls, 'choices' ) );
+
 		$all_controls = array_merge(
-			$this->get_typography_controls(),
-			$this->get_typography_extra_controls(),
-			$this->get_typography_extra_controls( false )
+			$typography_controls,
+			$extra_controls
 		);
 
 		foreach ( $all_controls as $control ) {
@@ -411,7 +413,7 @@ public function add_typography_controls() {
 		 */
 		$controls = [];
 
-		foreach ( $all_controls as $control ) {
+		foreach ( $typography_controls as $control ) {
 			$controls[ $control['id'] ] = new Google_Fonts_Control(
 				$this->wp_customize,
 				$this->prepare_option_name( $control['id'] ),
@@ -423,6 +425,20 @@ public function add_typography_controls() {
 					'choices'  => ( ! empty( $control['choices'] ) ) ? $control['choices'] : [],
 				]
 			);
+
+			foreach ( $control['choices'] as $choice ) {
+				$controls[ $choice['id'] ] = new Google_Fonts_Control(
+					$this->wp_customize,
+					$this->prepare_option_name( $choice['id'] ),
+					[
+						'section'  => 'typography',
+						'priority' => 10,
+						'label'    => $choice['label'],
+						'css_vars' => $choice['css_vars'],
+						'choices'  => ( ! empty( $choice['choices'] ) ) ? $choice['choices'] : [],
+					]
+				);
+			}
 		}
 
 		$this->add_controls( $controls );
@@ -756,54 +772,55 @@ function ( $image ) {
 	 * @return string
 	 */
 	public function get_google_fonts_url( $context = '' ) {
-		$icons_style   = $this->get_icon_style( '+' );
-		$font_families = [ 'Material+Icons' . $icons_style ];
-		$fonts         = [];
+		$icons_style  = $this->get_icon_style( '+' );
+		$merged_fonts = [ 'Material+Icons' . $icons_style ];
+		$fonts        = [];
 
 		if ( 'block-editor' === $context ) {
-			$font_families[] = 'Material+Icons+Outlined';
+			$merged_fonts[] = 'Material+Icons+Outlined';
 		}
 
 		// Get the font families used.
 		foreach ( $this->get_typography_controls() as $control ) {
-			$type           = 'head_font_family' === $control['id'] ? 'head' : 'body';
-			$fonts[ $type ] = [
+			$fonts[ $control['id'] ] = [
 				'family'   => $this->get_option( $control['id'] ),
 				'variants' => [],
 			];
 		}
 
-		// Get the extra font controls.
-		$typography_extra_controls = array_merge(
-			$this->get_typography_extra_controls(),
-			$this->get_typography_extra_controls( false )
-		);
-
 		// Get the variant/weight used for each font control.
-		foreach ( $typography_extra_controls as $control ) {
-			$value  = json_decode( $this->get_option( $control['id'] ), true );
-			$weight = 'regular';
+		foreach ( $this->get_typography_controls() as $c ) {
+			$variants = [];
+			foreach ( $c['choices'] as $control ) {
+				$value = json_decode( $this->get_option( $control['id'] ), true );
+
+				if ( ! empty( $value ) && ! empty( $value['weight'] ) ) {
+					$weight = $value['weight'];
+				} else {
+					$weight = $control['weight']['default'];
+				}
 
-			if ( ! empty( $value ) && ! empty( $value['weight'] ) ) {
-				$weight = $value['weight'];
-			} else {
-				$weight = $control['weight']['default'];
-			}
+				$variants[] = $weight;
 
-			if ( false !== strpos( $control['id'], 'headline_' ) ) {
-				$fonts['head']['variants'][] = $weight;
-			} else {
-				$fonts['body']['variants'][] = $weight;
 			}
+			$fonts[ $c['id'] ]['variants'] = $variants;
 		}
 
+		// Use font family with key to make it unique and merge it's variants.
+		$font_families = [];
 		foreach ( $fonts as $font ) {
-			$variants        = str_replace( 'regular', '400', implode( ',', array_unique( $font['variants'] ) ) );
-			$font_families[] = str_replace( ' ', '+', $font['family'] ) . ':' . $variants;
+			$variants                      = str_replace( 'regular', '400', implode( ',', array_unique( $font['variants'] ) ) );
+			$font_family                   = str_replace( ' ', '+', $font['family'] );
+			$font_families[ $font_family ] = array_merge( isset( $font_families[ $font_family ] ) ? $font_families[ $font_family ] : [], explode( ',', $variants ) );
+		}
+
+		// Merge variants and make it unique.
+		foreach ( $font_families as $family => $variants ) {
+			$merged_fonts[] = $family . ':' . implode( ',', array_unique( $variants ) );
 		}
 
 		$fonts_url =
-			add_query_arg( 'family', implode( '|', array_unique( $font_families ) ), '//fonts.googleapis.com/css' );
+			add_query_arg( 'family', implode( '|', $merged_fonts ), '//fonts.googleapis.com/css' );
 
 		/**
 		 * Filter Google Fonts URL.
@@ -891,7 +908,8 @@ public function get_frontend_css() {
 			$color_vars[] = esc_html( "--mdc-theme-surface-mix-12: $mix_12;" );
 		}
 
-		foreach ( $this->get_typography_controls() as $control ) {
+		$typography_controls = $this->get_typography_controls();
+		foreach ( $typography_controls as $control ) {
 			$value = $this->get_option( $control['id'] );
 
 			$fallback = 'sans-serif';
@@ -913,10 +931,10 @@ public function get_frontend_css() {
 			}
 		}
 
-		$typography_extra_controls = array_merge(
-			$this->get_typography_extra_controls(),
-			$this->get_typography_extra_controls( false )
-		);
+		$typography_extra_controls = wp_list_pluck( $typography_controls, 'choices' );
+
+		// Merge all controls.
+		$typography_extra_controls = call_user_func_array( 'array_merge', $typography_extra_controls );
 
 		foreach ( $typography_extra_controls as $control ) {
 			$value = json_decode( $this->get_option( $control['id'] ), true );
@@ -935,7 +953,7 @@ public function get_frontend_css() {
 							esc_html( $var ),
 							esc_html( $value[ $type ] )
 						);
-					} else {
+					} elseif ( 'weight' === $type ) {
 						$font_vars[] = sprintf(
 							'%s: %s !important;',
 							esc_html( $var ),
@@ -951,6 +969,20 @@ public function get_frontend_css() {
 							esc_html( $control['css_vars']['style'] ),
 							esc_html( $font_style )
 						);
+					} elseif ( 'tracking' === $type ) {
+						$font_size   = isset( $value['size'] ) ? $value['size'] : 16;
+						$line_height = $value[ $type ] / $font_size;
+						$font_vars[] = sprintf(
+							'%s: %srem !important;',
+							esc_html( $var ),
+							esc_html( $line_height )
+						);
+					} else {
+						$font_vars[] = sprintf(
+							'%s: %s !important;',
+							esc_html( $var ),
+							esc_html( $value[ $type ] )
+						);
 					}
 				}
 			}
@@ -1095,7 +1127,10 @@ public function get_design_styles() {
 				'on_background_color_dark'     => '#ffffff',
 				'footer_color'                 => '#ffffff',
 				'on_footer_color'              => '#000000',
-				'head_font_family'             => 'Roboto',
+				'display_font_family'          => 'Roboto',
+				'headline_font_family'         => 'Roboto',
+				'title_font_family'            => 'Roboto',
+				'label_font_family'            => 'Roboto',
 				'body_font_family'             => 'Roboto',
 				'global_radius'                => '4',
 				'button_radius'                => '4',
@@ -1130,7 +1165,10 @@ public function get_design_styles() {
 				'on_background_color'         => '#000000',
 				'footer_color'                => '#ffffff',
 				'on_footer_color'             => '#000000',
-				'head_font_family'            => 'Raleway',
+				'display_font_family'         => 'Raleway',
+				'headline_font_family'        => 'Raleway',
+				'title_font_family'           => 'Raleway',
+				'label_font_family'           => 'Raleway',
 				'body_font_family'            => 'Raleway',
 				'global_radius'               => '16',
 				'button_radius'               => '16',
@@ -1165,7 +1203,10 @@ public function get_design_styles() {
 				'on_background_color'         => '#000000',
 				'footer_color'                => '#ffffff',
 				'on_footer_color'             => '#000000',
-				'head_font_family'            => 'Merriweather',
+				'display_font_family'         => 'Merriweather',
+				'headline_font_family'        => 'Merriweather',
+				'title_font_family'           => 'Merriweather',
+				'label_font_family'           => 'Merriweather',
 				'body_font_family'            => 'Merriweather',
 				'global_radius'               => '0',
 				'button_radius'               => '0',
@@ -1200,7 +1241,10 @@ public function get_design_styles() {
 				'on_background_color'         => '#442c2e',
 				'footer_color'                => '#fff1ee',
 				'on_footer_color'             => '#442c2e',
-				'head_font_family'            => 'Rubik',
+				'display_font_family'         => 'Rubik',
+				'headline_font_family'        => 'Rubik',
+				'title_font_family'           => 'Rubik',
+				'label_font_family'           => 'Rubik',
 				'body_font_family'            => 'Rubik',
 				'global_radius'               => '8',
 				'button_radius'               => '8',
@@ -1308,40 +1352,31 @@ public function get_color_controls_variant( $variant ) {
 	 * @return array
 	 */
 	public function get_typography_controls() {
-		return [
-			[
-				'id'       => 'head_font_family',
-				'label'    => __( 'Headlines & Subtitles', 'material-design' ),
-				'css_vars' => [
-					'family' => [
-						'--mdc-typography-headline1-font-family',
-						'--mdc-typography-headline2-font-family',
-						'--mdc-typography-headline3-font-family',
-						'--mdc-typography-headline4-font-family',
-						'--mdc-typography-headline5-font-family',
-						'--mdc-typography-headline6-font-family',
-						'--mdc-typography-subtitle1-font-family',
-						'--mdc-typography-subtitle2-font-family',
-					],
-				],
-				'choices'  => $this->get_typography_extra_controls(),
-			],
-			[
-				'id'       => 'body_font_family',
-				'label'    => __( 'Body & Captions', 'material-design' ),
+		$default_fonts = [
+			'display'  => 'Roboto',
+			'headline' => 'Roboto',
+			'title'    => 'Roboto Medium',
+			'label'    => 'Roboto Medium',
+			'body'     => 'Roboto Medium',
+		];
+
+		$controls = [];
+		foreach ( $default_fonts as $base_key => $default_font ) {
+			$controls[] = [
+				'id'       => sprintf( '%s_font_family', $base_key ),
+				'label'    => ucfirst( $base_key ),
 				'css_vars' => [
 					'family' => [
-						'--mdc-typography-font-family',
-						'--mdc-typography-body1-font-family',
-						'--mdc-typography-body2-font-family',
-						'--mdc-typography-caption-font-family',
-						'--mdc-typography-button-font-family',
-						'--mdc-typography-overline-font-family',
+						sprintf( '--md-sys-typescale-%s-large-font', $base_key ),
+						sprintf( '--md-sys-typescale-%s-medium-font', $base_key ),
+						sprintf( '--md-sys-typescale-%s-small-font', $base_key ),
 					],
 				],
-				'choices'  => $this->get_typography_extra_controls( false ),
-			],
-		];
+				'choices'  => $this->get_typography_extra_controls( $base_key ),
+			];
+		}
+
+		return $controls;
 	}
 
 	/**
@@ -1640,143 +1675,212 @@ public function get_typography_size_controls( $args ) {
 		return $args;
 	}
 
+	/**
+	 * Get tracking controls.
+	 *
+	 * @param mixed $args Customized values.
+	 *
+	 * @return array Values to use in control.
+	 */
+	public function get_tracking_controls( $args ) {
+		$args = wp_parse_args(
+			$args,
+			[
+				'label'   => __( 'Tracking (Letter spacing)', 'material-design' ),
+				'type'    => 'number',
+				'min'     => -5,
+				'default' => 0,
+				'max'     => 100,
+			]
+		);
+
+		return $args;
+	}
+
+	/**
+	 * Get tracking controls.
+	 *
+	 * @param mixed $args Customized values.
+	 *
+	 * @return array Values to use in control.
+	 */
+	public function get_line_height_controls( $args ) {
+		$args = wp_parse_args(
+			$args,
+			[
+				'label'   => __( 'Line height', 'material-design' ),
+				'type'    => 'number',
+				'min'     => 0,
+				'default' => 0,
+				'max'     => 64,
+			]
+		);
+
+		return $args;
+	}
+
 	/**
 	 * Build typography size and weight controls.
 	 *
-	 * @param bool $headlines Whether or not this are headlines.
+	 * @param string $token Token name like Display, Headline, Title etc..
 	 *
 	 * @return array Values for controllers.
 	 */
-	public function get_typography_extra_controls( $headlines = true ) {
+	public function get_typography_extra_controls( $token ) {
 		$controls = [];
 
-		if ( $headlines ) {
-			$default_sizes   = [ 96, 60, 48, 34, 24, 20 ];
-			$default_weights = [
-				'100',
-				'100',
-				'regular',
-				'regular',
-				'regular',
-				'500',
-			];
+		$default_fonts_size = [
+			'display'  => [
+				'large'  => 120,
+				'medium' => 110,
+				'small'  => 96,
+			],
+			'headline' => [
+				'large'  => 60,
+				'medium' => 48,
+				'small'  => 34,
+			],
+			'title'    => [
+				'large'  => 24,
+				'medium' => 20,
+				'small'  => 16,
+			],
+			'label'    => [
+				'large'  => 16,
+				'medium' => 14,
+				'small'  => 11,
+			],
+			'body'     => [
+				'large'  => 16,
+				'medium' => 14,
+				'small'  => 12,
+			],
+		];
 
-			for ( $i = 1; $i < 7; $i ++ ) {
-				$id         = sprintf( 'headline_%s', $i );
-				$controls[] = [
-					'id'       => $id,
-					'setting'  => $this->prepare_option_name( $id ),
-					'css_vars' => [
-						'size'   => sprintf( '--mdc-typography-headline%s-font-size', $i ),
-						'weight' => sprintf( '--mdc-typography-headline%s-font-weight', $i ),
-						'style'  => sprintf( '--mdc-typography-headline%s-font-style', $i ),
-					],
-					'value'    => $this->get_option( $id ),
-					'label'    => sprintf(
-					/* translators: Number of heading to display */
-						esc_html__( 'Headline %s', 'material-design' ),
-						$i
-					),
-					'size'     => $this->get_typography_size_controls(
-						[
-							'default' => intval( $default_sizes[ $i - 1 ] ),
-							'max'     => 96,
-						]
-					),
-					'weight'   => $this->get_typography_weight_controls(
-						[
-							'default' => $default_weights[ $i - 1 ],
-						]
-					),
-				];
-			}
+		$default_tracking = [
+			'display'  => [
+				'large'  => -1.5,
+				'medium' => -1.5,
+				'small'  => -1.5,
+			],
+			'headline' => [
+				'large' => -0.5,
+				'small' => 0.25,
+			],
+			'title'    => [
+				'medium' => 0.15,
+				'small'  => 0.1,
+			],
+			'label'    => [
+				'large'  => 0.15,
+				'medium' => 0.1,
+				'small'  => 0.1,
+			],
+			'body'     => [
+				'large'  => 0.25,
+				'medium' => 0.4,
+				'small'  => 0.4,
+			],
+		];
 
-			$default_sizes   = [ 16, 14 ];
-			$default_weights = [
-				'regular',
-				'500',
-			];
+		$default_weight = [
+			'display'  => [
+				'large'  => 300,
+				'medium' => 300,
+				'small'  => 300,
+			],
+			'headline' => [
+				'large'  => 300,
+				'medium' => 400,
+				'small'  => 400,
+			],
+			'title'    => [
+				'large'  => 400,
+				'medium' => 500,
+				'small'  => 500,
+			],
+			'label'    => [
+				'large'  => 400,
+				'medium' => 500,
+				'small'  => 500,
+			],
+			'body'     => [
+				'large'  => 400,
+				'medium' => 400,
+				'small'  => 400,
+			],
+		];
 
-			for ( $i = 1; $i < 3; $i ++ ) {
-				$id         = sprintf( 'subtitle_%s', $i );
-				$controls[] = [
-					'id'       => $id,
-					'setting'  => $this->prepare_option_name( $id ),
-					'css_vars' => [
-						'size'   => sprintf( '--mdc-typography-subtitle%s-font-size', $i ),
-						'weight' => sprintf( '--mdc-typography-subtitle%s-font-weight', $i ),
-						'style'  => sprintf( '--mdc-typography-subtitle%s-font-style', $i ),
-					],
-					'value'    => $this->get_option( $id ),
-					'label'    => sprintf(
-					/* translators: Number of heading to display */
-						esc_html__( 'Subtitle %s', 'material-design' ),
-						$i
-					),
-					'size'     => $this->get_typography_size_controls(
-						[
-							'default' => intval( $default_sizes[ $i - 1 ] ),
-						]
-					),
-					'weight'   => $this->get_typography_weight_controls(
-						[
-							'default' => $default_weights[ $i - 1 ],
-						]
-					),
-				];
-			}
-		} else {
-			$keys = [
-				'body1'    => [
-					'label'  => __( 'Body 1', 'material-design' ),
-					'size'   => 16,
-					'weight' => 'regular',
-				],
-				'body2'    => [
-					'label'  => __( 'Body 2', 'material-design' ),
-					'size'   => 14,
-					'weight' => 'regular',
-				],
-				'button'   => [
-					'label'  => __( 'Button', 'material-design' ),
-					'size'   => 14,
-					'weight' => '500',
-				],
-				'caption'  => [
-					'label'  => __( 'Caption', 'material-design' ),
-					'size'   => 12,
-					'weight' => 'regular',
-				],
-				'overline' => [
-					'label'  => __( 'Overline', 'material-design' ),
-					'size'   => 10,
-					'weight' => 'regular',
+		$default_line_height = [
+			'display'  => [
+				'large'  => 6,
+				'medium' => 6,
+				'small'  => 6,
+			],
+			'headline' => [
+				'large'  => 3.75,
+				'medium' => 3.125,
+				'small'  => 2.5,
+			],
+			'title'    => [
+				'large'  => 2,
+				'medium' => 2,
+				'small'  => 1.75,
+			],
+			'label'    => [
+				'large'  => 1.75,
+				'medium' => 1.375,
+				'small'  => 1.125,
+			],
+			'body'     => [
+				'large'  => 1.5,
+				'medium' => 1.25,
+				'small'  => 1.25,
+			],
+		];
+
+		$sub_tokens = [ 'large', 'medium', 'small' ];
+
+		foreach ( $sub_tokens as $sub_t ) {
+			$id         = sprintf( '%s_%s', $token, $sub_t );
+			$controls[] = [
+				'id'         => $id,
+				'setting'    => $this->prepare_option_name( $id ),
+				'css_vars'   => [
+					'lineHeight' => sprintf( '--md-sys-typescale-%s-%s-line-height', $token, $sub_t ),
+					'size'       => sprintf( '--md-sys-typescale-%s-%s-size', $token, $sub_t ),
+					'tracking'   => sprintf( '--md-sys-typescale-%s-%s-tracking', $token, $sub_t ),
+					'weight'     => sprintf( '--md-sys-typescale-%s-%s-weight', $token, $sub_t ),
 				],
+				'value'      => $this->get_option( $id ),
+				'label'      => sprintf(
+					/* translators: %1$s Token and %2$s Sub-token name. */
+					esc_html__( '%1$s %2$s', 'material-design' ),
+					ucfirst( $token ),
+					$sub_t
+				),
+				'size'       => $this->get_typography_size_controls(
+					[
+						'default' => $default_fonts_size[ $token ][ $sub_t ],
+						'max'     => 140,
+					]
+				),
+				'weight'     => $this->get_typography_weight_controls(
+					[
+						'default' => $default_weight[ $token ][ $sub_t ],
+					]
+				),
+				'lineHeight' => $this->get_line_height_controls(
+					[
+						'default' => $default_line_height[ $token ][ $sub_t ],
+					]
+				),
+				'tracking'   => $this->get_tracking_controls(
+					[
+						'default' => isset( $default_tracking[ $token ][ $sub_t ] ) ? $default_tracking[ $token ][ $sub_t ] : 0,
+					]
+				),
 			];
-
-			foreach ( $keys as $key => $settings ) {
-				$controls[] = [
-					'id'       => esc_html( $key ),
-					'setting'  => $this->prepare_option_name( $key ),
-					'label'    => esc_html( $settings['label'] ),
-					'css_vars' => [
-						'size'   => sprintf( '--mdc-typography-%s-font-size', $key ),
-						'weight' => sprintf( '--mdc-typography-%s-font-weight', $key ),
-						'style'  => sprintf( '--mdc-typography-%s-font-style', $key ),
-					],
-					'value'    => $this->get_option( $key ),
-					'size'     => $this->get_typography_size_controls(
-						[
-							'default' => intval( $settings['size'] ),
-						]
-					),
-					'weight'   => $this->get_typography_weight_controls(
-						[
-							'default' => $settings['weight'],
-						]
-					),
-				];
-			}
 		}
 
 		return $controls;
diff --git a/plugin/php/templates/partials/card-content.php b/plugin/php/templates/partials/card-content.php
index f01c49182..766994ee7 100644
--- a/plugin/php/templates/partials/card-content.php
+++ b/plugin/php/templates/partials/card-content.php
@@ -33,7 +33,7 @@
 $post_content   = wp_trim_words( get_the_excerpt(), $content_length, ' [&hellip;]' );
 
 if ( ! empty( $show_content ) && ! empty( $post_content ) ) : ?>
-	<div class="single-post-card__secondary mdc-typography mdc-typography--body2 <?php echo esc_attr( $class_name ); ?>">
+	<div class="single-post-card__secondary body-medium <?php echo esc_attr( $class_name ); ?>">
 		<p>
 			<?php echo wp_kses_post( $post_content ); ?>
 		</p>
diff --git a/plugin/php/templates/partials/card-header.php b/plugin/php/templates/partials/card-header.php
index 670c54682..604c76845 100644
--- a/plugin/php/templates/partials/card-header.php
+++ b/plugin/php/templates/partials/card-header.php
@@ -30,12 +30,12 @@
 ?>
 
 <div class="single-post-card__primary">
-	<h2 class="single-post-card__title mdc-typography mdc-typography--headline6">
+	<h2 class="single-post-card__title title-large">
 		<div><?php echo esc_html( get_the_title() ); ?></div>
 	</h2>
 
 	<?php if ( ! empty( $post_date ) ) : ?>
-		<h3 class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2">
+		<h3 class="single-post-card__subtitle label-medium">
 			<time>
 			<?php echo esc_html( get_the_date() ); ?>
 			</time>
diff --git a/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html b/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html
index 550194ea7..0d6d2db33 100644
--- a/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html
+++ b/plugin/tests/e2e/specs/block-editor/blocks/render/blocks.html
@@ -52,6 +52,7 @@
 		<button class="material-icons mdc-icon-button">
 			<div class="mdc-button__ripple"></div>
 
+
 			adb
 		</button>
 	</div>
@@ -63,21 +64,19 @@
 	<div class="mdc-card mdc-card--global-override material-design-card">
 		<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0">
 			<div tabindex="0"
-					 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
-				<img
-					src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1536421629999-fc4bfa98a8bc-8.jpeg"
-					alt="Card Title" /></div>
-			<div class="material-design-card__primary"><h2
-				class="material-design-card__title mdc-typography mdc-typography--headline6">Card Title</h2>
-				<h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Card Secondary</h3>
-			</div>
-			<div
-				class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">
+				 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
+				<img src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1536421629999-fc4bfa98a8bc-8.jpeg"
+					 alt="Card Title"/></div>
+			<div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Card
+				Title</h2>
+				<h3 class="material-design-card__secondary-text label-medium">Card Secondary</h3></div>
+			<div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium">
 				Card Supporting
 			</div>
 		</div>
 		<div class="mdc-card__actions">
-			<div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button">
+			<div class="mdc-card__action-buttons"><a href="#"
+													 class="mdc-button mdc-card__action mdc-card__action--button">
 				<div class="mdc-button__ripple"></div>
 				<span class="mdc-button__label">ACTION</span></a></div>
 		</div>
@@ -85,29 +84,30 @@ <h3 class="material-design-card__secondary-text mdc-typography mdc-typography--s
 </div>
 <!-- /wp:material/card -->
 
-<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false}]} -->
+<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"test","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false,"title":"test","supportingText":"test"},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"test","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":false,"secondaryText":"test","title":"test","supportingText":"test"}]} -->
 <div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1">
 	<div class="masonry-grid layout-masonry">
 		<div style="width:50%" class="masonry-grid_column">
 			<div class="card-container">
 				<div class="mdc-card material-design-card">
-					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0">
+					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded"
+						 tabindex="0">
 						<div tabindex="0"
-								 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
-							<img
-								src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg"
-								alt="" /></div>
-						<div class="material-design-card__primary"><h2
-							class="material-design-card__title mdc-typography mdc-typography--headline6"></h2>
-							<h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"></h3></div>
-						<div
-							class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"></div>
+							 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
+							<img src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1565315268183-4134b0eef6e2-5.jpeg"
+								 alt="test"/></div>
+						<div class="material-design-card__primary"><h2 class="material-design-card__title title-large">
+							test</h2>
+							<h3 class="material-design-card__secondary-text label-medium"></h3></div>
+						<div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium">
+							test
+						</div>
 					</div>
 					<div class="mdc-card__actions">
 						<div class="mdc-card__action-buttons"><a href="#"
-																										 class="mdc-button mdc-card__action mdc-card__action--button">
+																 class="mdc-button mdc-card__action mdc-card__action--button">
 							<div class="mdc-button__ripple"></div>
-							<span class="mdc-button__label"></span></a></div>
+							<span class="mdc-button__label">test</span></a></div>
 					</div>
 				</div>
 			</div>
@@ -115,23 +115,24 @@ <h3 class="material-design-card__secondary-text mdc-typography mdc-typography--s
 		<div style="width:50%" class="masonry-grid_column">
 			<div class="card-container">
 				<div class="mdc-card material-design-card">
-					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0">
+					<div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded"
+						 tabindex="0">
 						<div tabindex="0"
-								 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
-							<img
-								src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg"
-								alt="" /></div>
-						<div class="material-design-card__primary"><h2
-							class="material-design-card__title mdc-typography mdc-typography--headline6"></h2>
-							<h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"></h3></div>
-						<div
-							class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"></div>
+							 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media">
+							<img src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558906217-200fade11db0-5.jpeg"
+								 alt="test"/></div>
+						<div class="material-design-card__primary"><h2 class="material-design-card__title title-large">
+							test</h2>
+							<h3 class="material-design-card__secondary-text label-medium">test</h3></div>
+						<div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium">
+							test
+						</div>
 					</div>
 					<div class="mdc-card__actions">
 						<div class="mdc-card__action-buttons"><a href="#"
-																										 class="mdc-button mdc-card__action mdc-card__action--button">
+																 class="mdc-button mdc-card__action mdc-card__action--button">
 							<div class="mdc-button__ripple"></div>
-							<span class="mdc-button__label"></span></a></div>
+							<span class="mdc-button__label">test</span></a></div>
 					</div>
 				</div>
 			</div>
@@ -144,17 +145,17 @@ <h3 class="material-design-card__secondary-text mdc-typography mdc-typography--s
 <div class="wp-block-material-list">
 	<ul class="mdc-list">
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">accessibility</span><span
-			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 1</span></span></li>
+				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 1</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">account_balance_wallet</span><span
-			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 2</span></span></li>
+				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 2</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">account_tree</span><span
-			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 3</span></span></li>
+				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 3</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">6_ft_apart</span><span
-			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 4</span></span></li>
+				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 4</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">5g</span><span
-			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 5</span></span></li>
+				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 5</span></span></li>
 		<li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">account_balance_wallet</span><span
-			class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 6</span></span></li>
+				class="mdc-list-item__text"><span class="mdc-list-item__primary-text">List Item 6</span></span></li>
 	</ul>
 </div>
 <!-- /wp:material/list -->
@@ -213,20 +214,21 @@ <h3 class="material-design-card__secondary-text mdc-typography mdc-typography--s
 <div class="wp-block-material-image-list" id="block-material-image-list-3">
 	<ul class="mdc-image-list mdc-image-list--masonry mdc-image-list--with-text-protection">
 		<li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap"
-																				href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"><img
-			class="mdc-image-list__image" alt=""
-			src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"
-			data-id="6907" data-link="http://localhost:8088/material-demo-photo-1558905586-b023029262f1/" /></a></li>
+											href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"><img
+				class="mdc-image-list__image" alt=""
+				src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905586-b023029262f1-5-683x1024.jpeg"
+				data-id="6907" data-link="http://localhost:8088/material-demo-photo-1558905586-b023029262f1/"/></a></li>
 		<li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap"
-																				href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"><img
-			class="mdc-image-list__image" alt=""
-			src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"
-			data-id="6906" data-link="http://localhost:8088/material-demo-photo-1558905585-24d5d344c91d/" /></a></li>
+											href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"><img
+				class="mdc-image-list__image" alt=""
+				src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1558905585-24d5d344c91d-5-1024x683.jpeg"
+				data-id="6906" data-link="http://localhost:8088/material-demo-photo-1558905585-24d5d344c91d/"/></a></li>
 		<li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap"
-																				href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"><img
-			class="mdc-image-list__image" alt=""
-			src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"
-			data-id="6904" data-link="http://localhost:8088/material-demo-photo-1531306760863-7fb02a41db12/" /></a></li>
+											href="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"><img
+				class="mdc-image-list__image" alt=""
+				src="http://localhost:8088/wp-content/uploads/2020/10/material-demo-photo-1531306760863-7fb02a41db12-5-1024x683.jpeg"
+				data-id="6904" data-link="http://localhost:8088/material-demo-photo-1531306760863-7fb02a41db12/"/></a>
+		</li>
 	</ul>
 </div>
 <!-- /wp:material/image-list -->
@@ -239,53 +241,58 @@ <h3 class="material-design-card__secondary-text mdc-typography mdc-typography--s
 <div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-7"} -->
 	<div class="mdc-text-field-container">
 		<div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input
-			id="material-design-name-7" name="material-design-name-7" type="text" required class="mdc-text-field__input"
-			aria-labelledby="label-material-design-name-7" data-form="contact" data-meta="name" data-label="Name" />
+				id="material-design-name-7" name="material-design-name-7" type="text" required
+				class="mdc-text-field__input" aria-labelledby="label-material-design-name-7" data-form="contact"
+				data-meta="name" data-label="Name"/>
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-name-7" class="mdc-floating-label" id="label-material-design-name-7">Name</label>
-		</div>
+			<label for="material-design-name-7" class="mdc-floating-label"
+				   id="label-material-design-name-7">Name</label></div>
 	</div>
 	<!-- /wp:material/name-input-field -->
 
 	<!-- wp:material/email-input-field {"id":"material-design-email-9"} -->
 	<div class="mdc-text-field-container">
 		<div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input
-			id="material-design-email-9" name="material-design-email-9" type="email" required class="mdc-text-field__input"
-			aria-labelledby="label-material-design-email-9" data-form="contact" data-meta="email" data-label="Email" />
+				id="material-design-email-9" name="material-design-email-9" type="email" required
+				class="mdc-text-field__input" aria-labelledby="label-material-design-email-9" data-form="contact"
+				data-meta="email" data-label="Email"/>
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-email-9" class="mdc-floating-label" id="label-material-design-email-9">Email</label>
-		</div>
+			<label for="material-design-email-9" class="mdc-floating-label"
+				   id="label-material-design-email-9">Email</label></div>
 	</div>
 	<!-- /wp:material/email-input-field -->
 
 	<!-- wp:material/website-input-field {"id":"material-design-website-11"} -->
 	<div class="mdc-text-field-container mdc-text-field-container--not-required">
 		<div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input
-			id="material-design-website-11" name="material-design-website-11" type="url" class="mdc-text-field__input"
-			aria-labelledby="label-material-design-website-11" data-form="contact" data-meta="website" data-label="Website" />
+				id="material-design-website-11" name="material-design-website-11" type="url"
+				class="mdc-text-field__input" aria-labelledby="label-material-design-website-11" data-form="contact"
+				data-meta="website" data-label="Website"/>
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-website-11" class="mdc-floating-label"
-						 id="label-material-design-website-11">Website</label></div>
+			<label for="material-design-website-11" class="mdc-floating-label" id="label-material-design-website-11">Website</label>
+		</div>
 	</div>
 	<!-- /wp:material/website-input-field -->
 
 	<!-- wp:material/message-input-field {"id":"material-design-message-3","outlined":false} -->
 	<div class="mdc-text-field-container">
 		<div class="mdc-text-field mdc-text-field--textarea mdc-text-field--custom-full"><span
-			class="mdc-text-field__ripple"></span><textarea id="material-design-message-3" name="material-design-message-3"
-																											class="mdc-text-field__input" rows="8"
-																											aria-labelledby="label-material-design-message-3"
-																											data-form="contact" data-meta="message" data-label="Message"
-																											required></textarea>
+				class="mdc-text-field__ripple"></span><textarea id="material-design-message-3"
+																name="material-design-message-3"
+																class="mdc-text-field__input" rows="8"
+																aria-labelledby="label-material-design-message-3"
+																data-form="contact" data-meta="message"
+																data-label="Message" required></textarea>
 			<div class="mdc-line-ripple"></div>
-			<label for="material-design-message-3" class="mdc-floating-label"
-						 id="label-material-design-message-3">Message</label></div>
+			<label for="material-design-message-3" class="mdc-floating-label" id="label-material-design-message-3">Message</label>
+		</div>
 	</div>
 	<!-- /wp:material/message-input-field -->
 
 	<!-- wp:material/button {"style":"unelevated","isSubmit":true} -->
 	<div class="wp-block-material-button" id="block-material-button-11">
-		<button class="mdc-button mdc-button--unelevated" type="submit"><i class="material-icons mdc-button__icon">spa</i>
+		<button class="mdc-button mdc-button--unelevated" type="submit"><i
+				class="material-icons mdc-button__icon">spa</i>
 			<div class="mdc-button__ripple"></div>
 			<span class="mdc-button__label">Send</span></button>
 	</div>
diff --git a/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
index 4de0ec88f..09754871e 100644
--- a/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
@@ -566,7 +566,7 @@ Object {
               <h2
                 aria-label="Title goes here"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -575,7 +575,7 @@ Object {
               <h3
                 aria-label="Secondary text"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -585,7 +585,7 @@ Object {
             <div
               aria-label="Supporting text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -1176,7 +1176,7 @@ Object {
             <h2
               aria-label="Title goes here"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+              class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -1185,7 +1185,7 @@ Object {
             <h3
               aria-label="Secondary text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -1195,7 +1195,7 @@ Object {
           <div
             aria-label="Supporting text"
             aria-multiline="true"
-            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
             role="textbox"
             style="white-space: pre-wrap;"
           >
@@ -1867,7 +1867,7 @@ Object {
               <h2
                 aria-label="Title goes here"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -1876,7 +1876,7 @@ Object {
               <h3
                 aria-label="Secondary text"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -1886,7 +1886,7 @@ Object {
             <div
               aria-label="Supporting text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+              class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -2477,7 +2477,7 @@ Object {
             <h2
               aria-label="Title goes here"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+              class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -2486,7 +2486,7 @@ Object {
             <h3
               aria-label="Secondary text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -2496,7 +2496,7 @@ Object {
           <div
             aria-label="Supporting text"
             aria-multiline="true"
-            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
             role="textbox"
             style="white-space: pre-wrap;"
           >
@@ -3155,7 +3155,7 @@ Object {
               <h2
                 aria-label="Title goes here"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -3164,7 +3164,7 @@ Object {
               <h3
                 aria-label="Secondary text"
                 aria-multiline="true"
-                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                 role="textbox"
                 style="white-space: pre-wrap;"
               >
@@ -3743,7 +3743,7 @@ Object {
             <h2
               aria-label="Title goes here"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+              class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
               role="textbox"
               style="white-space: pre-wrap;"
             >
@@ -3752,7 +3752,7 @@ Object {
             <h3
               aria-label="Secondary text"
               aria-multiline="true"
-              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
               role="textbox"
               style="white-space: pre-wrap;"
             >
diff --git a/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap
index c05e94aa8..2bc3567d6 100644
--- a/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/__snapshots__/save.test.js.snap
@@ -47,18 +47,18 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title mdc-typography mdc-typography--headline6"
+                class="material-design-card__title title-large"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="material-design-card__secondary-text label-medium"
               >
                 Test secondary text
               </h3>
             </div>
             <div
-              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
             >
               Test supporting text
             </div>
@@ -124,18 +124,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -282,18 +282,18 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title mdc-typography mdc-typography--headline6"
+                class="material-design-card__title title-large"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="material-design-card__secondary-text label-medium"
               >
                 Test secondary text
               </h3>
             </div>
             <div
-              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+              class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
             >
               Test supporting text
             </div>
@@ -359,18 +359,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -517,12 +517,12 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title mdc-typography mdc-typography--headline6"
+                class="material-design-card__title title-large"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="material-design-card__secondary-text label-medium"
               >
                 Test secondary text
               </h3>
@@ -589,12 +589,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap
index 5ebbe1e78..b84d2ae08 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-primary.test.js.snap
@@ -9,7 +9,7 @@ Object {
         class="material-design-card__primary"
       >
         <h3
-          class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+          class="material-design-card__secondary-text label-medium"
         >
           Test Secondary text
         </h3>
@@ -21,7 +21,7 @@ Object {
       class="material-design-card__primary"
     >
       <h3
-        class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+        class="material-design-card__secondary-text label-medium"
       >
         Test Secondary text
       </h3>
@@ -90,7 +90,7 @@ Object {
         class="material-design-card__primary"
       >
         <h2
-          class="material-design-card__title mdc-typography mdc-typography--headline6"
+          class="material-design-card__title title-large"
         >
           Test Title
         </h2>
@@ -102,7 +102,7 @@ Object {
       class="material-design-card__primary"
     >
       <h2
-        class="material-design-card__title mdc-typography mdc-typography--headline6"
+        class="material-design-card__title title-large"
       >
         Test Title
       </h2>
@@ -173,7 +173,7 @@ Object {
         <h3
           aria-label="Secondary text"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -189,7 +189,7 @@ Object {
       <h3
         aria-label="Secondary text"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -262,7 +262,7 @@ Object {
         <h2
           aria-label="Title goes here"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+          class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -278,7 +278,7 @@ Object {
       <h2
         aria-label="Title goes here"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+        class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -351,7 +351,7 @@ Object {
         <h2
           aria-label="Title goes here"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+          class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -360,7 +360,7 @@ Object {
         <h3
           aria-label="Secondary text"
           aria-multiline="true"
-          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+          class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
           role="textbox"
           style="white-space: pre-wrap;"
         >
@@ -376,7 +376,7 @@ Object {
       <h2
         aria-label="Title goes here"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+        class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -385,7 +385,7 @@ Object {
       <h3
         aria-label="Secondary text"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+        class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -456,12 +456,12 @@ Object {
         class="material-design-card__primary"
       >
         <h2
-          class="material-design-card__title mdc-typography mdc-typography--headline6"
+          class="material-design-card__title title-large"
         >
           Test Title
         </h2>
         <h3
-          class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+          class="material-design-card__secondary-text label-medium"
         >
           Test Secondary text
         </h3>
@@ -473,12 +473,12 @@ Object {
       class="material-design-card__primary"
     >
       <h2
-        class="material-design-card__title mdc-typography mdc-typography--headline6"
+        class="material-design-card__title title-large"
       >
         Test Title
       </h2>
       <h3
-        class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+        class="material-design-card__secondary-text label-medium"
       >
         Test Secondary text
       </h3>
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap
index dde96474d..dd56ca7c5 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-supporting-text.test.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+        class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
       >
         Test supporting text
       </div>
@@ -14,7 +14,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+      class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
     >
       Test supporting text
     </div>
@@ -81,7 +81,7 @@ Object {
       <div
         aria-label="Supporting text"
         aria-multiline="true"
-        class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+        class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
         role="textbox"
         style="white-space: pre-wrap;"
       >
@@ -93,7 +93,7 @@ Object {
     <div
       aria-label="Supporting text"
       aria-multiline="true"
-      class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+      class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
       role="textbox"
       style="white-space: pre-wrap;"
     >
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap
index 5a3dd77af..0e5a974b4 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/horizontal-card-layout.test.js.snap
@@ -46,12 +46,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -116,12 +116,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
@@ -267,12 +267,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -299,12 +299,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
@@ -411,12 +411,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -480,12 +480,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
@@ -626,12 +626,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -691,12 +691,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap
index fcec2f734..7f6799453 100644
--- a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/vertical-card-layout.test.js.snap
@@ -46,18 +46,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -121,18 +121,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -277,18 +277,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -314,18 +314,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -427,12 +427,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -443,7 +443,7 @@ Object {
             tabindex="0"
           />
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -502,12 +502,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
@@ -518,7 +518,7 @@ Object {
           tabindex="0"
         />
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-above-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -666,12 +666,12 @@ Object {
                 class="material-design-card__primary"
               >
                 <h2
-                  class="material-design-card__title mdc-typography mdc-typography--headline6"
+                  class="material-design-card__title title-large"
                 >
                   Test title
                 </h2>
                 <h3
-                  class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                  class="material-design-card__secondary-text label-medium"
                 >
                   Test secondary text
                 </h3>
@@ -679,7 +679,7 @@ Object {
             </div>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -746,12 +746,12 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title mdc-typography mdc-typography--headline6"
+                class="material-design-card__title title-large"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="material-design-card__secondary-text label-medium"
               >
                 Test secondary text
               </h3>
@@ -759,7 +759,7 @@ Object {
           </div>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -899,18 +899,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -969,18 +969,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -1120,12 +1120,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -1142,12 +1142,12 @@ Object {
                 class="material-design-card__primary"
               >
                 <h2
-                  class="material-design-card__title mdc-typography mdc-typography--headline6"
+                  class="material-design-card__title title-large"
                 >
                   Test title
                 </h2>
                 <h3
-                  class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                  class="material-design-card__secondary-text label-medium"
                 >
                   Test secondary text
                 </h3>
@@ -1155,7 +1155,7 @@ Object {
             </div>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -1214,12 +1214,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
@@ -1236,12 +1236,12 @@ Object {
               class="material-design-card__primary"
             >
               <h2
-                class="material-design-card__title mdc-typography mdc-typography--headline6"
+                class="material-design-card__title title-large"
               >
                 Test title
               </h2>
               <h3
-                class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                class="material-design-card__secondary-text label-medium"
               >
                 Test secondary text
               </h3>
@@ -1249,7 +1249,7 @@ Object {
           </div>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-over-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -1393,18 +1393,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -1467,18 +1467,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -1618,18 +1618,18 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
           </div>
           <div
-            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+            class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
           >
             Test supporting text
           </div>
@@ -1688,18 +1688,18 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
         </div>
         <div
-          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+          class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
         >
           Test supporting text
         </div>
@@ -1844,12 +1844,12 @@ Object {
             class="material-design-card__primary"
           >
             <h2
-              class="material-design-card__title mdc-typography mdc-typography--headline6"
+              class="material-design-card__title title-large"
             >
               Test title
             </h2>
             <h3
-              class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+              class="material-design-card__secondary-text label-medium"
             >
               Test secondary text
             </h3>
@@ -1914,12 +1914,12 @@ Object {
           class="material-design-card__primary"
         >
           <h2
-            class="material-design-card__title mdc-typography mdc-typography--headline6"
+            class="material-design-card__title title-large"
           >
             Test title
           </h2>
           <h3
-            class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+            class="material-design-card__secondary-text label-medium"
           >
             Test secondary text
           </h3>
diff --git a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
index 499534a21..3d8e6c194 100644
--- a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
@@ -1248,7 +1248,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1257,7 +1257,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1267,7 +1267,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -1329,7 +1329,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1338,7 +1338,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1348,7 +1348,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -1410,7 +1410,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1419,7 +1419,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -1429,7 +1429,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2687,7 +2687,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2696,7 +2696,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2706,7 +2706,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -2768,7 +2768,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2777,7 +2777,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2787,7 +2787,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -2849,7 +2849,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2858,7 +2858,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -2868,7 +2868,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -4206,7 +4206,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4215,7 +4215,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4225,7 +4225,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -4281,7 +4281,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4290,7 +4290,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4300,7 +4300,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -4356,7 +4356,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4365,7 +4365,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -4375,7 +4375,7 @@ Object {
                   <div
                     aria-label="Supporting text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5631,7 +5631,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5640,7 +5640,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5650,7 +5650,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -5706,7 +5706,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5715,7 +5715,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5725,7 +5725,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -5781,7 +5781,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5790,7 +5790,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -5800,7 +5800,7 @@ Object {
                 <div
                   aria-label="Supporting text"
                   aria-multiline="true"
-                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   role="textbox"
                   style="white-space: pre-wrap;"
                 >
@@ -6801,7 +6801,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6810,7 +6810,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6867,7 +6867,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6876,7 +6876,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6933,7 +6933,7 @@ Object {
                     <h2
                       aria-label="Title goes here"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -6942,7 +6942,7 @@ Object {
                     <h3
                       aria-label="Secondary text"
                       aria-multiline="true"
-                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                       role="textbox"
                       style="white-space: pre-wrap;"
                     >
@@ -7862,7 +7862,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7871,7 +7871,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7928,7 +7928,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7937,7 +7937,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -7994,7 +7994,7 @@ Object {
                   <h2
                     aria-label="Title goes here"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -8003,7 +8003,7 @@ Object {
                   <h3
                     aria-label="Secondary text"
                     aria-multiline="true"
-                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                     role="textbox"
                     style="white-space: pre-wrap;"
                   >
@@ -12435,7 +12435,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         className="material-design-card__primary"
                       >
                         <ForwardRef
-                          className="material-design-card__title mdc-typography mdc-typography--headline6"
+                          className="material-design-card__title title-large"
                           onChange={[Function]}
                           placeholder="Title goes here"
                           tagName="h2"
@@ -12444,7 +12444,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h2
                             aria-label="Title goes here"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                            className="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12457,7 +12457,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           </h2>
                         </ForwardRef>
                         <ForwardRef
-                          className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                          className="material-design-card__secondary-text label-medium"
                           onChange={[Function]}
                           placeholder="Secondary text"
                           tagName="h3"
@@ -12466,7 +12466,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h3
                             aria-label="Secondary text"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12488,7 +12488,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                       supportingText="Supporting text #1"
                     >
                       <ForwardRef
-                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                         onChange={[Function]}
                         placeholder="Supporting text"
                         tagName="div"
@@ -12497,7 +12497,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         <div
                           aria-label="Supporting text"
                           aria-multiline="true"
-                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                           onInput={[Function]}
                           role="textbox"
                           style={
@@ -12754,7 +12754,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         className="material-design-card__primary"
                       >
                         <ForwardRef
-                          className="material-design-card__title mdc-typography mdc-typography--headline6"
+                          className="material-design-card__title title-large"
                           onChange={[Function]}
                           placeholder="Title goes here"
                           tagName="h2"
@@ -12763,7 +12763,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h2
                             aria-label="Title goes here"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__title mdc-typography mdc-typography--headline6"
+                            className="rich-text block-editor-rich-text__editable material-design-card__title title-large"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12776,7 +12776,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           </h2>
                         </ForwardRef>
                         <ForwardRef
-                          className="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                          className="material-design-card__secondary-text label-medium"
                           onChange={[Function]}
                           placeholder="Secondary text"
                           tagName="h3"
@@ -12785,7 +12785,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                           <h3
                             aria-label="Secondary text"
                             aria-multiline="true"
-                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                            className="rich-text block-editor-rich-text__editable material-design-card__secondary-text label-medium"
                             onInput={[Function]}
                             role="textbox"
                             style={
@@ -12807,7 +12807,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                       supportingText="Supporting text #2"
                     >
                       <ForwardRef
-                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                        className="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                         onChange={[Function]}
                         placeholder="Supporting text"
                         tagName="div"
@@ -12816,7 +12816,7 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         <div
                           aria-label="Supporting text"
                           aria-multiline="true"
-                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                          className="rich-text block-editor-rich-text__editable material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                           onInput={[Function]}
                           role="textbox"
                           style={
diff --git a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap
index a41d5dac5..afc1fee16 100644
--- a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/save.test.js.snap
@@ -54,18 +54,18 @@ Object {
                     class="material-design-card__primary"
                   >
                     <h2
-                      class="material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="material-design-card__title title-large"
                     >
                       Title goes here
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="material-design-card__secondary-text label-medium"
                     >
                       Secondary text
                     </h3>
                   </div>
                   <div
-                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   >
                     Supporting text
                   </div>
@@ -124,18 +124,18 @@ Object {
                   class="material-design-card__primary"
                 >
                   <h2
-                    class="material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="material-design-card__title title-large"
                   >
                     Title goes here
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="material-design-card__secondary-text label-medium"
                   >
                     Secondary text
                   </h3>
                 </div>
                 <div
-                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                 >
                   Supporting text
                 </div>
@@ -274,18 +274,18 @@ Object {
                     class="material-design-card__primary"
                   >
                     <h2
-                      class="material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="material-design-card__title title-large"
                     >
                       Title goes here
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="material-design-card__secondary-text label-medium"
                     >
                       Secondary text
                     </h3>
                   </div>
                   <div
-                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                    class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                   >
                     Supporting text
                   </div>
@@ -343,18 +343,18 @@ Object {
                   class="material-design-card__primary"
                 >
                   <h2
-                    class="material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="material-design-card__title title-large"
                   >
                     Title goes here
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="material-design-card__secondary-text label-medium"
                   >
                     Secondary text
                   </h3>
                 </div>
                 <div
-                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2"
+                  class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography body-medium"
                 >
                   Supporting text
                 </div>
@@ -493,12 +493,12 @@ Object {
                     class="material-design-card__primary"
                   >
                     <h2
-                      class="material-design-card__title mdc-typography mdc-typography--headline6"
+                      class="material-design-card__title title-large"
                     >
                       Title goes here
                     </h2>
                     <h3
-                      class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                      class="material-design-card__secondary-text label-medium"
                     >
                       Secondary text
                     </h3>
@@ -557,12 +557,12 @@ Object {
                   class="material-design-card__primary"
                 >
                   <h2
-                    class="material-design-card__title mdc-typography mdc-typography--headline6"
+                    class="material-design-card__title title-large"
                   >
                     Title goes here
                   </h2>
                   <h3
-                    class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2"
+                    class="material-design-card__secondary-text label-medium"
                   >
                     Secondary text
                   </h3>
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
index 58f04e727..234176d77 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
@@ -53,14 +53,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -110,14 +110,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -182,14 +182,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -239,14 +239,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -387,14 +387,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -404,7 +404,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 1 excerpt
@@ -454,14 +454,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -471,7 +471,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 2 excerpt
@@ -528,14 +528,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -545,7 +545,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   Example 1 excerpt
@@ -595,14 +595,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -612,7 +612,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
index 58f04e727..234176d77 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
@@ -53,14 +53,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -110,14 +110,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -182,14 +182,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -239,14 +239,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -387,14 +387,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -404,7 +404,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 1 excerpt
@@ -454,14 +454,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -471,7 +471,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 2 excerpt
@@ -528,14 +528,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -545,7 +545,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   Example 1 excerpt
@@ -595,14 +595,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -612,7 +612,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap
index 1584e0473..3733d2e1f 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-header.test.js.snap
@@ -9,14 +9,14 @@ Object {
         class="single-post-card__primary"
       >
         <h2
-          class="single-post-card__title mdc-typography mdc-typography--headline6"
+          class="single-post-card__title title-large"
         >
           <div>
             Test Title
           </div>
         </h2>
         <h3
-          class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+          class="single-post-card__subtitle label-medium"
         >
           <time
             datetime="2020-02-25 08:20:38"
@@ -32,14 +32,14 @@ Object {
       class="single-post-card__primary"
     >
       <h2
-        class="single-post-card__title mdc-typography mdc-typography--headline6"
+        class="single-post-card__title title-large"
       >
         <div>
           Test Title
         </div>
       </h2>
       <h3
-        class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+        class="single-post-card__subtitle label-medium"
       >
         <time
           datetime="2020-02-25 08:20:38"
@@ -112,7 +112,7 @@ Object {
         class="single-post-card__primary"
       >
         <h2
-          class="single-post-card__title mdc-typography mdc-typography--headline6"
+          class="single-post-card__title title-large"
         >
           <div>
             Test Title
@@ -126,7 +126,7 @@ Object {
       class="single-post-card__primary"
     >
       <h2
-        class="single-post-card__title mdc-typography mdc-typography--headline6"
+        class="single-post-card__title title-large"
       >
         <div>
           Test Title
@@ -197,12 +197,12 @@ Object {
         class="single-post-card__primary"
       >
         <h2
-          class="single-post-card__title mdc-typography mdc-typography--headline6"
+          class="single-post-card__title title-large"
         >
           (no title)
         </h2>
         <h3
-          class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+          class="single-post-card__subtitle label-medium"
         >
           <time
             datetime="2020-02-25 08:20:38"
@@ -218,12 +218,12 @@ Object {
       class="single-post-card__primary"
     >
       <h2
-        class="single-post-card__title mdc-typography mdc-typography--headline6"
+        class="single-post-card__title title-large"
       >
         (no title)
       </h2>
       <h3
-        class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+        class="single-post-card__subtitle label-medium"
       >
         <time
           datetime="2020-02-25 08:20:38"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap
index 0f008f6a9..9f4efc902 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-image.test.js.snap
@@ -16,14 +16,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -48,14 +48,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
index a3cb3c670..9ee3999c5 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
@@ -20,14 +20,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -100,14 +100,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -237,14 +237,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -317,14 +317,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -450,14 +450,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -526,14 +526,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -659,14 +659,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -691,14 +691,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -784,14 +784,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -820,14 +820,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -909,14 +909,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -985,14 +985,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
index 4e156dbcc..774204ef8 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
@@ -25,14 +25,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       This is a test post title #1
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-02-25 08:20:38"
@@ -46,7 +46,7 @@ Object {
                   style="background-image: url(http://example.com/test1.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     This is a test post excerpt #1
@@ -95,14 +95,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       This is a test post title #2
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-02-25 09:20:38"
@@ -116,7 +116,7 @@ Object {
                   style="background-image: url(http://example.com/test2.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     This is a test post excerpt #2
@@ -176,14 +176,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     This is a test post title #1
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -197,7 +197,7 @@ Object {
                 style="background-image: url(http://example.com/test1.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   This is a test post excerpt #1
@@ -246,14 +246,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     This is a test post title #2
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 09:20:38"
@@ -267,7 +267,7 @@ Object {
                 style="background-image: url(http://example.com/test2.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   This is a test post excerpt #2
@@ -388,14 +388,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       This is a test post title #1
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-02-25 08:20:38"
@@ -451,14 +451,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       This is a test post title #2
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-02-25 09:20:38"
@@ -525,14 +525,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     This is a test post title #1
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -588,14 +588,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     This is a test post title #2
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 09:20:38"
@@ -714,14 +714,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       This is a test post title #1
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-02-25 08:20:38"
@@ -735,7 +735,7 @@ Object {
                   style="background-image: url(http://example.com/test1.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     This is a test post excerpt #1
@@ -787,14 +787,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       This is a test post title #2
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-02-25 09:20:38"
@@ -808,7 +808,7 @@ Object {
                   style="background-image: url(http://example.com/test2.jpg);"
                 />
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     This is a test post excerpt #2
@@ -867,14 +867,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     This is a test post title #1
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -888,7 +888,7 @@ Object {
                 style="background-image: url(http://example.com/test1.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   This is a test post excerpt #1
@@ -940,14 +940,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     This is a test post title #2
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 09:20:38"
@@ -961,7 +961,7 @@ Object {
                 style="background-image: url(http://example.com/test2.jpg);"
               />
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   This is a test post excerpt #2
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
index 65a397b40..4efe01eff 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
@@ -16,14 +16,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 This is a test post title #1
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -37,7 +37,7 @@ Object {
             style="background-image: url(http://example.com/test1.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test post excerpt #1
@@ -85,14 +85,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               This is a test post title #1
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -106,7 +106,7 @@ Object {
           style="background-image: url(http://example.com/test1.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test post excerpt #1
@@ -215,14 +215,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 This is a test post title #1
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -277,14 +277,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               This is a test post title #1
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -392,14 +392,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 This is a test post title #1
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -413,7 +413,7 @@ Object {
             style="background-image: url(http://example.com/test1.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test post excerpt #1
@@ -461,14 +461,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               This is a test post title #1
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -482,7 +482,7 @@ Object {
           style="background-image: url(http://example.com/test1.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test post excerpt #1
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
index 94f3f3ff7..9d6fcd7a2 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
@@ -16,14 +16,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -37,7 +37,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -103,14 +103,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -124,7 +124,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -247,14 +247,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -268,7 +268,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -334,14 +334,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -355,7 +355,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -478,14 +478,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -495,7 +495,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -561,14 +561,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -578,7 +578,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -708,14 +708,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Test Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-02-25 08:20:38"
@@ -727,7 +727,7 @@ Object {
             </div>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -800,14 +800,14 @@ Object {
               class="single-post-card__primary"
             >
               <h2
-                class="single-post-card__title mdc-typography mdc-typography--headline6"
+                class="single-post-card__title title-large"
               >
                 <div>
                   Test Title
                 </div>
               </h2>
               <h3
-                class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                class="single-post-card__subtitle label-medium"
               >
                 <time
                   datetime="2020-02-25 08:20:38"
@@ -819,7 +819,7 @@ Object {
           </div>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-over-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -946,14 +946,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -963,7 +963,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -1033,14 +1033,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1050,7 +1050,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-under-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -1173,14 +1173,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1253,14 +1253,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1390,14 +1390,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1422,14 +1422,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1511,14 +1511,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1532,7 +1532,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test a ...
@@ -1598,14 +1598,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1619,7 +1619,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test a ...
@@ -1742,14 +1742,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1759,7 +1759,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -1825,14 +1825,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -1842,7 +1842,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -1965,14 +1965,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -1982,7 +1982,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -2004,14 +2004,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -2021,7 +2021,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -2100,14 +2100,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -2121,7 +2121,7 @@ Object {
             style="background-image: url(http://example.com/test.jpg);"
           />
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -2143,14 +2143,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -2164,7 +2164,7 @@ Object {
           style="background-image: url(http://example.com/test.jpg);"
         />
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
@@ -2243,14 +2243,14 @@ Object {
             class="single-post-card__primary"
           >
             <h2
-              class="single-post-card__title mdc-typography mdc-typography--headline6"
+              class="single-post-card__title title-large"
             >
               <div>
                 Test Title
               </div>
             </h2>
             <h3
-              class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+              class="single-post-card__subtitle label-medium"
             >
               <time
                 datetime="2020-02-25 08:20:38"
@@ -2260,7 +2260,7 @@ Object {
             </h3>
           </div>
           <div
-            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+            class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
           >
             <div>
               This is a test excerpt
@@ -2326,14 +2326,14 @@ Object {
           class="single-post-card__primary"
         >
           <h2
-            class="single-post-card__title mdc-typography mdc-typography--headline6"
+            class="single-post-card__title title-large"
           >
             <div>
               Test Title
             </div>
           </h2>
           <h3
-            class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+            class="single-post-card__subtitle label-medium"
           >
             <time
               datetime="2020-02-25 08:20:38"
@@ -2343,7 +2343,7 @@ Object {
           </h3>
         </div>
         <div
-          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+          class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
         >
           <div>
             This is a test excerpt
diff --git a/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
index 74f43eea1..bfc1b5bd1 100644
--- a/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
@@ -3418,14 +3418,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -3435,7 +3435,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 1 excerpt
@@ -3485,14 +3485,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -3502,7 +3502,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 2 excerpt
@@ -4572,14 +4572,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 1 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -4589,7 +4589,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   Example 1 excerpt
@@ -4639,14 +4639,14 @@ Object {
                 class="single-post-card__primary"
               >
                 <h2
-                  class="single-post-card__title mdc-typography mdc-typography--headline6"
+                  class="single-post-card__title title-large"
                 >
                   <div>
                     Example 2 Title
                   </div>
                 </h2>
                 <h3
-                  class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                  class="single-post-card__subtitle label-medium"
                 >
                   <time
                     datetime="2020-03-26 12:00:00"
@@ -4656,7 +4656,7 @@ Object {
                 </h3>
               </div>
               <div
-                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
               >
                 <div>
                   Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
index a221c0fdd..3defbb120 100644
--- a/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
@@ -1042,14 +1042,14 @@ Object {
                     class="single-post-card__primary"
                   >
                     <h2
-                      class="single-post-card__title mdc-typography mdc-typography--headline6"
+                      class="single-post-card__title title-large"
                     >
                       <div>
                         Example 1 Title
                       </div>
                     </h2>
                     <h3
-                      class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                      class="single-post-card__subtitle label-medium"
                     >
                       <time
                         datetime="2020-03-26 12:00:00"
@@ -1059,7 +1059,7 @@ Object {
                     </h3>
                   </div>
                   <div
-                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                   >
                     <div>
                       Example 1 excerpt
@@ -1109,14 +1109,14 @@ Object {
                     class="single-post-card__primary"
                   >
                     <h2
-                      class="single-post-card__title mdc-typography mdc-typography--headline6"
+                      class="single-post-card__title title-large"
                     >
                       <div>
                         Example 2 Title
                       </div>
                     </h2>
                     <h3
-                      class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                      class="single-post-card__subtitle label-medium"
                     >
                       <time
                         datetime="2020-03-26 12:00:00"
@@ -1126,7 +1126,7 @@ Object {
                     </h3>
                   </div>
                   <div
-                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                    class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                   >
                     <div>
                       Example 2 excerpt
@@ -2177,14 +2177,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 1 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -2194,7 +2194,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 1 excerpt
@@ -2244,14 +2244,14 @@ Object {
                   class="single-post-card__primary"
                 >
                   <h2
-                    class="single-post-card__title mdc-typography mdc-typography--headline6"
+                    class="single-post-card__title title-large"
                   >
                     <div>
                       Example 2 Title
                     </div>
                   </h2>
                   <h3
-                    class="single-post-card__subtitle mdc-typography mdc-typography--subtitle2"
+                    class="single-post-card__subtitle label-medium"
                   >
                     <time
                       datetime="2020-03-26 12:00:00"
@@ -2261,7 +2261,7 @@ Object {
                   </h3>
                 </div>
                 <div
-                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography mdc-typography--body2"
+                  class="single-post-card__secondary single-post-card__secondary-text-above-media mdc-typography body-medium"
                 >
                   <div>
                     Example 2 excerpt
diff --git a/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap
index ca7627c27..644625c05 100644
--- a/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/tab-bar/__snapshots__/save.test.js.snap
@@ -87,10 +87,10 @@ Object {
         </div>
         <div>
           <div
-            class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"
+            class="mdc-tab-content body-large mdc-tab-content--active"
           />
           <div
-            class="mdc-tab-content mdc-typography--body1"
+            class="mdc-tab-content body-large"
           />
         </div>
       </div>
@@ -179,10 +179,10 @@ Object {
       </div>
       <div>
         <div
-          class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"
+          class="mdc-tab-content body-large mdc-tab-content--active"
         />
         <div
-          class="mdc-tab-content mdc-typography--body1"
+          class="mdc-tab-content body-large"
         />
       </div>
     </div>
diff --git a/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap b/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap
index ed1ecf894..2c328b5a7 100644
--- a/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap
+++ b/plugin/tests/js/customizer/components/__snapshots__/material-library.test.js.snap
@@ -9,13 +9,13 @@ Object {
         id="material-library-preview"
       >
         <h2
-          class="mdc-typography--headline2"
+          class="headline-large"
         >
           Material Components
         </h2>
         <section>
           <h3
-            class="mdc-typography--headline3"
+            class="headline-medium"
           >
             Blocks
           </h3>
@@ -25,7 +25,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Buttons
@@ -118,7 +118,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Cards
@@ -155,20 +155,20 @@ Object {
                     style="padding: 16px;"
                   >
                     <h2
-                      class="mdc-typography mdc-typography--headline6 material-design-card__title"
+                      class="title-large material-design-card__title"
                       style="margin: 0px 0px 5px 0px;"
                     >
                       Our Changing Planet
                     </h2>
                     <h3
-                      class="mdc-typography material-design-card__secondary-text"
+                      class="material-design-card__secondary-text"
                       style="font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; margin: 0px;"
                     >
                       by John Smith
                     </h3>
                   </div>
                   <div
-                    class="mdc-typography mdc-typography--body2"
+                    class="body-medium"
                     style="padding: 16px;"
                   >
                     Visit ten places on our planet that are undergoing the biggest changes today.
@@ -208,7 +208,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Data Tables
@@ -380,7 +380,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Gallery (Image Lists)
@@ -492,7 +492,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Lists
@@ -740,7 +740,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Tabs
@@ -878,7 +878,7 @@ Object {
           style="margin-top: 100px;"
         >
           <h3
-            class="mdc-typography--headline3"
+            class="headline-medium"
           >
             Components
           </h3>
@@ -891,7 +891,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Checkboxes
@@ -1025,7 +1025,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Chips
@@ -1100,7 +1100,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Radio buttons
@@ -1167,7 +1167,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Text fields
@@ -1257,7 +1257,7 @@ Object {
           <hr />
           <div>
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
               style="margin: 0px;"
             >
               Switches
@@ -1307,13 +1307,13 @@ Object {
       id="material-library-preview"
     >
       <h2
-        class="mdc-typography--headline2"
+        class="headline-large"
       >
         Material Components
       </h2>
       <section>
         <h3
-          class="mdc-typography--headline3"
+          class="headline-medium"
         >
           Blocks
         </h3>
@@ -1323,7 +1323,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Buttons
@@ -1416,7 +1416,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Cards
@@ -1453,20 +1453,20 @@ Object {
                   style="padding: 16px;"
                 >
                   <h2
-                    class="mdc-typography mdc-typography--headline6 material-design-card__title"
+                    class="title-large material-design-card__title"
                     style="margin: 0px 0px 5px 0px;"
                   >
                     Our Changing Planet
                   </h2>
                   <h3
-                    class="mdc-typography material-design-card__secondary-text"
+                    class="material-design-card__secondary-text"
                     style="font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; margin: 0px;"
                   >
                     by John Smith
                   </h3>
                 </div>
                 <div
-                  class="mdc-typography mdc-typography--body2"
+                  class="body-medium"
                   style="padding: 16px;"
                 >
                   Visit ten places on our planet that are undergoing the biggest changes today.
@@ -1506,7 +1506,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Data Tables
@@ -1678,7 +1678,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Gallery (Image Lists)
@@ -1790,7 +1790,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Lists
@@ -2038,7 +2038,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Tabs
@@ -2176,7 +2176,7 @@ Object {
         style="margin-top: 100px;"
       >
         <h3
-          class="mdc-typography--headline3"
+          class="headline-medium"
         >
           Components
         </h3>
@@ -2189,7 +2189,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Checkboxes
@@ -2323,7 +2323,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Chips
@@ -2398,7 +2398,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Radio buttons
@@ -2465,7 +2465,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Text fields
@@ -2555,7 +2555,7 @@ Object {
         <hr />
         <div>
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
             style="margin: 0px;"
           >
             Switches
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 508c7e947..1ffeb8f49 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -7,7 +7,7 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
   <span
     className="customize-control-title google-fonts-control-title__child"
   >
-    Test item
+    Test: Headline Large
   </span>
   <div
     className="google-fonts-control__values"
@@ -20,14 +20,39 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-number-control-headline1"
-          id="inspector-number-label-headline1"
+          htmlFor="inspector-line-height-control-headline-large"
+          id="inspector-line-height-label-headline-large"
+        >
+          Line height
+        </label>
+        <input
+          className="components-google-fonts-control__number"
+          id="inspector-line-height-control-headline-large"
+          max={64}
+          min={0}
+          onChange={[Function]}
+          step="0.01"
+          type="number"
+          value={0}
+        />
+      </div>
+    </div>
+    <div
+      className="components-base-control"
+    >
+      <div
+        className="components-base-control__field"
+      >
+        <label
+          className="components-base-control__label"
+          htmlFor="inspector-size-control-headline-large"
+          id="inspector-size-label-headline-large"
         >
           Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-number-control-headline1"
+          id="inspector-size-control-headline-large"
           max={96}
           min={2}
           onChange={[Function]}
@@ -36,6 +61,30 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
         />
       </div>
     </div>
+    <div
+      className="components-base-control"
+    >
+      <div
+        className="components-base-control__field"
+      >
+        <label
+          className="components-base-control__label"
+          htmlFor="inspector-tracking-control-headline-large"
+          id="inspector-tracking-label-headline-large"
+        >
+          Tracking
+        </label>
+        <input
+          className="components-google-fonts-control__number"
+          id="inspector-tracking-control-headline-large"
+          max={100}
+          min={-5}
+          onChange={[Function]}
+          type="number"
+          value={0}
+        />
+      </div>
+    </div>
     <ForwardRef(SelectControl)
       className="components-google-fonts-control__select"
       label="Weight"
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/item.test.js b/plugin/tests/js/customizer/components/google-fonts-control/item.test.js
index 6a59acfb4..08729c94b 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/item.test.js
+++ b/plugin/tests/js/customizer/components/google-fonts-control/item.test.js
@@ -30,8 +30,8 @@ const setupShallow = props => {
 };
 
 const baseProps = {
-	label: 'Test item',
-	id: 'headline1',
+	label: 'Test: Headline Large',
+	id: 'headline-large',
 	size: {
 		label: 'Size',
 		value: 96,
@@ -48,6 +48,19 @@ const baseProps = {
 			{ label: '500', value: '500' },
 		],
 	},
+	lineHeight: {
+		value: 0,
+		label: 'Line height',
+		min: 0,
+		max: 64,
+		default: 0,
+	},
+	tracking: {
+		label: 'Tracking',
+		min: -5,
+		max: 100,
+		default: 0,
+	},
 };
 
 describe( 'GoogleFontsControl/Item', () => {
@@ -71,12 +84,64 @@ describe( 'GoogleFontsControl/Item', () => {
 			...baseProps,
 			onChange: onChangeMock,
 		} );
-		wrapper.find( 'input' ).simulate( 'change', event );
+		wrapper
+			.find( '#inspector-size-control-headline-large' )
+			.simulate( 'change', event );
 
 		expect( onChangeMock ).toHaveBeenCalledWith( {
 			id: baseProps.id,
 			weightValue: baseProps.weight.value,
 			sizeValue: 12,
+			lineHeightValue: baseProps.lineHeight.value,
+			trackingValue: baseProps.tracking.value,
+		} );
+	} );
+
+	it( 'should call onChange line height prop', () => {
+		const onChangeMock = jest.fn();
+		const event = {
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+			preventDefault() {},
+			target: { value: 10 },
+		};
+		const wrapper = setupShallow( {
+			...baseProps,
+			onChange: onChangeMock,
+		} );
+		wrapper
+			.find( '#inspector-line-height-control-headline-large' )
+			.simulate( 'change', event );
+
+		expect( onChangeMock ).toHaveBeenCalledWith( {
+			id: baseProps.id,
+			weightValue: baseProps.weight.value,
+			sizeValue: baseProps.size.value,
+			lineHeightValue: 10,
+			trackingValue: baseProps.tracking.value,
+		} );
+	} );
+
+	it( 'should call onChange tracking prop', () => {
+		const onChangeMock = jest.fn();
+		const event = {
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+			preventDefault() {},
+			target: { value: 10 },
+		};
+		const wrapper = setupShallow( {
+			...baseProps,
+			onChange: onChangeMock,
+		} );
+		wrapper
+			.find( '#inspector-tracking-control-headline-large' )
+			.simulate( 'change', event );
+
+		expect( onChangeMock ).toHaveBeenCalledWith( {
+			id: baseProps.id,
+			weightValue: baseProps.weight.value,
+			sizeValue: baseProps.size.value,
+			lineHeightValue: baseProps.lineHeight.value,
+			trackingValue: 10,
 		} );
 	} );
 
@@ -95,6 +160,8 @@ describe( 'GoogleFontsControl/Item', () => {
 			id: baseProps.id,
 			weightValue: 100,
 			sizeValue: baseProps.size.value,
+			lineHeightValue: baseProps.lineHeight.value,
+			trackingValue: baseProps.tracking.value,
 		} );
 	} );
 
@@ -119,7 +186,10 @@ describe( 'GoogleFontsControl/Item', () => {
 		};
 
 		const wrapper = setupShallow( props );
-		expect( wrapper.find( 'input' ).props().value ).toStrictEqual( 96 );
+		expect(
+			wrapper.find( '#inspector-size-control-headline-large' ).props()
+				.value
+		).toStrictEqual( 96 );
 		expect(
 			wrapper.find( '.components-google-fonts-control__select' ).props()
 				.value
diff --git a/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap b/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap
index b35abf404..52d40ca83 100644
--- a/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/getting-started/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="mdc-layout-grid mdc-typography"
+        class="mdc-layout-grid"
       >
         <div
           class="mdc-layout-grid__inner"
@@ -18,7 +18,7 @@ Object {
               class="material-gsm__heading"
             >
               <div
-                class="mdc-typography--headline6"
+                class="title-large"
               >
                 Getting Started
               </div>
@@ -107,11 +107,13 @@ Object {
             class="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9"
           >
             <h2
-              class="material-gsm__content-title mdc-typography--headline3"
+              class="material-gsm__content-title headline-medium"
             >
               Customize your Theme
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
             </p>
             <img
@@ -142,11 +144,13 @@ Object {
               </button>
             </div>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Starter Styles
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Start from our existing styles and use 
               <a
                 href="https://material.io/design/material-theming/overview.html"
@@ -158,11 +162,13 @@ Object {
                to create a custom look and feel.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Color Palettes
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
               <a
                 href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -174,11 +180,13 @@ Object {
                to find complementary, analogous, and triadic tonal palettes.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Typography
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Choose from more than 1,000 typefaces in 
               <a
                 href="https://fonts.google.com/"
@@ -198,19 +206,23 @@ Object {
                for inspiration and best practices.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Corner Styles
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Icon Style
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               All 
               <a
                 href="http://material.io/icons"
@@ -222,28 +234,34 @@ Object {
                are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline3"
+              class="material-gsm__content-title headline-medium"
             >
               Set Layout & Navigation
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
               Choose how comment fields display within each post.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Top app bar
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
             </p>
             <h2
-              class="material-gsm__content-title mdc-typography--headline5"
+              class="material-gsm__content-title title-large"
             >
               Footer
             </h2>
-            <p>
+            <p
+              class="body-large"
+            >
               Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
               <a
                 href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
@@ -264,7 +282,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="mdc-layout-grid mdc-typography"
+      class="mdc-layout-grid"
     >
       <div
         class="mdc-layout-grid__inner"
@@ -276,7 +294,7 @@ Object {
             class="material-gsm__heading"
           >
             <div
-              class="mdc-typography--headline6"
+              class="title-large"
             >
               Getting Started
             </div>
@@ -365,11 +383,13 @@ Object {
           class="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9"
         >
           <h2
-            class="material-gsm__content-title mdc-typography--headline3"
+            class="material-gsm__content-title headline-medium"
           >
             Customize your Theme
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
           </p>
           <img
@@ -400,11 +420,13 @@ Object {
             </button>
           </div>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Starter Styles
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Start from our existing styles and use 
             <a
               href="https://material.io/design/material-theming/overview.html"
@@ -416,11 +438,13 @@ Object {
              to create a custom look and feel.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Color Palettes
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
             <a
               href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -432,11 +456,13 @@ Object {
              to find complementary, analogous, and triadic tonal palettes.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Typography
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Choose from more than 1,000 typefaces in 
             <a
               href="https://fonts.google.com/"
@@ -456,19 +482,23 @@ Object {
              for inspiration and best practices.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Corner Styles
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Icon Style
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             All 
             <a
               href="http://material.io/icons"
@@ -480,28 +510,34 @@ Object {
              are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline3"
+            class="material-gsm__content-title headline-medium"
           >
             Set Layout & Navigation
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
             Choose how comment fields display within each post.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Top app bar
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
           </p>
           <h2
-            class="material-gsm__content-title mdc-typography--headline5"
+            class="material-gsm__content-title title-large"
           >
             Footer
           </h2>
-          <p>
+          <p
+            class="body-large"
+          >
             Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
             <a
               href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
diff --git a/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap b/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap
index cf52f2b19..db15232bc 100644
--- a/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap
+++ b/plugin/tests/js/getting-started/components/__snapshots__/customize.test.js.snap
@@ -6,11 +6,13 @@ Object {
   "baseElement": <body>
     <div>
       <h2
-        class="material-gsm__content-title mdc-typography--headline3"
+        class="material-gsm__content-title headline-medium"
       >
         Customize your Theme
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
       </p>
       <img
@@ -41,11 +43,13 @@ Object {
         </button>
       </div>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Starter Styles
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Start from our existing styles and use 
         <a
           href="https://material.io/design/material-theming/overview.html"
@@ -57,11 +61,13 @@ Object {
          to create a custom look and feel.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Color Palettes
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
         <a
           href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -73,11 +79,13 @@ Object {
          to find complementary, analogous, and triadic tonal palettes.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Typography
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Choose from more than 1,000 typefaces in 
         <a
           href="https://fonts.google.com/"
@@ -97,19 +105,23 @@ Object {
          for inspiration and best practices.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Corner Styles
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Icon Style
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         All 
         <a
           href="http://material.io/icons"
@@ -121,28 +133,34 @@ Object {
          are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline3"
+        class="material-gsm__content-title headline-medium"
       >
         Set Layout & Navigation
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
         Choose how comment fields display within each post.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Top app bar
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
       </p>
       <h2
-        class="material-gsm__content-title mdc-typography--headline5"
+        class="material-gsm__content-title title-large"
       >
         Footer
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
         <a
           href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
@@ -160,11 +178,13 @@ Object {
   </body>,
   "container": <div>
     <h2
-      class="material-gsm__content-title mdc-typography--headline3"
+      class="material-gsm__content-title headline-medium"
     >
       Customize your Theme
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Set and preview your global theme styles using the Material Design options in the Customize panel. Choose colors, typography, shapes, and icons to express your unique style. Once you’re satisfied with your changes, hit “Publish” to update your site.
     </p>
     <img
@@ -195,11 +215,13 @@ Object {
       </button>
     </div>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Starter Styles
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Start from our existing styles and use 
       <a
         href="https://material.io/design/material-theming/overview.html"
@@ -211,11 +233,13 @@ Object {
        to create a custom look and feel.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Color Palettes
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Change your primary and secondary colors and see them applied throughout your site. Need help picking colors? Try Material’s 
       <a
         href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors"
@@ -227,11 +251,13 @@ Object {
        to find complementary, analogous, and triadic tonal palettes.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Typography
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Choose from more than 1,000 typefaces in 
       <a
         href="https://fonts.google.com/"
@@ -251,19 +277,23 @@ Object {
        for inspiration and best practices.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Corner Styles
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Material Design systematically applies a shape scheme across components. Change the global corner radius for all blocks or individually for each Material block.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Icon Style
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       All 
       <a
         href="http://material.io/icons"
@@ -275,28 +305,34 @@ Object {
        are included with this plugin. Choose from Filled, Outlined, Rounded, Two-tone, or Sharp styles.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline3"
+      class="material-gsm__content-title headline-medium"
     >
       Set Layout & Navigation
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Select how posts display – as either cards or image lists, in a wide or normal width. Additional card display options include raised or outlined cards, and show or hide post comments, author, excerpt, and date. 
       Choose how comment fields display within each post.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Top app bar
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Choose tabs, navigation drawer, or both for your site navigation. Give users the ability to search your site from within the top app bar. By default, the top app bar will hide when scrolling up, choose “Fixed” to keep the app bar visible at all times.
     </p>
     <h2
-      class="material-gsm__content-title mdc-typography--headline5"
+      class="material-gsm__content-title title-large"
     >
       Footer
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Add footer text and give your users a quick way to jump back to the top of the page. Looking to add widgets at the bottom of your site? Use the 
       <a
         href="\${ getConfig( 'customize' ) }?autofocus[panel]=widgets"
diff --git a/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap b/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap
index 73d32e9d3..0b533993e 100644
--- a/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap
+++ b/plugin/tests/js/getting-started/components/__snapshots__/overview.test.js.snap
@@ -6,11 +6,13 @@ Object {
   "baseElement": <body>
     <div>
       <h2
-        class="material-gsm__content-title mdc-typography--headline3"
+        class="material-gsm__content-title headline-medium"
       >
         Build with Material Blocks
       </h2>
-      <p>
+      <p
+        class="body-large"
+      >
         Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.
       </p>
       <img
@@ -47,11 +49,13 @@ Object {
   </body>,
   "container": <div>
     <h2
-      class="material-gsm__content-title mdc-typography--headline3"
+      class="material-gsm__content-title headline-medium"
     >
       Build with Material Blocks
     </h2>
-    <p>
+    <p
+      class="body-large"
+    >
       Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.
     </p>
     <img
diff --git a/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap b/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap
index c3480aebb..1f913358d 100644
--- a/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap
+++ b/plugin/tests/js/getting-started/components/__snapshots__/wizard.test.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <h2
-        class="material-gsm__content-title mdc-typography--headline3"
+        class="material-gsm__content-title headline-small"
       >
         Install the Material Design Theme and quick start examples
       </h2>
@@ -48,7 +48,7 @@ Object {
   </body>,
   "container": <div>
     <h2
-      class="material-gsm__content-title mdc-typography--headline3"
+      class="material-gsm__content-title headline-small"
     >
       Install the Material Design Theme and quick start examples
     </h2>
diff --git a/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap b/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap
index 6fe0e6430..2200c552c 100644
--- a/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/getting-started/components/navigation/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ Object {
           class="material-gsm__heading"
         >
           <div
-            class="mdc-typography--headline6"
+            class="title-large"
           >
             Getting Started
           </div>
@@ -107,7 +107,7 @@ Object {
         class="material-gsm__heading"
       >
         <div
-          class="mdc-typography--headline6"
+          class="title-large"
         >
           Getting Started
         </div>
diff --git a/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap b/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap
index 2477ee745..cc8c85624 100644
--- a/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap
+++ b/plugin/tests/js/settings/components/integrations/__snapshots__/updater.test.js.snap
@@ -15,12 +15,12 @@ exports[`Settings: Updater matches snapshot 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="mdc-typography--headline6"
+            class="title-large"
           >
             Google Fonts
           </h3>
           <p
-            class="mdc-typography--body1"
+            class="body-large"
           >
             Last update on Tue, 13 Apr 2021 14:58:26 GMT
           </p>
@@ -101,12 +101,12 @@ exports[`Settings: Updater matches snapshot when disabled 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="mdc-typography--headline6"
+            class="title-large"
           >
             Google Fonts
           </h3>
           <p
-            class="mdc-typography--body1"
+            class="body-large"
           >
             To enable Google Fonts updates please 
             <a
@@ -162,12 +162,12 @@ exports[`Settings: Updater matches snapshot when never updated 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="mdc-typography--headline6"
+            class="title-large"
           >
             Google Fonts
           </h3>
           <p
-            class="mdc-typography--body1"
+            class="body-large"
           >
             Last update on never
           </p>
@@ -248,12 +248,12 @@ exports[`Settings: Updater matches snapshot when should not update 1`] = `
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="mdc-typography--headline6"
+            class="title-large"
           >
             Google Fonts
           </h3>
           <p
-            class="mdc-typography--body1"
+            class="body-large"
           >
             Last update on Tue, 13 Apr 2021 14:58:26 GMT
           </p>
diff --git a/plugin/tests/js/wizard/__snapshots__/index.test.js.snap b/plugin/tests/js/wizard/__snapshots__/index.test.js.snap
index ef357244e..8aee05e6d 100644
--- a/plugin/tests/js/wizard/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/wizard/__snapshots__/index.test.js.snap
@@ -33,7 +33,7 @@ exports[`Onboarding Wizard matches snapshot 1`] = `
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-11 mdc-layout-grid__cell--align-middle"
           >
             <h2
-              class="mdc-typography--headline5"
+              class="title-large"
             >
               Material Design for WordPress
             </h2>
@@ -189,7 +189,7 @@ exports[`Onboarding Wizard matches snapshot 1`] = `
                 class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
               >
                 <h3
-                  class="mdc-typography--headline3"
+                  class="headline-medium"
                 >
                   Start building
                 </h3>
diff --git a/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap b/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap
index 772a082dc..d690424d9 100644
--- a/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap
+++ b/plugin/tests/js/wizard/components/content/__snapshots__/addons.test.js.snap
@@ -9,7 +9,7 @@ Object {
         class="mdc-layout-grid__cell--span-12"
       >
         <h3
-          class="mdc-typography--headline3 material-wizard__title"
+          class="headline-medium material-wizard__title"
         >
           Install addons
         </h3>
@@ -28,7 +28,7 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
             >
               Material Design Theme
             </h4>
@@ -79,7 +79,7 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h4
-              class="mdc-typography--headline4"
+              class="headline-small"
             >
               Quick Start Examples
             </h4>
@@ -121,7 +121,7 @@ Object {
       class="mdc-layout-grid__cell--span-12"
     >
       <h3
-        class="mdc-typography--headline3 material-wizard__title"
+        class="headline-medium material-wizard__title"
       >
         Install addons
       </h3>
@@ -140,7 +140,7 @@ Object {
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
           >
             Material Design Theme
           </h4>
@@ -191,7 +191,7 @@ Object {
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h4
-            class="mdc-typography--headline4"
+            class="headline-small"
           >
             Quick Start Examples
           </h4>
diff --git a/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap b/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap
index 12e9c5240..443278687 100644
--- a/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap
+++ b/plugin/tests/js/wizard/components/content/__snapshots__/index.test.js.snap
@@ -26,7 +26,7 @@ Object {
               class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
             >
               <h3
-                class="mdc-typography--headline3"
+                class="headline-medium"
               >
                 Start building
               </h3>
@@ -61,7 +61,7 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h3
-              class="mdc-typography--headline3"
+              class="headline-medium"
             >
               Start building
             </h3>
diff --git a/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap b/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap
index a831a5eae..19eaf2997 100644
--- a/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap
+++ b/plugin/tests/js/wizard/components/content/__snapshots__/works.test.js.snap
@@ -23,14 +23,16 @@ Object {
             class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
           >
             <h3
-              class="mdc-typography--headline3"
+              class="headline-medium"
             >
               Congrats!
             </h3>
             <p>
               You've installed Material. Click "Finish" and check out the rest of the Getting Started guide to customize your theme, build with Material Blocks, and apply the theme to your site.
             </p>
-            <p>
+            <p
+              class="body-large"
+            >
               Learn about the concepts behind material Design
             </p>
             <div
@@ -54,7 +56,9 @@ Object {
                 </i>
               </a>
             </div>
-            <p>
+            <p
+              class="body-large"
+            >
               Sign up to get updates and news about material design via email
             </p>
             <div
@@ -102,14 +106,16 @@ Object {
           class="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle"
         >
           <h3
-            class="mdc-typography--headline3"
+            class="headline-medium"
           >
             Congrats!
           </h3>
           <p>
             You've installed Material. Click "Finish" and check out the rest of the Getting Started guide to customize your theme, build with Material Blocks, and apply the theme to your site.
           </p>
-          <p>
+          <p
+            class="body-large"
+          >
             Learn about the concepts behind material Design
           </p>
           <div
@@ -133,7 +139,9 @@ Object {
               </i>
             </a>
           </div>
-          <p>
+          <p
+            class="body-large"
+          >
             Sign up to get updates and news about material design via email
           </p>
           <div
diff --git a/plugin/tests/js/wizard/components/header/index.test.js b/plugin/tests/js/wizard/components/header/index.test.js
index 44b05d653..0305dccbb 100644
--- a/plugin/tests/js/wizard/components/header/index.test.js
+++ b/plugin/tests/js/wizard/components/header/index.test.js
@@ -35,17 +35,17 @@ describe( 'Header', () => {
 	it( 'should render title', () => {
 		const { container } = setup();
 
-		expect(
-			container.querySelectorAll( '.mdc-typography--headline5' )
-		).toHaveLength( 1 );
+		expect( container.querySelectorAll( '.title-large' ) ).toHaveLength(
+			1
+		);
 	} );
 
 	it( 'should render title text', () => {
 		const { container } = setup();
 
-		expect(
-			container.querySelector( '.mdc-typography--headline5' )
-		).toHaveTextContent( 'Material Design for WordPress' );
+		expect( container.querySelector( '.title-large' ) ).toHaveTextContent(
+			'Material Design for WordPress'
+		);
 	} );
 
 	it( 'should render logo', () => {
diff --git a/plugin/tests/phpunit/php/class-test-blocks-frontend.php b/plugin/tests/phpunit/php/class-test-blocks-frontend.php
index c324ecec0..5aa6b25f4 100644
--- a/plugin/tests/phpunit/php/class-test-blocks-frontend.php
+++ b/plugin/tests/phpunit/php/class-test-blocks-frontend.php
@@ -67,15 +67,15 @@ public static function generate_fixtures( $factory ) {
 				<!-- /wp:material/image-list -->
 
 				<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8}],"gutter":{"desktop":24,"tablet":16,"mobile":10},"cornerRadius":8,"outlined":true} -->
-				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
+				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
 				<!-- /wp:material/cards-collection -->
 
 				<!-- wp:material/cards-collection {"style":"grid","cardsProps":[{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8},{"contentLayout":"text-under-media","title":"Title goes here","displayTitle":true,"secondaryText":"Secondary text","displaySecondaryText":true,"imageSourceUrl":"","isImageEditMode":false,"displayImage":true,"supportingText":"Supporting text","displaySupportingText":true,"primaryActionButtonLabel":"Button text","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"Button text","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":true,"cornerRadius":8}],"gutter":{"desktop":24,"tablet":16,"mobile":10},"cornerRadius":8,"outlined":true} -->
-				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-2"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title goes here</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
+				<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-2"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card mdc-card--outlined" style="border-radius:8px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url()"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Title goes here</h2><h3 class="material-design-card__secondary-text label-medium">Secondary text</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Supporting text</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Button text</span></a></div></div></div></div></div></div></div>
 				<!-- /wp:material/cards-collection -->
 
 				<!-- wp:material/tab-bar {"forceUpdate":false,"tabs":[{"label":"Tab 1","content":[{"clientId":"e94ec7ee-937c-4f21-a06a-38da3da2e52c","name":"material/image-list","isValid":true,"attributes":{"images":[{"id":261,"url":"http://example.com/image1.png","alt":"","link":"http://localhost:8088/?attachment_id=261","caption":"","selected":false},{"id":260,"url":"http://example.com/image3.png","alt":"","link":"http://localhost:8088/?attachment_id=260","caption":"","selected":false},{"id":259,"url":"http://example.com/image2.png","alt":"","link":"http://localhost:8088/?attachment_id=259","caption":"","selected":false},{"id":258,"url":"http://example.com/image4.png","alt":"","link":"http://localhost:8088/?attachment_id=258","caption":"","selected":false},{"id":257,"url":"http://example.com/image5.png","alt":"","link":"http://localhost:8088/?attachment_id=257","caption":"","selected":false},{"id":256,"url":"http://example.com/image6.png","alt":"","link":"http://localhost:8088/?attachment_id=256","caption":"","selected":false},{"id":5,"url":"http://example.com/image7.png","alt":"","link":"http://localhost:8088/?attachment_id=5","caption":"","selected":false}],"style":"masonry","columns":2,"gutter":{"desktop":24,"tablet":16,"mobile":16},"displayCaptions":true,"textProtection":true,"linkTo":"media","cornerRadius":4,"id":"block-material-image-list-10"},"innerBlocks":[]}]},{"label":"Tab 2","content":[{"clientId":"e09ca06b-a7ad-4f9c-a3e3-55b61c821397","name":"material/contact-form","isValid":true,"attributes":{"emailTo":"admin@admin.local","subject":"This e-mail was sent from a contact form on Material Theming","confirmationMessage":"Your request has been successfully submitted","outlined":true,"fullWidth":true},"innerBlocks":[{"clientId":"8585c3e1-5589-44c3-ac63-1efe6cc554a6","name":"material/name-input-field","isValid":true,"attributes":{"inputType":"text","inputRole":"name","label":"Name","isRequired":true,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-name-1"},"innerBlocks":[]},{"clientId":"6e3fdd90-60ea-4b13-a7ad-8b8b1e894a5e","name":"material/email-input-field","isValid":true,"attributes":{"inputType":"email","inputRole":"email","label":"Email","isRequired":true,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-email-3"},"innerBlocks":[]},{"clientId":"01b78109-af15-4bee-97ae-7fe9c1ff7a53","name":"material/website-input-field","isValid":true,"attributes":{"inputType":"url","inputRole":"website","label":"Website","isRequired":false,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-website-5"},"innerBlocks":[]},{"clientId":"a3f92d5d-7ec3-4799-a0b6-45c3dc221e7f","name":"material/message-input-field","isValid":true,"attributes":{"label":"Message","inputRole":"message","isRequired":true,"outlined":true,"fullWidth":true,"displayLabel":true,"id":"material-design-message-1"},"innerBlocks":[]},{"clientId":"10847ef6-fe53-4987-925b-e97524fe8c15","name":"material/button","isValid":true,"attributes":{"label":"Submit","type":"text","style":"unelevated","iconPosition":"leading","url":"","rel":"","isSubmit":true,"icon":"spa","cornerRadius":4},"innerBlocks":[]}]}]}]} -->
-				<div class="wp-block-material-tab-bar mdc-tab-bar-container"><div class="mdc-tab-bar" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll"><div class="mdc-tab-scroller__scroll-content"><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--active"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 1</span></span></span><span class="mdc-tab-indicator mdc-tab-indicator--active"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div><div role="tab" tabindex="0" class="mdc-tab tab"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 2</span></span></span><span class="mdc-tab-indicator"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div></div></div></div></div><div><div class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"><div class="wp-block-material-image-list" id="block-material-image-list-10"><ul class="mdc-image-list mdc-image-list--masonry mdc-image-list--with-text-protection"><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image1.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image1.png" data-id="261" data-link="http://localhost:8088/?attachment_id=261"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image3.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image3.png" data-id="260" data-link="http://localhost:8088/?attachment_id=260"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image2.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image2.png" data-id="259" data-link="http://localhost:8088/?attachment_id=259"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image4.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image4.png" data-id="258" data-link="http://localhost:8088/?attachment_id=258"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image5.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image5.png" data-id="257" data-link="http://localhost:8088/?attachment_id=257"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image6.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image6.png" data-id="256" data-link="http://localhost:8088/?attachment_id=256"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image7.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image7.png" data-id="5" data-link="http://localhost:8088/?attachment_id=5"/></a></li></ul></div></div><div class="mdc-tab-content mdc-typography--body1"><div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-1","outlined":true} -->
+				<div class="wp-block-material-tab-bar mdc-tab-bar-container"><div class="mdc-tab-bar" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll"><div class="mdc-tab-scroller__scroll-content"><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--active"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 1</span></span></span><span class="mdc-tab-indicator mdc-tab-indicator--active"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div><div role="tab" tabindex="0" class="mdc-tab tab"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">Tab 2</span></span></span><span class="mdc-tab-indicator"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div></div></div></div></div><div><div class="mdc-tab-content body-large mdc-tab-content--active"><div class="wp-block-material-image-list" id="block-material-image-list-10"><ul class="mdc-image-list mdc-image-list--masonry mdc-image-list--with-text-protection"><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image1.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image1.png" data-id="261" data-link="http://localhost:8088/?attachment_id=261"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image3.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image3.png" data-id="260" data-link="http://localhost:8088/?attachment_id=260"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image2.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image2.png" data-id="259" data-link="http://localhost:8088/?attachment_id=259"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image4.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image4.png" data-id="258" data-link="http://localhost:8088/?attachment_id=258"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image5.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image5.png" data-id="257" data-link="http://localhost:8088/?attachment_id=257"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image6.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image6.png" data-id="256" data-link="http://localhost:8088/?attachment_id=256"/></a></li><li class="mdc-image-list__item" role="presentation"><a class="mdc-image-list__item-wrap" href="http://example.com/image7.png"><img class="mdc-image-list__image" alt="" src="http://example.com/image7.png" data-id="5" data-link="http://localhost:8088/?attachment_id=5"/></a></li></ul></div></div><div class="mdc-tab-content body-large"><div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-1","outlined":true} -->
 				<div class="mdc-text-field-container"><div class="mdc-text-field mdc-text-field--outlined mdc-text-field--custom-full"><input id="material-design-name-1" name="material-design-name-1" type="text" required class="mdc-text-field__input" aria-labelledby="label-material-design-name-1" data-form="contact" data-meta="name" data-label="Name"/><div class="mdc-notched-outline"><div class="mdc-notched-outline__leading"></div><div class="mdc-notched-outline__notch"><label for="material-design-name-1" class="mdc-floating-label" id="label-material-design-name-1">Name</label></div><div class="mdc-notched-outline__trailing"></div></div></div></div>
 				<!-- /wp:material/name-input-field -->
 				<!-- wp:material/email-input-field {"id":"material-design-email-3","outlined":true} -->
diff --git a/plugin/tests/phpunit/php/class-test-importer.php b/plugin/tests/phpunit/php/class-test-importer.php
index 0c2de797b..32db4d769 100644
--- a/plugin/tests/phpunit/php/class-test-importer.php
+++ b/plugin/tests/phpunit/php/class-test-importer.php
@@ -176,7 +176,7 @@ public function test_kses_post() {
 
 		$this->assertEquals( $content, $this->importer->kses_post( $content ) );
 
-		$content = '<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>';
+		$content = '<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="mdc-layout-grid layout-grid"><div class="mdc-layout-grid__inner"><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Nulla libero ex</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Praesent non convallis tortor. Sed bibendum mauris vel nunc gravida ultrices. Sed elementum augue quis maximus ultrices quisque.</div></div></div></div><div class="card-container mdc-layout-grid__cell--span-6"><div class="mdc-card material-design-card" style="border-radius:4px"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media" style="background-image:url(/wp-content/plugins/material-design/assets/images/featured.png)"></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Praesent non convallis</h2></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Nullam suscipit, quam eget hendrerit dignissim, ante urna cursus felis, sit amet volutpat mauris arcu eget ante. Sed bibendum mauris vel nunc gravida ultrices.</div></div></div></div></div></div></div>';
 
 		$this->assertEquals( $content, $this->importer->kses_post( $content ) );
 	}
diff --git a/plugin/tests/phpunit/php/customizer/class-test-controls.php b/plugin/tests/phpunit/php/customizer/class-test-controls.php
index 41c029618..6f7dd61a6 100644
--- a/plugin/tests/phpunit/php/customizer/class-test-controls.php
+++ b/plugin/tests/phpunit/php/customizer/class-test-controls.php
@@ -314,29 +314,34 @@ public function test_add_typography_controls() {
 
 		// Set up the expectation for the add_setting() method
 		// to be called.
-		$this->wp_customize->expects( $this->exactly( 15 ) )
+		$this->wp_customize->expects( $this->exactly( 20 ) )
 			->method( 'add_setting' )
 			->withConsecutive(
-				[ $this->equalTo( "{$controls->slug}[head_font_family]" ) ],
+				[ $this->equalTo( "{$controls->slug}[display_font_family]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_font_family]" ) ],
+				[ $this->equalTo( "{$controls->slug}[title_font_family]" ) ],
+				[ $this->equalTo( "{$controls->slug}[label_font_family]" ) ],
 				[ $this->equalTo( "{$controls->slug}[body_font_family]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_1]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_2]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_3]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_4]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_5]" ) ],
-				[ $this->equalTo( "{$controls->slug}[headline_6]" ) ],
-				[ $this->equalTo( "{$controls->slug}[subtitle_1]" ) ],
-				[ $this->equalTo( "{$controls->slug}[subtitle_2]" ) ],
-				[ $this->equalTo( "{$controls->slug}[body1]" ) ],
-				[ $this->equalTo( "{$controls->slug}[body2]" ) ],
-				[ $this->equalTo( "{$controls->slug}[button]" ) ],
-				[ $this->equalTo( "{$controls->slug}[caption]" ) ],
-				[ $this->equalTo( "{$controls->slug}[overline]" ) ]
+				[ $this->equalTo( "{$controls->slug}[display_large]" ) ],
+				[ $this->equalTo( "{$controls->slug}[display_medium]" ) ],
+				[ $this->equalTo( "{$controls->slug}[display_small]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_large]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_medium]" ) ],
+				[ $this->equalTo( "{$controls->slug}[headline_small]" ) ],
+				[ $this->equalTo( "{$controls->slug}[title_large]" ) ],
+				[ $this->equalTo( "{$controls->slug}[title_medium]" ) ],
+				[ $this->equalTo( "{$controls->slug}[title_small]" ) ],
+				[ $this->equalTo( "{$controls->slug}[label_large]" ) ],
+				[ $this->equalTo( "{$controls->slug}[label_medium]" ) ],
+				[ $this->equalTo( "{$controls->slug}[label_small]" ) ],
+				[ $this->equalTo( "{$controls->slug}[body_large]" ) ],
+				[ $this->equalTo( "{$controls->slug}[body_medium]" ) ],
+				[ $this->equalTo( "{$controls->slug}[body_small]" ) ]
 			);
 
 		// Set up the expectation for the add_control() method
 		// to be called.
-		$this->wp_customize->expects( $this->exactly( 15 ) )
+		$this->wp_customize->expects( $this->exactly( 20 ) )
 			->method( 'add_control' )
 			->withConsecutive(
 				[
@@ -570,7 +575,7 @@ public function test_get_google_fonts_url() {
 
 		// Add filters to return `Raleway` for headings and `Open Sans` for body.
 		add_filter(
-			"{$controls->slug}_get_option_head_font_family",
+			"{$controls->slug}_get_option_headline_font_family",
 			function () {
 				return 'Raleway';
 			}
@@ -584,7 +589,7 @@ function () {
 		);
 
 		// Assert we get updated fonts.
-		$this->assertEquals( $controls->get_google_fonts_url(), '//fonts.googleapis.com/css?family=Material+Icons|Raleway:100,400,500|Open+Sans:400,500' );
+		$this->assertEquals( '//fonts.googleapis.com/css?family=Material+Icons|Roboto:300,400,500|Raleway:300,400|Open+Sans:400', $controls->get_google_fonts_url() );
 	}
 
 	/**
@@ -639,19 +644,25 @@ public function test_get_frontend_css() {
 		$this->assertContains( '--mdc-theme-surface-mix-4: #f5f5f5;', $css );
 		$this->assertContains( '--mdc-theme-surface-mix-12: #e0e0e0;', $css );
 
-		$this->assertContains( '--mdc-typography-headline1-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-headline2-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-headline3-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-headline4-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-headline5-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-headline6-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-body1-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-body2-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-caption-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-button-font-family: "Roboto", sans-serif;', $css );
-		$this->assertContains( '--mdc-typography-overline-font-family: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-title-large-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-title-medium-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-title-small-font: "Roboto", sans-serif;', $css );
+
+		$this->assertContains( '--md-sys-typescale-display-large-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-display-medium-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-display-small-font: "Roboto", sans-serif;', $css );
+
+		$this->assertContains( '--md-sys-typescale-label-large-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-label-medium-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-label-small-font: "Roboto", sans-serif;', $css );
+
+		$this->assertContains( '--md-sys-typescale-headline-large-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-headline-medium-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-headline-small-font: "Roboto", sans-serif;', $css );
+
+		$this->assertContains( '--md-sys-typescale-body-large-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-body-medium-font: "Roboto", sans-serif;', $css );
+		$this->assertContains( '--md-sys-typescale-body-small-font: "Roboto", sans-serif;', $css );
 
 		$this->assertContains( '--mdc-button-radius: 4px;', $css );
 		$this->assertContains( '--mdc-card-radius: 4px;', $css );
@@ -692,7 +703,7 @@ public function test_get_default() {
 		$baseline = $controls->get_design_styles()['baseline'];
 
 		$this->assertEquals( $controls->get_default( 'primary_color' ), $baseline['primary_color'] );
-		$this->assertEquals( $controls->get_default( 'head_font_family' ), $baseline['head_font_family'] );
+		$this->assertEquals( $controls->get_default( 'body_font_family' ), $baseline['body_font_family'] );
 		$this->assertEquals( $controls->get_default( 'button_radius' ), $baseline['button_radius'] );
 		$this->assertEquals( $controls->get_default( 'card_radius' ), $baseline['card_radius'] );
 		$this->assertEquals( $controls->get_default( 'data_table_radius' ), $baseline['data_table_radius'] );
diff --git a/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php b/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php
index 29cc66bc7..7c5bf5ec2 100644
--- a/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php
+++ b/plugin/tests/phpunit/php/rest/class-test-reset-card-style-rest-controller.php
@@ -115,7 +115,7 @@ public function test_migrate_posts() {
 <!-- /wp:heading -->
 
 <!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"btn","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":"global","title":"Title card","secondaryText":"Title card","supportingText":"Title card","cardStyle":"elevated"},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-021abc4ab788.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"btn","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"outlined":"global","supportingText":"Title card","secondaryText":"Title card","title":"Title card","cardStyle":"elevated"}],"cardStyle":"elevated"} -->
-<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title card</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-021abc4ab788.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">Title card</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div></div></div>
+<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-1"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">Title card</h2><h3 class="material-design-card__secondary-text label-medium">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-021abc4ab788.jpeg" alt="Title card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-medium">Title card</h2><h3 class="material-design-card__secondary-text label-medium">Title card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">Title card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">btn</span></a></div></div></div></div></div></div></div>
 <!-- /wp:material/cards-collection -->
 
 <!-- wp:heading {"level":3} -->
@@ -129,7 +129,7 @@ public function test_migrate_posts() {
 <!-- /wp:heading -->
 
 <!-- wp:material/card {"title":"card","secondaryText":"card","imageSourceUrl":"http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg","isImageEditMode":false,"supportingText":"card","primaryActionButtonLabel":"BTN","cardStyle":"outlined"} -->
-<div class="wp-block-material-card"><div class="mdc-card mdc-card--outlined material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">card</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">BTN</span></a></div></div></div></div>
+<div class="wp-block-material-card"><div class="mdc-card mdc-card--outlined material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://localhost:8088/wp-content/uploads/2021/04/material-demo-photo-1558906217-200fade11db0.jpeg" alt="card"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title title-large">card</h2><h3 class="material-design-card__secondary-text label-medium">card</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media body-medium">card</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">BTN</span></a></div></div></div></div>
 <!-- /wp:material/card -->',
 			]
 		);
diff --git a/theme/404.php b/theme/404.php
index 912771cc6..33796cb11 100644
--- a/theme/404.php
+++ b/theme/404.php
@@ -33,7 +33,7 @@
 
 			<section class="error-404 not-found">
 				<header class="page-header">
-					<h1 class="page-title mdc-typography--headline2"><?php esc_html_e( 'Page not found.', 'material-design-google' ); ?></h1>
+					<h1 class="page-title headline-large"><?php esc_html_e( 'Page not found.', 'material-design-google' ); ?></h1>
 				</header><!-- .page-header -->
 
 				<div class="page-content">
diff --git a/theme/archive.php b/theme/archive.php
index 0fdb96bfc..883335bae 100644
--- a/theme/archive.php
+++ b/theme/archive.php
@@ -40,8 +40,8 @@
 
 			<header class="page-header">
 				<?php
-				the_archive_title( '<h1 class="page-title mdc-typography mdc-typography--headline1">', '</h1>' );
-				the_archive_description( '<div class="archive-description mdc-typography mdc-typography--body1">', '</div>' );
+				the_archive_title( '<h1 class="page-title display-small">', '</h1>' );
+				the_archive_description( '<div class="archive-description body-large">', '</div>' );
 				?>
 			</header><!-- .page-header -->
 
diff --git a/theme/assets/css/src/base/typography.css b/theme/assets/css/src/base/typography.css
index b5508469c..5e8f9a968 100644
--- a/theme/assets/css/src/base/typography.css
+++ b/theme/assets/css/src/base/typography.css
@@ -16,13 +16,51 @@
 
 /**
  * Material typography styles for html elements.
- * see https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L57
+ * See https://github.com/material-foundation/material-tokens/blob/325df4f3d53fa748298d9f3650ed9cdb951f8af4/css/typography.css
  **/
-@mixin selector-typography h1, headline1, 6, 6, 300;
-@mixin selector-typography h2, headline2, 3.75, 3.75, 300;
-@mixin selector-typography h3, headline3, 3, 3.125, 400;
-@mixin selector-typography h4, headline4, 2.125, 2.5, 400;
-@mixin selector-typography h5, headline5, 1.5, 2, 400;
-@mixin selector-typography h6, headline6, 1.25, 2, 500;
-@mixin selector-typography p, body1, 1, 1.5, 400;
-@mixin selector-typography figcaption, subtitle1, 1, 1.75, 400;
+@mixin selector-typography h1, display-small, 6, 6, 300;
+@mixin selector-typography h2, headline-large, 3.75, 3.75, 300;
+@mixin selector-typography h3, headline-medium, 3, 3.125, 400;
+@mixin selector-typography h4, headline-small, 2.125, 2.5, 400;
+@mixin selector-typography h5, title-large, 1.5, 2, 400;
+@mixin selector-typography h6, title-medium, 1.25, 2, 500;
+@mixin selector-typography p, body-large, 1, 1.5, 400;
+@mixin selector-typography figcaption, label-large, 1, 1.75, 400;
+
+/* Add typography m3 classes. */
+@mixin typography display-large, 7.5, 6, 300;
+@mixin typography display-medium, 6.875, 6, 300;
+@mixin typography display-small, 6, 6, 300;
+@mixin typography headline-large, 3.75, 3.75, 300;
+@mixin typography headline-medium, 3, 3.125, 400;
+@mixin typography headline-small, 2.125, 2.5, 400;
+@mixin typography title-large, 1.5, 2, 400;
+@mixin typography title-medium, 1.25, 2, 500;
+@mixin typography title-small, 0.875, 1.57, 500;
+@mixin typography label-large, 1, 1.75, 400;
+@mixin typography label-medium, 0.875, 1.375, 500;
+@mixin typography label-small, 0.75, 2, 500;
+@mixin typography body-large, 1, 1.5, 400;
+@mixin typography body-medium, 0.875, 1.25, 400;
+@mixin typography body-small, 0.75, 1.25, 400;
+
+/** Backward compatibility for old typography classes. */
+@mixin selector-typography .mdc-typography--headline1, display-small, 6, 6, 300;
+@mixin selector-typography .mdc-typography--headline2, headline-large, 3.75, 3.75, 300;
+@mixin selector-typography .mdc-typography--headline3, headline-medium, 3, 3.125, 400;
+@mixin selector-typography .mdc-typography--headline4, headline-small, 2.125, 2.5, 400;
+@mixin selector-typography .mdc-typography--headline5, title-large, 1.5, 2, 400;
+@mixin selector-typography .mdc-typography--headline6, title-medium, 1.25, 2, 500;
+@mixin selector-typography .mdc-typography--subhead1, title-medium, 1.25, 2, 500;
+@mixin selector-typography .mdc-typography--subhead2, title-small, 0.875, 1.57, 500;
+@mixin selector-typography .mdc-typography--body1, body-large, 1, 1.5, 400;
+@mixin selector-typography .mdc-typography--body2, body-medium, 0.875, 1.25, 400;
+@mixin selector-typography .mdc-typography--caption, body-small, 0.75, 1.25, 400;
+@mixin selector-typography .mdc-typography--button, label-large, 1, 1.75, 400;
+@mixin selector-typography .mdc-typography--overline, label-medium, 0.875, 1.375, 500;
+@mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400;
+@mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500;
+
+/* Backward compat: For `body` types typography should be applied to child elements as well */
+@mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400;
+@mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400;
diff --git a/theme/assets/css/src/components/top-app-bar.css b/theme/assets/css/src/components/top-app-bar.css
index 5269062b7..3cd2d15a1 100644
--- a/theme/assets/css/src/components/top-app-bar.css
+++ b/theme/assets/css/src/components/top-app-bar.css
@@ -103,7 +103,7 @@
 		color: var(--mdc-theme-on-header, var(--mdc-theme-on-primary, #fff));
 		max-width: 48px;
 		min-width: auto;
-		--mdc-typography-button-font-size: 24px;
+		--md-sys-typescale-label-large-size: 24px;
 
 		&:focus {
 			outline: 1px dotted;
diff --git a/theme/assets/css/src/conf/mixins.css b/theme/assets/css/src/conf/mixins.css
index a7fcfe02b..c16973fac 100644
--- a/theme/assets/css/src/conf/mixins.css
+++ b/theme/assets/css/src/conf/mixins.css
@@ -17,31 +17,31 @@
 /* stylelint-disable */
 
 @define-mixin fontvars $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $tracking: 0.25, $font-style: normal {
-	--mdc-typography-$(type)-font-size: calc($font-size * 16)px;
-	--mdc-typography-$(type)-line-height: $line-height;
-	--mdc-typography-$(type)-font-style: $font-style;
-	--mdc-typography-$(type)-font-weight: $font-weight;
-	--mdc-typography-$(type)-letter-spacing: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
+	--md-sys-typescale-$(type)-size: calc($font-size * 16)px;
+	--md-sys-typescale-$(type)-line-height: $line-height;
+	--md-sys-typescale-$(type)-style: $font-style;
+	--md-sys-typescale-$(type)-weight: $font-weight;
+	--md-sys-typescale-$(type)-tracking: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
 }
 
 @define-mixin typography $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
-.mdc-typography--$type $child {
-	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em);
-	line-height: var(--mdc-typography-$(type)-line-height, $(line-height));
-	font-style: var(--mdc-typography-$(type)-font-style, $font-style);
-	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight);
-	letter-spacing: var(--mdc-typography-$(type)-letter-spacing);
-}
+	.$type $child {
+		font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
+		font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
+		line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
+		font-style: var(--md-sys-typescale-$(type)-style, $font-style);
+		font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
+		letter-spacing: var(--md-sys-typescale-$(type)-tracking);
+	}
 }
 
 @define-mixin selector-typography $selector, $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
 $selector $child {
-	font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-	font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em);
-	line-height: var(--mdc-typography-$(type)-line-height, $(line-height));
-	font-style: var(--mdc-typography-$(type)-font-style, $font-style);
-	font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight);
-	letter-spacing: var(--mdc-typography-$(type)-letter-spacing);
+	font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
+	font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
+	line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
+	font-style: var(--md-sys-typescale-$(type)-style, $font-style);
+	font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
+	letter-spacing: var(--md-sys-typescale-$(type)-tracking);
 }
 }
diff --git a/theme/assets/css/src/conf/variables.css b/theme/assets/css/src/conf/variables.css
index b2f753812..d80dd0609 100644
--- a/theme/assets/css/src/conf/variables.css
+++ b/theme/assets/css/src/conf/variables.css
@@ -29,17 +29,19 @@
 	--back-to-top-boder: var(--mdc-theme-primary, #18191a);
 	--outline-color: rgb(0, 95, 204);
 
-	@mixin fontvars headline1, 6, 1, 300, -1.5;
-	@mixin fontvars headline2, 3.75, 1, 300, -.5;
-	@mixin fontvars headline3, 3, 1.04, 400, 0;
-	@mixin fontvars headline4, 2.125, 1.18, 400, .25;
-	@mixin fontvars headline5, 1.5, 1.33, 400, 0;
-	@mixin fontvars headline6, 1.25, 1.6, 500, 0.15;
-	@mixin fontvars subtitle1, 1, 1.75, 400, .15;
-	@mixin fontvars subtitle2, 0.875, 1.57, 500, .1;
-	@mixin fontvars body1, 1, 1.5, 400, .5;
-	@mixin fontvars body2, 0.875, 1.43, 400, .25;
-	@mixin fontvars caption, 0.75, 1.67, 400, .4;
-	@mixin fontvars button, 0.875, 2.57, 500, 1.25;
-	@mixin fontvars overline, 0.75, 2.67, 500, 1.5;
+	@mixin fontvars display-small, 6, 1, 300, -1.5;
+	@mixin fontvars headline-large, 3.75, 1, 300, -.5;
+	@mixin fontvars headline-medium, 3, 1.04, 400, 0;
+	@mixin fontvars headline-small, 2.125, 1.18, 400, .25;
+	@mixin fontvars title-large, 1.5, 1.33, 400, 0;
+
+	/* @mixin fontvars title-medium, 1.25, 1.6, 500, 0.15; */
+
+	@mixin fontvars title-medium, 1, 1.75, 400, .15;
+	@mixin fontvars title-small, 0.875, 1.57, 500, .1;
+	@mixin fontvars body-large, 1, 1.5, 400, .5;
+	@mixin fontvars body-medium, 0.875, 1.43, 400, .25;
+	@mixin fontvars body-small, 0.75, 1.67, 400, .4;
+	@mixin fontvars label-large, 0.875, 2.57, 500, 1.25;
+	@mixin fontvars label-medium, 0.75, 2.67, 500, 1.5;
 }
diff --git a/theme/assets/css/src/editor.css b/theme/assets/css/src/editor.css
index 484ab3223..ca249bf20 100644
--- a/theme/assets/css/src/editor.css
+++ b/theme/assets/css/src/editor.css
@@ -16,9 +16,9 @@
 
 @import "./conf/variables.css";
 @import "./base/typography.css";
-@mixin selector-typography .wp-block div, body1;
-@mixin selector-typography p, body1;
-@mixin selector-typography .editor-post-title__input, headline2, 6, 6, 300;
+@mixin selector-typography .wp-block div, body-large;
+@mixin selector-typography p, body-large;
+@mixin selector-typography .editor-post-title__input, headline-large, 6, 6, 300;
 
 body {
 	background: var(--mdc-theme-background, #fff);
diff --git a/theme/assets/css/src/material-components.css b/theme/assets/css/src/material-components.css
index de7a1c92e..525df4546 100644
--- a/theme/assets/css/src/material-components.css
+++ b/theme/assets/css/src/material-components.css
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-@import "@material/typography/dist/mdc.typography.css";
 @import "@material/button/dist/mdc.button.css";
 @import "@material/top-app-bar/dist/mdc.top-app-bar.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
diff --git a/theme/comments.php b/theme/comments.php
index 9e2130288..5d993840e 100644
--- a/theme/comments.php
+++ b/theme/comments.php
@@ -56,7 +56,7 @@
 
 $args = [
 	'title_reply'        => __( 'Leave a comment', 'material-design-google' ),
-	'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title mdc-typography--headline4">',
+	'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title headline-small">',
 	'title_reply_after'  => '</h2>',
 	'fields'             => [
 		'author' => sprintf(
@@ -163,7 +163,7 @@ class="mdc-checkbox__native-control"
 	if ( have_comments() ) :
 		$count = get_comments_number();
 		?>
-		<h2 class="comments-title mdc-typography--headline4">
+		<h2 class="comments-title headline-small">
 			<?php esc_html_e( 'Join the conversation', 'material-design-google' ); ?>
 		</h2><!-- .comments-title -->
 		<div class="comments-title-count">
diff --git a/theme/functions.php b/theme/functions.php
index 5f92da245..9f96c35cd 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -137,7 +137,7 @@ function material_design_theme_widgets_init() {
 			'description'   => esc_html__( 'Footer left area.', 'material-design-google' ),
 			'before_widget' => '<section id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</section>',
-			'before_title'  => '<h2 class="widget-title mdc-typography--headline5">',
+			'before_title'  => '<h2 class="widget-title title-large">',
 			'after_title'   => '</h2>',
 		]
 	);
@@ -149,7 +149,7 @@ function material_design_theme_widgets_init() {
 			'description'   => esc_html__( 'Footer right area.', 'material-design-google' ),
 			'before_widget' => '<section id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</section>',
-			'before_title'  => '<h2 class="widget-title mdc-typography--headline5">',
+			'before_title'  => '<h2 class="widget-title title-large">',
 			'after_title'   => '</h2>',
 		]
 	);
diff --git a/theme/inc/class-walker-comment.php b/theme/inc/class-walker-comment.php
index a39015d18..3f1a9a27a 100644
--- a/theme/inc/class-walker-comment.php
+++ b/theme/inc/class-walker-comment.php
@@ -64,11 +64,11 @@ protected function html5_comment( $comment, $depth, $args ) {
 				</div><!-- .comment-author-avatar -->
 
 				<div class="comment-content">
-					<h3 class="comment-author vcard mdc-typography--body1">
+					<h3 class="comment-author vcard body-large">
 						<?php echo get_comment_author_link( $comment ); ?>
 					</h3>
 
-					<div class="comment-meta mdc-typography--body2">
+					<div class="comment-meta body-medium">
 						<time datetime="<?php comment_time( 'c' ); ?>">
 							<?php
 								printf(
@@ -83,7 +83,7 @@ protected function html5_comment( $comment, $depth, $args ) {
 					</div><!-- .comment-meta -->
 
 					<?php if ( 0 === absint( $comment->comment_approved ) ) : ?>
-						<em class="comment-awaiting-moderation mdc-typography--caption">
+						<em class="comment-awaiting-moderation display-small">
 							<?php echo esc_html( $moderation_note ); ?>
 						</em>
 					<?php endif; ?>
diff --git a/theme/inc/template-tags.php b/theme/inc/template-tags.php
index e01f85862..f34c607b9 100644
--- a/theme/inc/template-tags.php
+++ b/theme/inc/template-tags.php
@@ -43,7 +43,7 @@ function material_design_theme_posted_on() {
 			esc_html( get_the_modified_date() )
 		);
 
-		$posted_on = '<a class="date mdc-typography--overline" href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>';
+		$posted_on = '<a class="date label-medium" href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>';
 
 		echo '<span class="posted-on">' . $posted_on . '</span>'; // phpcs:ignore
 
@@ -55,7 +55,7 @@ function material_design_theme_posted_on() {
 		if ( ! empty( $categories ) ) {
 			?>
 		<span class="cat-links">
-			<span class="mdc-typography--overline">
+			<span class="label-medium">
 				<?php foreach ( $categories as $category ) : ?>
 					<?php ob_start(); ?>
 					<a
@@ -104,7 +104,7 @@ function material_design_theme_posted_on() {
 	 * Prints HTML with meta information for the current author.
 	 */
 	function material_design_theme_posted_by() {
-		$byline = '<span class="author vcard">' . get_avatar( get_the_author_meta( 'ID' ), 36 ) . '<a class="url fn n mdc-typography--caption" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>';
+		$byline = '<span class="author vcard">' . get_avatar( get_the_author_meta( 'ID' ), 36 ) . '<a class="url fn n body-small" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>';
 
 		echo '<div class="byline"> ' . $byline . '</div>'; // phpcs:ignore
 
@@ -126,7 +126,7 @@ function material_design_theme_entry_footer() {
 			<span class="tags-links">
 				<i class="material-icons mdc-button__icon" aria-hidden="true">label</i>
 
-				<span class="mdc-typography--caption">
+				<span class="body-small">
 					<?php foreach ( $tags as $tag ) : ?>
 						<?php ob_start(); ?>
 						<a
@@ -204,7 +204,7 @@ function material_design_theme_entry_footer() {
 				),
 				get_the_title()
 			),
-			'<span class="edit-link mdc-typography--caption"><i class="material-icons mdc-button__icon" aria-hidden="true">create</i>',
+			'<span class="edit-link body-small"><i class="material-icons mdc-button__icon" aria-hidden="true">create</i>',
 			'</span>'
 		);
 	}
diff --git a/theme/search.php b/theme/search.php
index 038568a97..77808e8f7 100644
--- a/theme/search.php
+++ b/theme/search.php
@@ -34,7 +34,7 @@
 		<?php if ( have_posts() ) : ?>
 
 			<header class="page-header">
-				<h1 class="page-title mdc-typography mdc-typography--headline2">
+				<h1 class="page-title headline-large">
 					<?php
 					/* translators: %s: search query. */
 					printf( esc_html__( 'Search Results for: %s', 'material-design-google' ), '<span>' . get_search_query() . '</span>' );
diff --git a/theme/template-parts/content-none.php b/theme/template-parts/content-none.php
index d0a511964..5cec4133a 100644
--- a/theme/template-parts/content-none.php
+++ b/theme/template-parts/content-none.php
@@ -29,7 +29,7 @@
 
 <section class="no-results not-found">
 	<header class="page-header">
-		<h1 class="page-title mdc-typography--headline2"><?php esc_html_e( 'Nothing Found.', 'material-design-google' ); ?></h1>
+		<h1 class="page-title headline-large"><?php esc_html_e( 'Nothing Found.', 'material-design-google' ); ?></h1>
 	</header><!-- .page-header -->
 
 	<div class="page-content">
diff --git a/theme/template-parts/content.php b/theme/template-parts/content.php
index b54b39059..59d8dbf80 100644
--- a/theme/template-parts/content.php
+++ b/theme/template-parts/content.php
@@ -44,7 +44,7 @@
 				<div class="post-card__primary">
 					<?php if ( is_sticky() ) : ?>
 						<h2
-							class="post-card__title mdc-typography mdc-typography--headline6"
+							class="post-card__title title-large"
 							aria-label="
 							<?php
 								printf(
@@ -59,15 +59,15 @@ class="post-card__title mdc-typography mdc-typography--headline6"
 							<?php the_title(); ?>
 						</h2>
 					<?php else : ?>
-						<?php the_title( '<h2 class="post-card__title mdc-typography mdc-typography--headline6">', '</h2>' ); ?>
+						<?php the_title( '<h2 class="post-card__title title-large">', '</h2>' ); ?>
 					<?php endif; ?>
 
 					<?php if ( ! empty( $show_date ) ) : ?>
-						<time class="post-card__subtitle mdc-typography mdc-typography--subtitle2"><?php the_time( 'F j, Y' ); ?></time>
+						<time class="post-card__subtitle label-medium"><?php the_time( 'F j, Y' ); ?></time>
 					<?php endif; ?>
 				</div>
 				<?php if ( ! empty( $show_excerpt ) ) : ?>
-					<div class="post-card__secondary mdc-typography mdc-typography--body2"><?php the_excerpt(); ?></div>
+					<div class="post-card__secondary body-medium"><?php the_excerpt(); ?></div>
 				<?php endif; ?>
 			</div>
 		</a>
diff --git a/theme/template-parts/footer.php b/theme/template-parts/footer.php
index b01cc2321..3de31cd94 100644
--- a/theme/template-parts/footer.php
+++ b/theme/template-parts/footer.php
@@ -14,7 +14,7 @@ class="mdc-layout-grid site-footer__inner"
 	>
 		<div class="mdc-layout-grid__inner">
 			<div class="site-footer__copyright mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
-				<small class="site-footer__text mdc-typography--subtitle2"><?php echo esc_html( $footer_text ); ?></small>
+				<small class="site-footer__text label-medium"><?php echo esc_html( $footer_text ); ?></small>
 			</div>
 
 			<?php get_template_part( 'template-parts/back-to-top' ); ?>
diff --git a/theme/template-parts/single-page.php b/theme/template-parts/single-page.php
index 5ef85e43e..c53c5846b 100644
--- a/theme/template-parts/single-page.php
+++ b/theme/template-parts/single-page.php
@@ -29,7 +29,7 @@
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header class="entry-header section-inner">
-		<?php the_title( '<h1 class="entry-title mdc-typography mdc-typography--headline2">', '</h1>' ); ?>
+		<?php the_title( '<h1 class="entry-title headline-large">', '</h1>' ); ?>
 	</header><!-- .entry-header -->
 
 	<?php material_design_theme_post_thumbnail(); ?>
@@ -40,7 +40,7 @@
 
 		wp_link_pages(
 			array(
-				'before' => '<div class="page-links mdc-typography mdc-typography--subtitle1">' . esc_html__( 'Pages:', 'material-design-google' ),
+				'before' => '<div class="page-links label-large">' . esc_html__( 'Pages:', 'material-design-google' ),
 				'after'  => '</div>',
 			)
 		);
diff --git a/theme/template-parts/single.php b/theme/template-parts/single.php
index 274bc59fe..c40e19cdd 100644
--- a/theme/template-parts/single.php
+++ b/theme/template-parts/single.php
@@ -41,9 +41,9 @@
 
 		<?php
 		if ( is_singular() ) :
-			the_title( '<h1 class="entry-title mdc-typography mdc-typography--headline2">', '</h1>' );
+			the_title( '<h1 class="entry-title headline-large">', '</h1>' );
 		else :
-			the_title( '<h2 class="entry-title mdc-typography mdc-typography--headline2"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
+			the_title( '<h2 class="entry-title headline-large"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
 		endif;
 
 		if ( 'post' === get_post_type() ) :
@@ -71,7 +71,7 @@
 
 		wp_link_pages(
 			array(
-				'before' => '<div class="page-links mdc-typography mdc-typography--subtitle1">' . esc_html__( 'Pages:', 'material-design-google' ),
+				'before' => '<div class="page-links label-large">' . esc_html__( 'Pages:', 'material-design-google' ),
 				'after'  => '</div>',
 			)
 		);
diff --git a/theme/template-parts/site-title.php b/theme/template-parts/site-title.php
index e0b7f545e..385b3c4d7 100644
--- a/theme/template-parts/site-title.php
+++ b/theme/template-parts/site-title.php
@@ -33,7 +33,7 @@
 	?>
 	<div class="site-title__wrapper">
 		<div class="site-title__row">
-			<h1 class="site-title mdc-typography mdc-typography--headline6">
+			<h1 class="site-title title-large">
 				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 			</h1>
 
@@ -43,14 +43,14 @@
 				<span class="screen-reader-text"><?php esc_html_e( 'Close drawer', 'material-design-google' ); ?></span>
 			</button>
 		</div>
-		<div class="site-tagline mdc-typography--subtitle1"><?php bloginfo( 'description' ); ?></div>
+		<div class="site-tagline label-large"><?php bloginfo( 'description' ); ?></div>
 	</div>
 	<?php
 else :
 	?>
 	<div class="site-title__wrapper">
 		<div class="site-title__row">
-			<div class="site-title mdc-typography mdc-typography--headline6">
+			<div class="site-title title-large">
 				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 			</div>
 
@@ -60,7 +60,7 @@
 				<span class="screen-reader-text"><?php esc_html_e( 'Close drawer', 'material-design-google' ); ?></span>
 			</button>
 		</div>
-		<div class="site-tagline mdc-typography--subtitle1"><?php bloginfo( 'description' ); ?></div>
+		<div class="site-tagline label-large"><?php bloginfo( 'description' ); ?></div>
 	</div>
 	<?php
 endif;

From fde4df785327132906eef60d76200d4ea66dfcaf Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Fri, 24 Jun 2022 17:13:16 +0530
Subject: [PATCH 12/12] Revert "Merge pull request #363 from
 material-components/revert-359-m3/typography-feedback"

This reverts commit 9a453deed39c98c98e157e3a9a3726706bd8b14f, reversing
changes made to a8728a1ab43f6a7a1a2264db9a3be21fb3e10f3e.
---
 .../components/google-fonts-control/item.js   | 42 +++++++++----------
 .../components/google-fonts-control/style.css |  4 ++
 .../__snapshots__/item.test.js.snap           | 30 ++++++-------
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index cb25cd5c6..0efa74feb 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -59,28 +59,27 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
-							{ lineHeight.label }
+							{ size.label }
 						</label>
 						<input
-							id={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
+							value={ size.value || size.default }
+							min={ size.min }
+							max={ size.max }
 							onChange={ event => {
-								const lineHeightValue = event.target.value;
+								const sizeValue = event.target.value;
 
 								onChange( {
 									id,
-									lineHeightValue,
+									sizeValue,
 									trackingValue: tracking.value,
-									sizeValue: size.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
@@ -90,27 +89,28 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
 						>
-							{ size.label }
+							{ lineHeight.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-line-height-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ size.value || size.default }
-							min={ size.min }
-							max={ size.max }
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
 							onChange={ event => {
-								const sizeValue = event.target.value;
+								const lineHeightValue = event.target.value;
 
 								onChange( {
 									id,
-									sizeValue,
+									lineHeightValue,
 									trackingValue: tracking.value,
+									sizeValue: size.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index a80e2b4f8..2cb266261 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -59,6 +59,10 @@
 		padding: 8px 0 8px 8px;
 	}
 
+	.google-fonts-control-child + .google-fonts-control-child {
+		margin-top: 20px;
+	}
+
 	.components-google-fonts-control__select {
 		flex-direction: row;
 		align-items: center;
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 1ffeb8f49..9cb9c2ad0 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -20,20 +20,19 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-line-height-control-headline-large"
-          id="inspector-line-height-label-headline-large"
+          htmlFor="inspector-size-control-headline-large"
+          id="inspector-size-label-headline-large"
         >
-          Line height
+          Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-line-height-control-headline-large"
-          max={64}
-          min={0}
+          id="inspector-size-control-headline-large"
+          max={96}
+          min={2}
           onChange={[Function]}
-          step="0.01"
           type="number"
-          value={0}
+          value={96}
         />
       </div>
     </div>
@@ -45,19 +44,20 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-size-control-headline-large"
-          id="inspector-size-label-headline-large"
+          htmlFor="inspector-line-height-control-headline-large"
+          id="inspector-line-height-label-headline-large"
         >
-          Size
+          Line height
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-size-control-headline-large"
-          max={96}
-          min={2}
+          id="inspector-line-height-control-headline-large"
+          max={64}
+          min={0}
           onChange={[Function]}
+          step="0.01"
           type="number"
-          value={96}
+          value={0}
         />
       </div>
     </div>