diff --git a/demos/button.html b/demos/button.html
index 63980e55a00..d1c56fa17b9 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -105,9 +105,9 @@
           <label for="toggle-disabled" id="toggle-disabled-label">Disable buttons (excluding links)</label>
         </div>
 
-        <h1 class="mdc-typography--display2">Ripple Enabled</h1>
+        <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
         <fieldset>
-          <legend class="mdc-typography--title">Text Button</legend>
+          <legend class="mdc-typography--headline6">Text Button</legend>
           <div>
             <button class="mdc-button">
               Baseline
@@ -136,7 +136,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Raised Button</legend>
+          <legend class="mdc-typography--headline6">Raised Button</legend>
           <div>
             <button class="mdc-button mdc-button--raised">
               Baseline
@@ -165,7 +165,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Unelevated Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Unelevated Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated">
               Baseline
@@ -194,7 +194,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Stroked Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--stroked">
               Baseline
@@ -223,7 +223,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Custom button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated big-round-corner-button">
               Corner Radius
@@ -235,7 +235,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Different Color Icons/Ink</legend>
+          <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color">
               <i class="material-icons mdc-button__icon">favorite</i>
@@ -248,9 +248,9 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
           </div>
         </fieldset>
 
-        <h1 class="mdc-typography--display2">CSS Only</h1>
+        <h1 class="mdc-typography--headline3">CSS Only</h1>
         <fieldset>
-          <legend class="mdc-typography--title">Text Button</legend>
+          <legend class="mdc-typography--headline6">Text Button</legend>
           <div>
             <button class="mdc-button" data-demo-no-js>
               Baseline
@@ -279,7 +279,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Raised Button</legend>
+          <legend class="mdc-typography--headline6">Raised Button</legend>
           <div>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
               Baseline
@@ -308,7 +308,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Unelevated Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Unelevated Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Baseline
@@ -338,7 +338,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Stroked Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
               Baseline
@@ -367,7 +367,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Custom button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated big-round-corner-button" data-demo-no-js>
               Big Corner Radius
@@ -379,7 +379,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Different Color Icons/Ink</legend>
+          <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color" data-demo-no-js>
               <i class="material-icons mdc-button__icon">favorite</i>
diff --git a/demos/card.html b/demos/card.html
index 86eb4c7e9da..bc33708e5df 100644
--- a/demos/card.html
+++ b/demos/card.html
@@ -45,10 +45,10 @@
           <a class="mdc-card__primary-action" href="#">
             <div class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></div>
             <div class="demo-card__primary">
-              <h2 class="demo-card__title mdc-typography--title">Our Changing Planet</h2>
-              <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
+              <h2 class="demo-card__title mdc-typography--headline6">Our Changing Planet</h2>
+              <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
             </div>
-            <div class="demo-card__secondary mdc-typography--body1">
+            <div class="demo-card__secondary mdc-typography--body2">
               Visit ten places on our planet that are undergoing the biggest changes today.
             </div>
           </a>
@@ -100,13 +100,13 @@ <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
 
       <section class="demo-card-collection">
         <div class="mdc-card mdc-card--stroked demo-card">
-          <div class="demo-card-article-group-heading mdc-typography--subheading2">Headlines</div>
+          <div class="demo-card-article-group-heading mdc-typography--subtitle2">Headlines</div>
 
           <hr class="mdc-list-divider">
 
           <a class="demo-card-article mdc-ripple-surface" href="#">
-            <h2 class="demo-card-article__title mdc-typography--headline">Copper on the rise</h2>
-            <p class="demo-card-article__snippet mdc-typography--body1">
+            <h2 class="demo-card-article__title mdc-typography--headline5">Copper on the rise</h2>
+            <p class="demo-card-article__snippet mdc-typography--body2">
               Copper price soars amid global market optimism and increased demand.
             </p>
           </a>
@@ -114,8 +114,8 @@ <h2 class="demo-card-article__title mdc-typography--headline">Copper on the rise
           <hr class="mdc-list-divider">
 
           <a class="demo-card-article mdc-ripple-surface" href="#">
-            <h2 class="demo-card-article__title mdc-typography--headline">U.S. tech startups rebound</h2>
-            <p class="demo-card-article__snippet mdc-typography--body1">
+            <h2 class="demo-card-article__title mdc-typography--headline5">U.S. tech startups rebound</h2>
+            <p class="demo-card-article__snippet mdc-typography--body2">
               Favorable business conditions have allowed startups to secure more fundraising deals compared to last
               year.
             </p>
@@ -124,8 +124,8 @@ <h2 class="demo-card-article__title mdc-typography--headline">U.S. tech startups
           <hr class="mdc-list-divider">
 
           <a class="demo-card-article mdc-ripple-surface" href="#">
-            <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energy ambitions</h2>
-            <p class="demo-card-article__snippet mdc-typography--body1">
+            <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean energy ambitions</h2>
+            <p class="demo-card-article__snippet mdc-typography--body2">
               China plans to invest billions of dollars for the development of over 300 clean energy projects in
               Southeast Asia.
             </p>
@@ -145,7 +145,7 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
           <a class="mdc-card__primary-action demo-card__primary-action" href="#">
             <div class="mdc-card__media mdc-card__media--square demo-card__media">
               <div class="mdc-card__media-content demo-card__media-content--with-title">
-                <div class="demo-card__media-title mdc-typography--subheading2">
+                <div class="demo-card__media-title mdc-typography--subtitle2">
                   Vacation Photos
                 </div>
               </div>
@@ -185,9 +185,9 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
             <div class="demo-card__music-row">
               <div class="mdc-card__media mdc-card__media--square demo-card__media demo-card__media--music"></div>
               <div class="demo-card__music-info">
-                <div class="demo-card__music-title mdc-typography--headline">Rozes</div>
-                <div class="demo-card__music-artist mdc-typography--body1">Under the Grave</div>
-                <div class="demo-card__music-year mdc-typography--body1">(2016)</div>
+                <div class="demo-card__music-title mdc-typography--headline5">Rozes</div>
+                <div class="demo-card__music-artist mdc-typography--body2">Under the Grave</div>
+                <div class="demo-card__music-year mdc-typography--body2">(2016)</div>
               </div>
             </div>
           </a>
diff --git a/demos/drawer/drawer.scss b/demos/drawer/drawer.scss
index 0c3445b4940..a2b76e99468 100644
--- a/demos/drawer/drawer.scss
+++ b/demos/drawer/drawer.scss
@@ -47,8 +47,7 @@
     flex-grow: 1;
   }
 
-  @include mdc-typography(display2);
-  font-size: 24px;
+  @include mdc-typography(headline6);
   display: flex;
 }
 
diff --git a/demos/drawer/permanent-drawer-above-toolbar.html b/demos/drawer/permanent-drawer-above-toolbar.html
index 298e3b543d1..ac74925e43f 100644
--- a/demos/drawer/permanent-drawer-above-toolbar.html
+++ b/demos/drawer/permanent-drawer-above-toolbar.html
@@ -114,7 +114,7 @@
       </header>
 
       <main class="demo-main">
-        <h1 class="mdc-typography--display1">Permanent Drawer</h1>
+        <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         <p class="mdc-typography--body1">It sits to the left of this content.</p>
 
         <div id="demo-radio-buttons">
diff --git a/demos/drawer/permanent-drawer-below-toolbar.html b/demos/drawer/permanent-drawer-below-toolbar.html
index 2918c10e06c..cda47458312 100644
--- a/demos/drawer/permanent-drawer-below-toolbar.html
+++ b/demos/drawer/permanent-drawer-below-toolbar.html
@@ -106,7 +106,7 @@
         </div>
       </nav>
       <main class="demo-main">
-        <h1 class="mdc-typography--display1">Permanent Drawer</h1>
+        <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         <p class="mdc-typography--body1">It sits to the left of this content.</p>
 
         <div id="demo-radio-buttons">
diff --git a/demos/drawer/persistent-drawer.html b/demos/drawer/persistent-drawer.html
index 3f53463f6c8..a66bc56326a 100644
--- a/demos/drawer/persistent-drawer.html
+++ b/demos/drawer/persistent-drawer.html
@@ -104,7 +104,7 @@
       </header>
 
       <main class="demo-main">
-        <h1 class="mdc-typography--display1">Persistent Drawer</h1>
+        <h1 class="mdc-typography--headline4">Persistent Drawer</h1>
         <p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
         <div id="demo-radio-buttons" class="theme-radio-buttons">
           <div class="mdc-form-field">
diff --git a/demos/drawer/temporary-drawer.html b/demos/drawer/temporary-drawer.html
index 3f5a4781c35..aa9b8038b60 100644
--- a/demos/drawer/temporary-drawer.html
+++ b/demos/drawer/temporary-drawer.html
@@ -91,7 +91,7 @@
       </nav>
     </aside>
     <main class="demo-main mdc-toolbar-fixed-adjust">
-      <h1 class="mdc-typography--display1">Temporary Drawer</h1>
+      <h1 class="mdc-typography--headline4">Temporary Drawer</h1>
       <p class="mdc-typography--body1">Click the menu icon above to open.</p>
       <div id="demo-radio-buttons" class="theme-radio-buttons">
         <div class="mdc-form-field">
diff --git a/demos/image-list.html b/demos/image-list.html
index 061e7efc9a0..eeb7506710a 100644
--- a/demos/image-list.html
+++ b/demos/image-list.html
@@ -149,7 +149,7 @@
           </div>
         </div>
 
-        <h1 class="mdc-typography--headline">Standard Image List</h1>
+        <h1 class="mdc-typography--headline5">Standard Image List</h1>
         <div>
           <div class="mdc-form-field">
             <div class="mdc-radio">
@@ -305,7 +305,7 @@ <h1 class="mdc-typography--headline">Standard Image List</h1>
           </li>
         </ul>
 
-        <h1 class="mdc-typography--headline">Masonry Image List</h1>
+        <h1 class="mdc-typography--headline5">Masonry Image List</h1>
         <div>
           <div class="mdc-form-field">
             <div class="mdc-radio">
diff --git a/demos/linear-progress.html b/demos/linear-progress.html
index 185794d3064..29926081e33 100644
--- a/demos/linear-progress.html
+++ b/demos/linear-progress.html
@@ -73,7 +73,7 @@
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Linear Progress Indicators</legend>
+          <legend class="mdc-typography--headline6">Linear Progress Indicators</legend>
 
           <figure class="linear-progress-demo">
             <div role="progressbar" class="mdc-linear-progress">
diff --git a/demos/select.html b/demos/select.html
index 50c2141dadd..c4d43b30a92 100644
--- a/demos/select.html
+++ b/demos/select.html
@@ -31,15 +31,6 @@
         padding-left: 0;
       }
 
-      /* Hack to work around style-loader asynchronously loading styles. */
-      /* Equivalent to using mdc-typography's subheading2, which is used in the sass file. */
-      .mdc-select {
-        font-family: Roboto, sans-serif;
-        font-size: 1rem;
-        font-weight: 400;
-        letter-spacing: .04em;
-      }
-
       .example {
         max-width: 400px;
         margin: 24px;
@@ -87,7 +78,7 @@
       </section>
 
       <section class="example">
-        <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
+        <h2 class="mdc-typography--headline6">Fully-Featured JS Component</h2>
         <section id="demo-wrapper">
           <div id="js-select" class="mdc-select">
             <select class="mdc-select__native-control" id="full-func-js-select">
@@ -141,7 +132,7 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
         </div>
       </section>
       <section class="example">
-        <h2 class="mdc-typography--title">Select box</h2>
+        <h2 class="mdc-typography--headline6">Select box</h2>
         <section id="box-demo-wrapper">
           <div id="box-js-select" class="mdc-select mdc-select--box">
             <select class="mdc-select__native-control" id="select-box">
@@ -188,7 +179,7 @@ <h2 class="mdc-typography--title">Select box</h2>
         </div>
       </section>
       <section class="example">
-        <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
+        <h2 class="mdc-typography--headline6">Pre-selected option via HTML</h2>
         <section>
           <div id="js-pre-selected" class="mdc-select">
             <select class="mdc-select__native-control" id="select-preselected">
@@ -211,7 +202,7 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
         </section>
       </section>
       <section class="example">
-        <h2 class="mdc-typography--title">MDC Select with optgroups</h2>
+        <h2 class="mdc-typography--headline6">MDC Select with optgroups</h2>
         <div id="optgroup-js-select" class="mdc-select">
           <select class="mdc-select__native-control" id="select-optgroups">
             <optgroup label="Meats">
diff --git a/demos/shape.html b/demos/shape.html
index 78672c918aa..be02237b745 100644
--- a/demos/shape.html
+++ b/demos/shape.html
@@ -55,9 +55,9 @@
       </section>
 
       <section class="demo-wrapper">
-        <h1 class="mdc-typography--display2">Button</h1>
+        <h1 class="mdc-typography--headline3">Button</h1>
 
-        <h2 class="mdc-typography--display1">Filled</h2>
+        <h2 class="mdc-typography--headline4">Filled</h2>
         <div class="mdc-shape-container two-corner-container">
           <button class="mdc-button mdc-button--unelevated">Skip</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
@@ -71,7 +71,7 @@ <h2 class="mdc-typography--display1">Filled</h2>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-left"></div>
         </div>
 
-        <h2 class="mdc-typography--display1">Stroked</h2>
+        <h2 class="mdc-typography--headline4">Stroked</h2>
         <div class="mdc-shape-container two-corner-container two-corner-container--stroked">
           <button class="mdc-button mdc-button--stroked">Skip</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
@@ -85,7 +85,7 @@ <h2 class="mdc-typography--display1">Stroked</h2>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-left"></div>
         </div>
 
-        <h1 class="mdc-typography--display2">Card</h1>
+        <h1 class="mdc-typography--headline3">Card</h1>
 
         <div class="mdc-shape-container card-container">
           <div class="mdc-card mdc-card--stroked demo-card">
@@ -93,8 +93,8 @@ <h1 class="mdc-typography--display2">Card</h1>
               <div class="demo-card__row">
                 <div class="mdc-card__media mdc-card__media--square demo-card__media"></div>
                 <div class="demo-card__info">
-                  <div class="mdc-typography--headline">Title</div>
-                  <div class="mdc-typography--body1">Body text</div>
+                  <div class="mdc-typography--headline5">Title</div>
+                  <div class="mdc-typography--body2">Body text</div>
                 </div>
               </div>
             </a>
diff --git a/demos/snackbar.html b/demos/snackbar.html
index dad32a74974..31a868dd091 100644
--- a/demos/snackbar.html
+++ b/demos/snackbar.html
@@ -76,7 +76,7 @@
       </section>
 
       <section class="example">
-        <h2 class="mdc-typography--title">Basic Example</h2>
+        <h2 class="mdc-typography--headline6">Basic Example</h2>
 
         <div class="mdc-form-field">
           <div class="mdc-checkbox">
diff --git a/demos/tabs.html b/demos/tabs.html
index 0089c826085..87193f2588c 100644
--- a/demos/tabs.html
+++ b/demos/tabs.html
@@ -157,7 +157,7 @@
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Basic Tab Bar</legend>
+          <legend class="mdc-typography--headline6">Basic Tab Bar</legend>
           <nav id="basic-tab-bar" class="mdc-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
             <a class="mdc-tab" href="#two">Item Two</a>
@@ -169,7 +169,7 @@
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Basic Tab Bar w/ Custom Label Color</legend>
+          <legend class="mdc-typography--headline6">Basic Tab Bar w/ Custom Label Color</legend>
           <nav id="basic-tab-bar-custom-label-color" class="custom-label-color-tab mdc-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
             <a class="mdc-tab" href="#two">Item Two</a>
@@ -181,7 +181,7 @@
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">CSS-Only Tab Bar</legend>
+          <legend class="mdc-typography--headline6">CSS-Only Tab Bar</legend>
           <nav class="mdc-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">
               Item One
@@ -201,7 +201,7 @@
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">CSS-Only Tab Bar w/ Custom Label Color</legend>
+          <legend class="mdc-typography--headline6">CSS-Only Tab Bar w/ Custom Label Color</legend>
           <nav class="custom-label-color-tab mdc-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">
               Item One
@@ -221,7 +221,7 @@
 
       <section>
         <div class="demo-tabs__scroller">
-          <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
+          <h2 class="mdc-typography--headline6 demo-title">Tab Bar with Scroller</h2>
           <div id="tab-bar-scroller" class="mdc-tab-bar-scroller">
             <div class="mdc-tab-bar-scroller__indicator mdc-tab-bar-scroller__indicator--back">
               <a class="mdc-tab-bar-scroller__indicator__inner material-icons" href="#" aria-label="scroll back button">
@@ -253,7 +253,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Icon Tab Labels</legend>
+          <legend class="mdc-typography--headline6">Icon Tab Labels</legend>
           <nav id="icon-tab-bar" class="mdc-tab-bar mdc-tab-bar--icon-tabs">
             <a class="mdc-tab mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
@@ -271,7 +271,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Icon Tab Labels w/ Custom Icon Color</legend>
+          <legend class="mdc-typography--headline6">Icon Tab Labels w/ Custom Icon Color</legend>
           <nav id="icon-tab-bar-custom-icon-color" class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
             <a class="mdc-tab mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
@@ -289,7 +289,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">CSS-Only Icon Tab Labels</legend>
+          <legend class="mdc-typography--headline6">CSS-Only Icon Tab Labels</legend>
           <nav class="mdc-tab-bar mdc-tab-bar--icon-tabs">
             <a class="mdc-tab mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
@@ -309,7 +309,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">CSS-Only Icon Tab Labels w/ Custom Icon Color</legend>
+          <legend class="mdc-typography--headline6">CSS-Only Icon Tab Labels w/ Custom Icon Color</legend>
           <nav class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
             <a class="mdc-tab mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
@@ -329,7 +329,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Icon &amp; Text Labels</legend>
+          <legend class="mdc-typography--headline6">Icon &amp; Text Labels</legend>
           <nav id="icon-text-tab-bar" class="mdc-tab-bar mdc-tab-bar--icons-with-text">
             <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
@@ -350,7 +350,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Icon &amp; Text Labels w/ Custom Colors</legend>
+          <legend class="mdc-typography--headline6">Icon &amp; Text Labels w/ Custom Colors</legend>
           <nav id="icon-text-tab-bar-custom-colors" class="custom-ink-color-tab mdc-tab-bar mdc-tab-bar--icons-with-text">
             <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
@@ -371,7 +371,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">CSS-Only Icon &amp; Text Labels</legend>
+          <legend class="mdc-typography--headline6">CSS-Only Icon &amp; Text Labels</legend>
           <nav class="mdc-tab-bar mdc-tab-bar--icons-with-text">
             <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
@@ -394,7 +394,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">CSS-Only Icon &amp; Text Labels w/ Custom Colors</legend>
+          <legend class="mdc-typography--headline6">CSS-Only Icon &amp; Text Labels w/ Custom Colors</legend>
           <nav class="custom-ink-color-tab mdc-tab-bar mdc-tab-bar--icons-with-text">
             <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
               <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
@@ -417,7 +417,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Custom Indicator Colors</legend>
+          <legend class="mdc-typography--headline6">Custom Indicator Colors</legend>
           <nav id="custom-indicator-tab-bar" class="mdc-tab-bar custom-indicator-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
             <a class="mdc-tab" href="#two">Item Two</a>
@@ -429,7 +429,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Custom Indicator Colors - CSS-Only</legend>
+          <legend class="mdc-typography--headline6">Custom Indicator Colors - CSS-Only</legend>
           <nav class="mdc-tab-bar custom-indicator-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">
               Item One
@@ -449,7 +449,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar</legend>
+          <legend class="mdc-typography--headline6">Within mdc-toolbar</legend>
           <div class="mdc-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
@@ -472,7 +472,7 @@ <h2 class="mdc-toolbar__title">Title</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within MDCToolbar - fixed to bottom of toolbar</legend>
+          <legend class="mdc-typography--headline6">Within MDCToolbar - fixed to bottom of toolbar</legend>
           <div class="demo-note">
             <em>
               Note: We want to avoid too many modifier classes for layouts like this. Therefore, we recommend overriding the style of
@@ -515,7 +515,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar, CSS-Only</legend>
+          <legend class="mdc-typography--headline6">Within mdc-toolbar, CSS-Only</legend>
           <div class="mdc-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
@@ -547,7 +547,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + custom color indicator</legend>
+          <legend class="mdc-typography--headline6">Within mdc-toolbar + custom color indicator</legend>
           <div class="demo-note">
             <em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
           </div>
@@ -573,7 +573,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + custom color indicator, CSS-Only</legend>
+          <legend class="mdc-typography--headline6">Within mdc-toolbar + custom color indicator, CSS-Only</legend>
           <div class="mdc-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
@@ -603,7 +603,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within Toolbar, Dynamic Content Control</legend>
+          <legend class="mdc-typography--headline6">Within Toolbar, Dynamic Content Control</legend>
           <div class="mdc-toolbar" id="dynamic-demo-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--align-start">
diff --git a/demos/theme/index.html b/demos/theme/index.html
index 26dc9e096a1..f6b53c58dc2 100644
--- a/demos/theme/index.html
+++ b/demos/theme/index.html
@@ -151,13 +151,13 @@
     </aside>
 
     <main class="mdc-toolbar-fixed-adjust demo-main">
-      <h2 class="mdc-typography--display1">
+      <h2 class="mdc-typography--headline4">
         Baseline Colors
       </h2>
 
       <section class="demo-component-section">
         <i id="classes" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           CSS Classes
           <a href="#classes" class="demo-component-section__permalink" title="Permalink to the theme demo for baseline CSS classes">#</a>
         </h3>
@@ -165,7 +165,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
         <div class="demo-theme-color-section">
           <div class="demo-theme-color-section__row">
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Theme colors as text</legend>
+              <legend class="mdc-typography--subtitle1">Theme colors as text</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-color-swatches">
@@ -178,7 +178,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             </fieldset>
 
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Theme colors as background</legend>
+              <legend class="mdc-typography--subtitle1">Theme colors as background</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-color-swatches">
@@ -198,7 +198,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
         <div class="demo-theme-color-section">
           <div class="demo-theme-color-section_row">
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Text on background</legend>
+              <legend class="mdc-typography--subtitle1">Text on background</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-text-row mdc-theme--background mdc-typography--body2">
@@ -214,7 +214,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
           <div class="demo-theme-color-section__row">
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Text on primary</legend>
+              <legend class="mdc-typography--subtitle1">Text on primary</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-text-row mdc-theme--primary-bg mdc-typography--body2">
@@ -228,7 +228,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             </fieldset>
 
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Text on secondary</legend>
+              <legend class="mdc-typography--subtitle1">Text on secondary</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-text-row mdc-theme--secondary-bg mdc-typography--body2">
@@ -244,7 +244,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
           <div class="demo-theme-color-section__row">
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Text on user-defined light background</legend>
+              <legend class="mdc-typography--subtitle1">Text on user-defined light background</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-text-row demo-theme-bg--custom-light mdc-typography--body2">
@@ -258,7 +258,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             </fieldset>
 
             <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Text on user-defined dark background</legend>
+              <legend class="mdc-typography--subtitle1">Text on user-defined dark background</legend>
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-text-row demo-theme-bg--custom-dark mdc-typography--body2">
@@ -274,19 +274,19 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
         </div>
       </section>
 
-      <h2 class="mdc-typography--display1">
+      <h2 class="mdc-typography--headline4">
         Baseline Component Stickersheet
       </h2>
 
       <section class="demo-component-section">
         <i id="button" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Button
           <a href="#button" class="demo-component-section__permalink" title="Permalink to the theme demo for the button component">#</a>
         </h3>
 
         <fieldset class="demo-fieldset--button">
-          <legend class="mdc-typography--subheading2">Enabled</legend>
+          <legend class="mdc-typography--subtitle1">Enabled</legend>
 
           <div>
             <button class="mdc-button">
@@ -305,7 +305,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
         </fieldset>
 
         <fieldset class="demo-fieldset--button" disabled>
-          <legend class="mdc-typography--subheading2">Disabled</legend>
+          <legend class="mdc-typography--subtitle1">Disabled</legend>
 
           <div>
             <button class="mdc-button">
@@ -326,7 +326,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="card" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Card
           <a href="#card" class="demo-component-section__permalink" title="Permalink to the theme demo for the card component">#</a>
         </h3>
@@ -368,7 +368,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="checkbox" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Checkbox
           <a href="#checkbox" class="demo-component-section__permalink" title="Permalink to the theme demo for the checkbox component">#</a>
         </h3>
@@ -443,7 +443,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="dialog" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Dialog
           <a href="#dialog" class="demo-component-section__permalink" title="Permalink to the theme demo for the dialog component">#</a>
         </h3>
@@ -468,7 +468,7 @@ <h3 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
 
       <section class="demo-component-section">
         <i id="drawer" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Drawer
           <a href="#drawer" class="demo-component-section__permalink" title="Permalink to the theme demo for the drawer component">#</a>
         </h3>
@@ -478,7 +478,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="fab" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Floating Action Button (FAB)
           <a href="#fab" class="demo-component-section__permalink" title="Permalink to the theme demo for the floating action button component">#</a>
         </h3>
@@ -513,14 +513,14 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="icon-toggle" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Icon Toggle
           <a href="#icon-toggle" class="demo-component-section__permalink" title="Permalink to the theme demo for the icon toggle component">#</a>
         </h3>
 
         <div class="demo-icon-toggle-row">
           <div class="mdc-elevation--z2 demo-icon-toggle-tile">
-            <h4 class="mdc-typography--subheading2">Enabled</h4>
+            <h4 class="mdc-typography--subtitle1">Enabled</h4>
 
             <i class="mdc-icon-toggle mdc-icon-toggle--primary material-icons"
                role="button"
@@ -534,7 +534,7 @@ <h4 class="mdc-typography--subheading2">Enabled</h4>
           </div>
 
           <div class="mdc-elevation--z2 demo-icon-toggle-tile">
-            <h4 class="mdc-typography--subheading2">Disabled</h4>
+            <h4 class="mdc-typography--subtitle1">Disabled</h4>
 
             <i class="mdc-icon-toggle mdc-icon-toggle--disabled material-icons"
                role="button"
@@ -552,13 +552,13 @@ <h4 class="mdc-typography--subheading2">Disabled</h4>
 
       <section class="demo-component-section">
         <i id="linear-progress" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Linear Progress
           <a href="#linear-progress" class="demo-component-section__permalink" title="Permalink to the theme demo for the linear progress component">#</a>
         </h3>
 
         <figure class="demo-linear-progress-row">
-          <figcaption class="mdc-typography--subheading2">Indeterminate</figcaption>
+          <figcaption class="mdc-typography--subtitle1">Indeterminate</figcaption>
           <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate">
             <div class="mdc-linear-progress__buffering-dots"></div>
             <div class="mdc-linear-progress__buffer"></div>
@@ -572,7 +572,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
         </figure>
 
         <figure class="demo-linear-progress-row">
-          <figcaption class="mdc-typography--subheading2">Buffer</figcaption>
+          <figcaption class="mdc-typography--subtitle1">Buffer</figcaption>
           <div role="progressbar" class="mdc-linear-progress" data-buffer="true">
             <div class="mdc-linear-progress__buffering-dots"></div>
             <div class="mdc-linear-progress__buffer"></div>
@@ -588,7 +588,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="radio" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Radio Button
           <a href="#radio" class="demo-component-section__permalink" title="Permalink to the theme demo for the radio button component">#</a>
         </h3>
@@ -642,7 +642,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="select" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Select
           <a href="#select" class="demo-component-section__permalink" title="Permalink to the theme demo for the select component">#</a>
         </h3>
@@ -675,7 +675,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="slider" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Slider
           <a href="#slider" class="demo-component-section__permalink" title="Permalink to the theme demo for the slider component">#</a>
         </h3>
@@ -701,7 +701,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="switch" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Switch
           <a href="#switch" class="demo-component-section__permalink" title="Permalink to the theme demo for the switch component">#</a>
         </h3>
@@ -728,7 +728,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="tabs" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Tabs
           <a href="#tabs" class="demo-component-section__permalink" title="Permalink to the theme demo for the tabs component">#</a>
         </h3>
@@ -794,7 +794,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
       <section class="demo-component-section">
         <i id="text-field" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
+        <h3 class="mdc-typography--headline5 demo-component-section__heading">
           Text Field
           <a href="#text-field" class="demo-component-section__permalink" title="Permalink to the theme demo for the text field component">#</a>
         </h3>
diff --git a/demos/toolbar/toolbar.scss b/demos/toolbar/toolbar.scss
index c1dd256d056..f7a9fb47d40 100644
--- a/demos/toolbar/toolbar.scss
+++ b/demos/toolbar/toolbar.scss
@@ -22,7 +22,7 @@
 @import "../../packages/mdc-theme/color-palette";
 
 .demo-toolbar-example-heading {
-  @include mdc-typography(display2);
+  @include mdc-typography(headline6);
 
   display: flex;
   flex-direction: row;
diff --git a/demos/top-app-bar.html b/demos/top-app-bar.html
index daef9828855..22ddac5de64 100644
--- a/demos/top-app-bar.html
+++ b/demos/top-app-bar.html
@@ -158,10 +158,10 @@
     </main>
 
     <div class="demo-controls-container" dir="ltr">
-      <h3 class="mdc-typography--title">Demo Controls</h3>
+      <h3 class="mdc-typography--headline6">Demo Controls</h3>
       <div class="demo-row">
         <div class="demo-col">
-          <span class="mdc-typography--subheading2 demo-options-heading">Common Options</span>
+          <span class="mdc-typography--subtitle1 demo-options-heading">Common Options</span>
           <div>
             <input type="checkbox" id="rtl-checkbox"/>
             <label for="rtl-checkbox">RTL</label>
@@ -172,7 +172,7 @@ <h3 class="mdc-typography--title">Demo Controls</h3>
           </div>
         </div>
         <div class="demo-col">
-          <span class="mdc-typography--subheading2 demo-options-heading">Top App Bar Specific Options</span>
+          <span class="mdc-typography--subtitle1 demo-options-heading">Top App Bar Specific Options</span>
           <div>
             <input type="checkbox" id="dense-checkbox"/>
             <label for="dense-checkbox">Dense</label>
@@ -187,7 +187,7 @@ <h3 class="mdc-typography--title">Demo Controls</h3>
           </div>
         </div>
         <div class="demo-col">
-          <span class="mdc-typography--subheading2 demo-options-heading">Short Top App Bar Specific Options</span>
+          <span class="mdc-typography--subtitle1 demo-options-heading">Short Top App Bar Specific Options</span>
           <div>
             <input type="checkbox" id="short-checkbox"/>
             <label for="short-checkbox">Short</label>
diff --git a/demos/typography.html b/demos/typography.html
index 155e6e16d29..a8a3c748968 100644
--- a/demos/typography.html
+++ b/demos/typography.html
@@ -44,26 +44,38 @@
     <main>
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
-        <h2 class="mdc-typography--display4">Tt</h2>
+        <h1 class="mdc-typography--headline1">Tt</h1>
       </section>
 
       <section class="demo-typography--section">
-        <h2 class="mdc-typography--display1">Styles</h2>
-        <h1 class="mdc-typography--display4">Display 4</h1>
-        <h1 class="mdc-typography--display3">Display 3</h1>
-        <h1 class="mdc-typography--display2">Display 2</h1>
-        <h1 class="mdc-typography--display1">Display 1</h1>
-        <h1 class="mdc-typography--headline">Headline</h1>
-        <h2 class="mdc-typography--title">
-          Title <span class="mdc-typography--caption">Caption.</span>
-        </h2>
-        <h3 class="mdc-typography--subheading2">Subheading 2</h3>
-        <h4 class="mdc-typography--subheading1">Subheading 1</h4>
-        <p class="mdc-typography--body1">Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-          do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
-          in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-        <aside class="mdc-typography--body2">Body 2 text, calling something out.</aside>
+        <h6 class="mdc-typography--headline6">Styles</h6>
+        <h1 class="mdc-typography--headline1">Headline 1</h1>
+        <h2 class="mdc-typography--headline2">Headline 2</h2>
+        <h3 class="mdc-typography--headline3">Headline 3</h3>
+        <h4 class="mdc-typography--headline4">Headline 4</h4>
+        <h5 class="mdc-typography--headline5">Headline 5</h5>
+        <h6 class="mdc-typography--headline6">Headline 6</h6>
+        <h6 class="mdc-typography--subtitle1">Subtitle 1</h6>
+        <h6 class="mdc-typography--subtitle2">Subtitle 2</h6>
+        <p class="mdc-typography--body1">
+          Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+          eu fugiat nulla pariatur.
+        </p>
+        <p class="mdc-typography--body2">
+          Body 2 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+          eu fugiat nulla pariatur.
+        </p>
+
+        <div><span class="mdc-typography--button">Button text</span></div>
+
+        <div><span class="mdc-typography--caption">Caption text</span></div>
+
+        <div><span class="mdc-typography--overline">Overline text</span></div>
+
       </section>
     </main>
   </body>
diff --git a/packages/mdc-dialog/mdc-dialog.scss b/packages/mdc-dialog/mdc-dialog.scss
index 80c78dfceff..f71819bcf88 100644
--- a/packages/mdc-dialog/mdc-dialog.scss
+++ b/packages/mdc-dialog/mdc-dialog.scss
@@ -83,7 +83,7 @@
 }
 
 .mdc-dialog__header__title {
-  @include mdc-typography(title);
+  @include mdc-typography(headline6);
 
   flex: 1;
   margin: 0;
diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
index a3b4e6ce95a..e08cc2b1572 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -69,7 +69,7 @@
 
 @mixin mdc-drawer-list_() {
   .mdc-list-item {
-    @include mdc-typography(body2);
+    @include mdc-typography(subtitle2);
 
     position: relative;
     outline: none;
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index b1236ada892..cbc12fbf9e4 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -17,17 +17,21 @@
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "@material/typography/mixins";
 @import "./functions";
 @import "./mixins";
 @import "./variables";
 
 // postcss-bem-linter: define floating-label
 .mdc-floating-label {
+  @include mdc-typography(subtitle1);
+
   position: absolute;
   bottom: 8px;
   left: 0;
   transform-origin: left top;
   transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
+  line-height: 1.15rem;
   cursor: text;
 
   @include mdc-rtl {
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
index 481ee045f72..0ebf5d169bd 100644
--- a/packages/mdc-floating-label/package.json
+++ b/packages/mdc-floating-label/package.json
@@ -19,7 +19,8 @@
   },
   "dependencies": {
     "@material/base": "^0.34.0",
+    "@material/rtl": "^0.34.0",
     "@material/theme": "^0.34.0",
-    "@material/rtl": "^0.34.0"
+    "@material/typography": "^0.34.0"
   }
 }
diff --git a/packages/mdc-form-field/mdc-form-field.scss b/packages/mdc-form-field/mdc-form-field.scss
index 1b72d371eb7..c1012c8ecad 100644
--- a/packages/mdc-form-field/mdc-form-field.scss
+++ b/packages/mdc-form-field/mdc-form-field.scss
@@ -22,7 +22,7 @@ $mdc-form-field-item-spacing: 4px;
 
 /* stylelint-disable selector-max-type */
 .mdc-form-field {
-  @include mdc-typography(body1);
+  @include mdc-typography(body2);
   @include mdc-theme-prop(color, text-primary-on-background);
 
   display: inline-flex;
diff --git a/packages/mdc-grid-list/mdc-grid-list.scss b/packages/mdc-grid-list/mdc-grid-list.scss
index 53e2707b640..dc8ac910d6b 100644
--- a/packages/mdc-grid-list/mdc-grid-list.scss
+++ b/packages/mdc-grid-list/mdc-grid-list.scss
@@ -138,7 +138,7 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 }
 
 .mdc-grid-tile__support-text {
-  @include mdc-typography(body1);
+  @include mdc-typography(subtitle1);
   @include mdc-typography-overflow-ellipsis;
 
   display: block;
diff --git a/packages/mdc-image-list/mdc-image-list.scss b/packages/mdc-image-list/mdc-image-list.scss
index 89ee7ea6eea..61a0d330719 100644
--- a/packages/mdc-image-list/mdc-image-list.scss
+++ b/packages/mdc-image-list/mdc-image-list.scss
@@ -70,7 +70,7 @@
 }
 
 .mdc-image-list__label {
-  @include mdc-typography(subheading2);
+  @include mdc-typography(subtitle1);
   @include mdc-typography-overflow-ellipsis;
 }
 
diff --git a/packages/mdc-list/mdc-list.scss b/packages/mdc-list/mdc-list.scss
index 8b30f4b68d7..7898323fc72 100644
--- a/packages/mdc-list/mdc-list.scss
+++ b/packages/mdc-list/mdc-list.scss
@@ -24,17 +24,17 @@
 // postcss-bem-linter: define list
 
 .mdc-list {
-  @include mdc-typography(subheading2);
+  @include mdc-typography(subtitle1);
   @include mdc-list-item-primary-text-ink-color(text-primary-on-background);
 
   margin: 0;
   padding: 8px 0;
 
   // According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
-  // same as for subheading1.
+  // same as for body1.
 
   /* @alternate */
-  line-height: map-get(map-get($mdc-typography-styles, subheading1), line-height);
+  line-height: map-get(map-get($mdc-typography-styles, body1), line-height);
   list-style-type: none;
 }
 
@@ -98,7 +98,7 @@
 }
 
 .mdc-list-item__secondary-text {
-  @include mdc-typography(body1);
+  @include mdc-typography(body2);
 }
 
 // Match the font size to the primary text when dense
@@ -210,11 +210,11 @@ a.mdc-list-item {
 
 .mdc-list-group__subheader {
   $mdc-list-subheader-virtual-height: 3rem;
-  $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body2), line-height);
+  $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body1), line-height);
   $mdc-list-subheader-margin:
     ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
 
-  @include mdc-typography(body2);
+  @include mdc-typography(subtitle1);
 
   margin: $mdc-list-subheader-margin $mdc-list-side-padding;
 }
diff --git a/packages/mdc-menu/mdc-menu.scss b/packages/mdc-menu/mdc-menu.scss
index 404d88ed0cc..97fd31c4ee1 100644
--- a/packages/mdc-menu/mdc-menu.scss
+++ b/packages/mdc-menu/mdc-menu.scss
@@ -111,7 +111,7 @@ $mdc-menu-scale-duration: .12s;
   }
 
   .mdc-list-item {
-    @include mdc-typography(subheading2);
+    @include mdc-typography(subtitle1);
 
     position: relative;
     outline: none;
diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
index 59cbd832d77..4a99c7a1aa0 100644
--- a/packages/mdc-select/mdc-select.scss
+++ b/packages/mdc-select/mdc-select.scss
@@ -115,8 +115,8 @@
   }
 
   .mdc-select__native-control,
-  .mdc-floating-label {
-    @include mdc-typography(subheading2);
+  .mdc-select__label {
+    @include mdc-typography(subtitle1);
   }
 
   .mdc-select__native-control {
diff --git a/packages/mdc-slider/mdc-slider.scss b/packages/mdc-slider/mdc-slider.scss
index 22f0e5eb84d..a15f244e428 100644
--- a/packages/mdc-slider/mdc-slider.scss
+++ b/packages/mdc-slider/mdc-slider.scss
@@ -155,7 +155,7 @@
   }
 
   &__pin-value-marker {
-    @include mdc-typography(caption);
+    @include mdc-typography(body2);
 
     transform: rotate(45deg);
   }
diff --git a/packages/mdc-tabs/tab/mdc-tab.scss b/packages/mdc-tabs/tab/mdc-tab.scss
index 9b865693dab..186cb261d92 100644
--- a/packages/mdc-tabs/tab/mdc-tab.scss
+++ b/packages/mdc-tabs/tab/mdc-tab.scss
@@ -32,7 +32,7 @@ $mdc-tab-with-icon-and-text-height: 72px;
 // postcss-bem-linter: define tab
 
 .mdc-tab {
-  @include mdc-typography(body2);
+  @include mdc-typography(button);
   @include mdc-tab-ink-color(text-secondary-on-background);
   @include mdc-ripple-surface;
   @include mdc-states;
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index a48b02f4cb7..9a85c8ccd57 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -56,7 +56,7 @@
   // setting it here has no effect because it is overriden by the font-size
   // given below).
   @each $prop in (letter-spacing) {
-    #{$prop}: map-get(map-get($mdc-typography-styles, subheading2), $prop);
+    #{$prop}: map-get(map-get($mdc-typography-styles, subtitle1), $prop);
   }
 
   width: 100%;
diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
index 34081c0b343..e296cdc92b1 100644
--- a/packages/mdc-toolbar/mdc-toolbar.scss
+++ b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -108,7 +108,7 @@
   }
 
   &__title {
-    @include mdc-typography(title);
+    @include mdc-typography(headline6);
     @include mdc-typography-overflow-ellipsis;
     @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-desktop);
 
@@ -168,10 +168,9 @@
   // bem linter is disabled because it cannot handle multiple top level selector
   &-default-behavior {
     .mdc-toolbar__title {
-      @include mdc-typography(display1);
+      @include mdc-typography(headline6);
 
       align-self: flex-end;
-      font-weight: #{map-get($mdc-typography-font-weight-values, normal)};
       line-height: 1.5rem;
     }
 
diff --git a/packages/mdc-top-app-bar/mdc-top-app-bar.scss b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
index fe600876eff..d06fac116ce 100644
--- a/packages/mdc-top-app-bar/mdc-top-app-bar.scss
+++ b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
@@ -61,7 +61,7 @@
   }
 
   &__title {
-    @include mdc-typography(title);
+    @include mdc-typography(headline6);
     @include mdc-rtl-reflexive-box(padding, left, $mdc-top-app-bar-title-left-padding);
 
     text-overflow: ellipsis;
diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md
index 038793f1bf2..bedf11f6a96 100644
--- a/packages/mdc-typography/README.md
+++ b/packages/mdc-typography/README.md
@@ -11,31 +11,21 @@ path: /catalog/typography/
 
 Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
 
-MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from ten styles:
-
-* Display 4
-* Display 3
-* Display 2
-* Display 1
-* Headline
-* Title
-* Subheading 2
-* Subheading 1
-* Body 2
+MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles:
+
+* Headline 1
+* Headline 2
+* Headline 3
+* Headline 4
+* Headline 5
+* Headline 6
+* Subtitle 1
+* Subtitle 2
 * Body 1
+* Body 2
 * Caption
 * Button
-
-### Usage
-
-```html
-<head>
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-</head>
-<body class="mdc-typography">
-  <h1 class="mdc-typography--display4">Big header</h1>
-</body>
-```
+* Overline
 
 ## Design & API Documentation
 
@@ -56,8 +46,6 @@ npm install @material/typography
 
 ## Usage
 
-### Load Roboto
-
 We recommend you load Roboto from Google Fonts
 
 ```html
@@ -65,7 +53,7 @@ We recommend you load Roboto from Google Fonts
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 </head>
 <body class="mdc-typography">
-  <h1 class="mdc-typography--display4">Big header</h1>
+  <h1 class="mdc-typography--headline1">Big header</h1>
 </body>
 ```
 
@@ -78,18 +66,19 @@ If you want to set the typographic style of an element, which is not a Material
 CSS Class | Description
 --- | ---
 `mdc-typography` | Sets the font to Roboto
-`mdc-typography--display4` | Sets font properties as Display 4
-`mdc-typography--display3` | Sets font properties as Display 3
-`mdc-typography--display2` | Sets font properties as Display 2
-`mdc-typography--display1` | Sets font properties as Display 1
-`mdc-typography--headline` | Sets font properties as Headline
-`mdc-typography--title` | Sets font properties as Title
-`mdc-typography--subheading2` | Sets font properties as Subheading 2
-`mdc-typography--subheading1` | Sets font properties as Subheading 1
-`mdc-typography--body2` | Sets font properties as Body 2
+`mdc-typography--headline1` | Sets font properties as Headline 1
+`mdc-typography--headline2` | Sets font properties as Headline 2
+`mdc-typography--headline3` | Sets font properties as Headline 3
+`mdc-typography--headline4` | Sets font properties as Headline 4
+`mdc-typography--headline5` | Sets font properties as Headline 5
+`mdc-typography--headline6` | Sets font properties as Headline 6
+`mdc-typography--subtitle1` | Sets font properties as Subtitle 1
+`mdc-typography--subtitle2` | Sets font properties as Subtitle 2
 `mdc-typography--body1` | Sets font properties as Body 1
+`mdc-typography--body2` | Sets font properties as Body 2
 `mdc-typography--caption` | Sets font properties as Caption
 `mdc-typography--button` | Sets font properties as Button
+`mdc-typography--overline` | Sets font properties as Overline
 
 ### Sass Variables and Mixins
 
@@ -103,17 +92,56 @@ Mixin | Description
 
 #### `$style` Values
 
-These styles can be used as the `$style` argument for `mdc-typography` mixin.
+These styles can be used as the `$style` argument for the `mdc-typography` mixin.
 
-* `display4`
-* `display3`
-* `display2`
-* `display1`
-* `headline`
-* `title`
-* `subheading2`
-* `subheading1`
-* `body2`
+* `headline1`
+* `headline2`
+* `headline3`
+* `headline4`
+* `headline5`
+* `headline6`
+* `subtitle1`
+* `subtitle2`
 * `body1`
+* `body2`
 * `caption`
 * `button`
+* `overline`
+
+#### Overriding Styles
+
+All styles can be overridden using Sass global variables _before_ the component is imported by setting a global 
+variable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties
+you want to override for a particular style.
+
+Example: Overriding the button `font-size` and `text-transform` properties.
+
+```scss
+$mdc-typography-styles-button: (
+  font-size: 16px,
+  text-transform: none,
+);
+
+@import "@material/button/mdc-button";
+```
+
+Example: Overriding the global `font-family` property. 
+```scss
+$mdc-typography-font-family: "Arial, Helvetica, sans-serif";
+
+...
+@import ...
+```
+
+Example: Overriding the `font-family` property for `headline1` and `headline2`.
+```scss
+$mdc-typography-styles-headline1: (
+  font-family: "Arial, Helvetica, sans-serif";
+);
+$mdc-typography-styles-headline2: (
+  font-family: "Arial, Helvetica, sans-serif";
+);
+
+...
+@import ...
+```
diff --git a/packages/mdc-typography/_functions.scss b/packages/mdc-typography/_functions.scss
new file mode 100644
index 00000000000..55cd9a3fa20
--- /dev/null
+++ b/packages/mdc-typography/_functions.scss
@@ -0,0 +1,70 @@
+
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// 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.
+//
+
+@function mdc-typography-get-global-variable_($style) {
+  @if $style == "headline1" {
+    @return $mdc-typography-styles-headline1;
+  } @else if $style == "headline2" {
+    @return $mdc-typography-styles-headline2;
+  } @else if $style == "headline3" {
+    @return $mdc-typography-styles-headline3;
+  } @else if $style == "headline4" {
+    @return $mdc-typography-styles-headline4;
+  } @else if $style == "headline5" {
+    @return $mdc-typography-styles-headline5;
+  } @else if $style == "headline6" {
+    @return $mdc-typography-styles-headline6;
+  } @else if $style == "subtitle1" {
+    @return $mdc-typography-styles-subtitle1;
+  } @else if $style == "subtitle2" {
+    @return $mdc-typography-styles-subtitle2;
+  } @else if $style == "body1" {
+    @return $mdc-typography-styles-body1;
+  } @else if $style == "body2" {
+    @return $mdc-typography-styles-body2;
+  } @else if $style == "caption" {
+    @return $mdc-typography-styles-caption;
+  } @else if $style == "button" {
+    @return $mdc-typography-styles-button;
+  } @else if $style == "overline" {
+    @return $mdc-typography-styles-overline;
+  } @else {
+    @return ();
+  }
+}
+
+@function mdc-typography-set-styles_($base-styles, $scale-styles) {
+  @each $style, $style-props in $scale-styles {
+
+    // Merge base properties for all styles.
+    $style-props: map-merge($base-styles, $style-props);
+
+    // Merge global overrides onto each style.
+    @if global_variable_exists(mdc-typography-styles-#{$style}) {
+      $style-props: map-merge($style-props, mdc-typography-get-global-variable_(#{$style}));
+    }
+
+    // Override original styles with new styles.
+    $scale-styles: map-merge($scale-styles, (#{$style}: $style-props));
+  }
+
+  @return $scale-styles;
+}
+
+@function mdc-typography-get-letter-spacing_($tracking, $font-size) {
+  @return $tracking / ($font-size * 16) * 1em;
+}
diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
index ed8dd6eae89..29465ca077f 100644
--- a/packages/mdc-typography/_mixins.scss
+++ b/packages/mdc-typography/_mixins.scss
@@ -17,20 +17,18 @@
 @import "./variables";
 
 @mixin mdc-typography-base {
-  font-family: $mdc-typography-font-family;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  @each $key, $value in $mdc-typography-base {
+    #{$key}: $value;
+  }
 }
 
 @mixin mdc-typography($style) {
   $style-props: map-get($mdc-typography-styles, $style);
 
   @if not map-has-key($mdc-typography-styles, $style) {
-    @error "Invalid style specified! Choose one of #{map-keys($mdc-typography-styles)}";
+    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map-keys($mdc-typography-styles)}";
   }
 
-  @include mdc-typography-base;
-
   @each $key, $value in $style-props {
     #{$key}: $value;
   }
diff --git a/packages/mdc-typography/_variables.scss b/packages/mdc-typography/_variables.scss
index fce46e95d91..b0639f857df 100644
--- a/packages/mdc-typography/_variables.scss
+++ b/packages/mdc-typography/_variables.scss
@@ -14,8 +14,16 @@
 // limitations under the License.
 //
 
+@import "./functions";
+
 $mdc-typography-font-family: Roboto, sans-serif !default;
 
+$mdc-typography-base: (
+  font-family: $mdc-typography-font-family,
+  -moz-osx-font-smoothing: grayscale,
+  -webkit-font-smoothing: antialiased,
+);
+
 $mdc-typography-font-weight-values: (
   thin: 100,
   light: 300,
@@ -25,105 +33,112 @@ $mdc-typography-font-weight-values: (
   black: 900
 ) !default;
 
-/* TODO(sgomes): Figure out what to do about desktop font sizes. */
-
-/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */
-
-$mdc-typography-styles: (
-  display4: (
-    font-size: 7rem, /* 112sp */
-    line-height: 7rem, /* 112sp */
-    font-weight: map-get($mdc-typography-font-weight-values, light),
-    letter-spacing: -.04em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  display3: (
-    font-size: 3.5rem, /* 56px */
-    line-height: 3.5rem, /* 56px */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: -.02em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  display2: (
-    font-size: 2.8125rem, /* 45px */
-    line-height: 3rem, /* 48px */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: normal,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  display1: (
-    font-size: 2.125rem, /* 34sp */
-    line-height: 2.5rem, /* 40sp */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: normal,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  headline: (
-    font-size: 1.5rem, /* 24sp */
-    line-height: 2rem, /* 32sp */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: normal,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  title: (
-    font-size: 1.25rem, /* 20sp */
-    line-height: 2rem, /* 32sp */
-    font-weight: map-get($mdc-typography-font-weight-values, medium),
-    letter-spacing: .02em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  subheading2: (
-    font-size: 1rem, /* 16sp */
-    line-height: 1.75rem, /* 28sp */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: .04em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  subheading1: (
-    font-size: .938rem, /* 15sp */
-    line-height: 1.5rem, /* 24sp */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: .04em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  body2: (
-    font-size: .875rem, /* 14sp */
-    line-height: 1.5rem, /* 24sp */
-    font-weight: map-get($mdc-typography-font-weight-values, medium),
-    letter-spacing: .04em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  body1: (
-    font-size: .875rem, /* 14sp */
-    line-height: 1.25rem, /* 20sp */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: .04em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  caption: (
-    font-size: .75rem, /* 12sp */
-    line-height: 1.25rem, /* 20sp */
-    font-weight: map-get($mdc-typography-font-weight-values, regular),
-    letter-spacing: .08em,
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  button: (
-    font-size: .875rem, /* 14sp */
-    line-height: 2.25rem, /* 36sp */
-    font-weight: map-get($mdc-typography-font-weight-values, medium),
-    letter-spacing: .04em,
-    text-decoration: none,
-    text-transform: uppercase
+$mdc-typography-styles: mdc-typography-set-styles_(
+  $mdc-typography-base,
+  (
+    headline1: (
+      font-size: 6rem, /* 96sp */
+      line-height: 6rem,
+      font-weight: map-get($mdc-typography-font-weight-values, light),
+      letter-spacing: mdc-typography-get-letter-spacing_(-1.5, 6),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    headline2: (
+      font-size: 3.75rem, /* 60sp */
+      line-height: 3.75rem,
+      font-weight: map-get($mdc-typography-font-weight-values, light),
+      letter-spacing: mdc-typography-get-letter-spacing_(-.5, 3.75),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    headline3: (
+      font-size: 3rem, /* 48px */
+      line-height: 3.125rem, /* 50px */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: normal,
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    headline4: (
+      font-size: 2.125rem, /* 34sp */
+      line-height: 2.5rem, /* 40sp */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: mdc-typography-get-letter-spacing_(.25, 2.125),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    headline5: (
+      font-size: 1.5rem, /* 24sp */
+      line-height: 2rem, /* 32sp */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: normal,
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    headline6: (
+      font-size: 1.25rem, /* 20sp */
+      line-height: 2rem, /* 32sp */
+      font-weight: map-get($mdc-typography-font-weight-values, medium),
+      letter-spacing: mdc-typography-get-letter-spacing_(.25, 1.25),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    subtitle1: (
+      font-size: 1rem, /* 16sp */
+      line-height: 1.75rem, /* 28sp */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: mdc-typography-get-letter-spacing_(.15, 1),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    subtitle2: (
+      font-size: .875rem, /* 14sp */
+      line-height: 1.375rem, /* 22sp */
+      font-weight: map-get($mdc-typography-font-weight-values, medium),
+      letter-spacing: mdc-typography-get-letter-spacing_(.1, .875),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    body1: (
+      font-size: 1rem, /* 16sp */
+      line-height: 1.5rem, /* 24sp */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: mdc-typography-get-letter-spacing_(.5, 1),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    body2: (
+      font-size: .875rem, /* 14sp */
+      line-height: 1.25rem, /* 20sp */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: mdc-typography-get-letter-spacing_(.25, .875),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    caption: (
+      font-size: .75rem, /* 12sp */
+      line-height: 1.25rem, /* 20sp */
+      font-weight: map-get($mdc-typography-font-weight-values, regular),
+      letter-spacing: mdc-typography-get-letter-spacing_(.4, .75),
+      text-decoration: inherit,
+      text-transform: inherit
+    ),
+    button: (
+      font-size: .875rem, /* 14sp */
+      line-height: 2.25rem, /* 36sp */
+      font-weight: map-get($mdc-typography-font-weight-values, medium),
+      letter-spacing: mdc-typography-get-letter-spacing_(1.25, .875),
+      text-decoration: none,
+      text-transform: uppercase
+    ),
+    overline: (
+      font-size: .75rem, /* 12sp */
+      line-height: 2rem, /* 32sp */
+      font-weight: map-get($mdc-typography-font-weight-values, medium),
+      letter-spacing: mdc-typography-get-letter-spacing_(2, .75),
+      text-decoration: none,
+      text-transform: uppercase
+    ),
   )
 ) !default;