diff --git a/src/dev/pages/avatar/avatar.ejs b/src/dev/pages/avatar/avatar.ejs
index 466dccc04..5bc48fc55 100644
--- a/src/dev/pages/avatar/avatar.ejs
+++ b/src/dev/pages/avatar/avatar.ejs
@@ -1,27 +1,27 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Image URL</h3>
+    <h3 class="forge-typography--subtitle4">w/Image URL</h3>
     <div>
       <forge-avatar image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
     </div>
   </div>
   
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Text</h3>
+    <h3 class="forge-typography--subtitle4">w/Text</h3>
     <div>
       <forge-avatar text="Tyler Forge"></forge-avatar>
     </div>
   </div>
   
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Custom Radius (10px)</h3>
+    <h3 class="forge-typography--subtitle4">w/Custom Radius (10px)</h3>
     <div>
       <forge-avatar text="Tyler Forge" style="--forge-avatar-radius: 10px;"></forge-avatar>
     </div>
   </div>
   
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Icon</h3>
+    <h3 class="forge-typography--subtitle4">w/Icon</h3>
     <div>
       <forge-avatar style="--forge-avatar-theme-background: black;">
         <forge-icon name="face" external></forge-icon>
@@ -30,14 +30,14 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Custom Slotted Content and CSS Variable</h3>
+    <h3 class="forge-typography--subtitle4">w/Custom Slotted Content and CSS Variable</h3>
     <div>
       <forge-avatar style="--forge-avatar-theme-background: #ff0000; --forge-avatar-size: 24px; --forge-avatar-font-size: 16px;">A</forge-avatar>
     </div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Invalid url</h3>
+    <h3 class="forge-typography--subtitle4">w/Invalid url</h3>
     <div>
       <forge-avatar image-url="https://httpstat.us/500" text="Invalid Url"></forge-avatar>
     </div>
diff --git a/src/dev/pages/badge/badge.ejs b/src/dev/pages/badge/badge.ejs
index 80d5f4bdd..2594b03de 100644
--- a/src/dev/pages/badge/badge.ejs
+++ b/src/dev/pages/badge/badge.ejs
@@ -31,7 +31,7 @@
 
   <div class="flex">
     <div class="vert">
-      <h3 class="forge-typography--subtitle1-secondary">Theme</h3>
+      <h3 class="forge-typography--subtitle4">Theme</h3>
       <forge-badge>Default</forge-badge>
       <forge-badge theme="danger">Danger</forge-badge>
       <forge-badge theme="warning">Warning</forge-badge>
@@ -40,7 +40,7 @@
       <forge-badge theme="info-secondary">Info (secondary)</forge-badge>
     </div>
     <div class="vert">
-      <h3 class="forge-typography--subtitle1-secondary">Strong theme</h3>
+      <h3 class="forge-typography--subtitle4">Strong theme</h3>
       <forge-badge strong>Default</forge-badge>
       <forge-badge theme="danger" strong>Danger</forge-badge>
       <forge-badge theme="warning" strong>Warning</forge-badge>
diff --git a/src/dev/pages/button-area/button-area.ejs b/src/dev/pages/button-area/button-area.ejs
index 1ca9b88f1..2d1b76b60 100644
--- a/src/dev/pages/button-area/button-area.ejs
+++ b/src/dev/pages/button-area/button-area.ejs
@@ -3,7 +3,7 @@
     <button slot="button" aria-labelledby="button-area-heading"></button>
     <div class="flex-wrapper">
       <div>
-        <div class="forge-typography--headline5" id="button-area-heading">Heading</div>
+        <div class="forge-typography--heading4" id="button-area-heading">Heading</div>
         <div>Content</div>
       </div>
       <forge-icon-button data-forge-ignore>
@@ -25,7 +25,7 @@
       <button slot="button" id="expansion-panel-button" aria-labelledby="expansion-panel-heading" aria-controls="expansion-panel-content" aria-expanded="false"></button>
       <div class="flex-wrapper">
         <div>
-          <div class="forge-typography--headline5" id="expansion-panel-heading">Expansion panel</div>
+          <div class="forge-typography--heading4" id="expansion-panel-heading">Expansion panel</div>
           <div>Subheading</div>
         </div>
         <forge-icon-button data-forge-ignore>
diff --git a/src/dev/pages/button-toggle/button-toggle.ejs b/src/dev/pages/button-toggle/button-toggle.ejs
index cea7fd1a2..f6b626116 100644
--- a/src/dev/pages/button-toggle/button-toggle.ejs
+++ b/src/dev/pages/button-toggle/button-toggle.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1-secondary">Static</h3>
+<h3 class="forge-typography--subtitle4">Static</h3>
 <forge-button-toggle-group id="button-toggle-group">
   <forge-button-toggle value="email" aria-label="By email">
     <forge-icon name="email" slot="leading"></forge-icon>
@@ -11,7 +11,7 @@
   </forge-button-toggle>
 </forge-button-toggle-group>
 
-<h3 class="forge-typography--subtitle1-secondary">Dynamic</h3>
+<h3 class="forge-typography--subtitle4">Dynamic</h3>
 <forge-button-toggle-group id="button-toggle-group-dynamic"></forge-button-toggle-group>
 
 <script type="module" src="button-toggle.ts"></script>
diff --git a/src/dev/pages/card/card.ejs b/src/dev/pages/card/card.ejs
index bbe4435fb..450b50892 100644
--- a/src/dev/pages/card/card.ejs
+++ b/src/dev/pages/card/card.ejs
@@ -1,6 +1,6 @@
 <forge-card class="demo-card">
   <forge-toolbar no-border>
-    <h3 class="forge-typography--headline5" slot="start">
+    <h3 class="forge-typography--heading4" slot="start">
       This is the card title
     </h3>
     <forge-icon-button slot="end">
@@ -10,7 +10,7 @@
     </forge-icon-button>
   </forge-toolbar>
 
-  <p class="card-body forge-typography--body2">
+  <p class="card-body forge-typography--body1">
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias
     exercitationem doloremque dolorem ullam, nesciunt quia velit
     necessitatibus numquam quasi voluptates impedit earum dolores
diff --git a/src/dev/pages/checkbox/checkbox.ejs b/src/dev/pages/checkbox/checkbox.ejs
index 0616d3454..9f0caae33 100644
--- a/src/dev/pages/checkbox/checkbox.ejs
+++ b/src/dev/pages/checkbox/checkbox.ejs
@@ -1,33 +1,33 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1">Default</h3>
+    <h3 class="forge-typography--subtitle4">Default</h3>
     <forge-checkbox>
       <input type="checkbox" id="default-checkbox" checked>
-      <label for="default-checkbox">Checkbox label</label>
+      <label for="default-checkbox" class="forge-typography--label">Checkbox label</label>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Dense</h3>
+    <h3 class="forge-typography--subtitle4">Dense</h3>
     <forge-checkbox dense>
       <input type="checkbox" id="dense-checkbox" checked>
-      <label for="dense-checkbox">Dense checkbox</label>
+      <label for="dense-checkbox" class="forge-typography--label">Dense checkbox</label>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Indeterminate</h3>
+    <h3 class="forge-typography--subtitle4">Indeterminate</h3>
     <forge-checkbox >
       <input type="checkbox" id="indeterminate-checkbox" checked>
-      <label for="indeterminate-checkbox">Indeterminate checkbox</label>
+      <label for="indeterminate-checkbox" class="forge-typography--label">Indeterminate checkbox</label>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Disabled</h3>
+    <h3 class="forge-typography--subtitle4">Disabled</h3>
     <forge-checkbox>
       <input type="checkbox" id="disabled-checkbox" checked disabled>
-      <label for="disabled-checkbox">Disabled checkbox</label>
+      <label for="disabled-checkbox" class="forge-typography--label">Disabled checkbox</label>
     </forge-checkbox>
   </div>
 </div>
diff --git a/src/dev/pages/chips/chips.ejs b/src/dev/pages/chips/chips.ejs
index f0443ab5b..ecaa10f94 100644
--- a/src/dev/pages/chips/chips.ejs
+++ b/src/dev/pages/chips/chips.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div id="chips-basic">
-    <h3>Basic chips</h3>
+    <h3 class="forge-typography--subtitle4">Basic chips</h3>
     <forge-chip-set style="width: 600px; display: flex; flex: auto; flex-direction: row; flex-wrap: wrap;">
       <forge-chip>Small</forge-chip>
       <forge-chip>Medium</forge-chip>
@@ -9,7 +9,7 @@
   </div>
 
   <div id="chips-choice">
-    <h3>Choice chips</h3>
+    <h3 class="forge-typography--subtitle4">Choice chips</h3>
     <forge-chip-set type="choice">
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
@@ -18,7 +18,7 @@
   </div>
 
   <div id="chips-choice-vertical">
-    <h3>Choice chips (vertical)</h3>
+    <h3 class="forge-typography--subtitle4">Choice chips (vertical)</h3>
     <forge-chip-set type="choice" vertical>
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
@@ -27,8 +27,8 @@
   </div>
 
   <div id="chips-filter">
-    <h3>Filter chips</h3>
-    <h5>No leading icon</h5>
+    <h3 class="forge-typography--subtitle4">Filter chips</h3>
+    <h4 class="forge-typography--subtitle1">No leading icon</h4>
     <forge-chip-set type="filter">
       <forge-chip value="tops" selected>Tops</forge-chip>
       <forge-chip value="bottoms" selected>Bottoms</forge-chip>
@@ -38,7 +38,7 @@
   </div>
 
   <div id="chips-filter-leading">
-    <h5>With leading icon</h5>
+    <h3 class="forge-typography--subtitle4">With leading icon</h3>
     <forge-chip-set type="filter">
       <forge-chip selected>
         <forge-icon slot="leading" name="face"></forge-icon>
@@ -60,7 +60,7 @@
   </div>
 
   <div id="chips-action">
-    <h3>Action chips</h3>
+    <h3 class="forge-typography--subtitle4">Action chips</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
         <forge-icon slot="leading" name="event"></forge-icon>
@@ -82,7 +82,7 @@
   </div>
 
   <div id="chips-avatar">
-    <h3>With leading avatar</h3>
+    <h3 class="forge-typography--subtitle4">With leading avatar</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
         <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
@@ -104,7 +104,7 @@
   </div>
 
   <div id="chips-input">
-    <h3 class="flex">
+    <h3 class="flex forge-typography--subtitle4">
       Input chips
       <span>
         <forge-icon-button>
@@ -135,7 +135,7 @@
   </div>
 
   <div id="chips-input">
-    <h3>Invalid chips</h3>
+    <h3 class="forge-typography--subtitle4">Invalid chips</h3>
     <forge-chip-set type="input">
       <forge-chip invalid>
         <forge-icon slot="leading" name="place"></forge-icon>
diff --git a/src/dev/pages/dialog/dialog-template-basic.ejs b/src/dev/pages/dialog/dialog-template-basic.ejs
index 3fb385ef5..6ee7de002 100644
--- a/src/dev/pages/dialog/dialog-template-basic.ejs
+++ b/src/dev/pages/dialog/dialog-template-basic.ejs
@@ -1,7 +1,7 @@
 <div class="dialog-container">
   <forge-scaffold>
     <forge-toolbar slot="header" class="header-toolbar" no-border forge-dialog-move-target>
-      <h1 slot="start" class="forge-typography--headline5">Dialog title</h1>
+      <h1 slot="start" class="forge-typography--heading4">Dialog title</h1>
       <forge-icon-button slot="end">
         <button type="button" id="close-button">
           <forge-icon name="close"></forge-icon>
@@ -9,19 +9,19 @@
       </forge-icon-button>
     </forge-toolbar>
     <div slot="body" class="dialog-body">
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
       </p>
         
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
       </p>
       
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
diff --git a/src/dev/pages/divider/divider.ejs b/src/dev/pages/divider/divider.ejs
index 8e1b71b90..f237c08db 100644
--- a/src/dev/pages/divider/divider.ejs
+++ b/src/dev/pages/divider/divider.ejs
@@ -1,9 +1,9 @@
-<h3 class="forge-typography--subtitle2">Horizontal</h3>
+<h3 class="forge-typography--subtitle4">Horizontal</h3>
 <div>
   <forge-divider></forge-divider>
 </div>
 
-<h3 class="forge-typography--subtitle2">Vertical</h3>
+<h3 class="forge-typography--subtitle4">Vertical</h3>
 <div style="margin-left: 50px; height: 200px;">
   <forge-divider vertical></forge-divider>
 </div>
diff --git a/src/dev/pages/drawer/drawer-dismissible-right.ejs b/src/dev/pages/drawer/drawer-dismissible-right.ejs
index 7bcadf45c..09f3fee30 100644
--- a/src/dev/pages/drawer/drawer-dismissible-right.ejs
+++ b/src/dev/pages/drawer/drawer-dismissible-right.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Dismissible (right)</h3>
+<h3 class="forge-typography--subtitle4">Dismissible (right)</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-dismissible-right-app-bar" title-text="Dismissible Drawer - Right" slot="header">
diff --git a/src/dev/pages/drawer/drawer-dismissible.ejs b/src/dev/pages/drawer/drawer-dismissible.ejs
index 4e6cbc171..74bd16af2 100644
--- a/src/dev/pages/drawer/drawer-dismissible.ejs
+++ b/src/dev/pages/drawer/drawer-dismissible.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Dismissible</h3>
+<h3 class="forge-typography--subtitle4">Dismissible</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-dismissible-app-bar" title-text="Dismissible Drawer" slot="header">
diff --git a/src/dev/pages/drawer/drawer-mini-hover-right.ejs b/src/dev/pages/drawer/drawer-mini-hover-right.ejs
index e2122014d..d966fdb61 100644
--- a/src/dev/pages/drawer/drawer-mini-hover-right.ejs
+++ b/src/dev/pages/drawer/drawer-mini-hover-right.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini Hover (right)</h3>
+<h3 class="forge-typography--subtitle4">Mini Hover (right)</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-hover-app-bar" title-text="Mini Hover Drawer" slot="header">
diff --git a/src/dev/pages/drawer/drawer-mini-hover.ejs b/src/dev/pages/drawer/drawer-mini-hover.ejs
index 3ec4f276c..038acc8e0 100644
--- a/src/dev/pages/drawer/drawer-mini-hover.ejs
+++ b/src/dev/pages/drawer/drawer-mini-hover.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini Hover</h3>
+<h3 class="forge-typography--subtitle4">Mini Hover</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-hover-app-bar" title-text="Mini Hover Drawer" slot="header">
diff --git a/src/dev/pages/drawer/drawer-mini.ejs b/src/dev/pages/drawer/drawer-mini.ejs
index c4f285fa3..26df560ce 100644
--- a/src/dev/pages/drawer/drawer-mini.ejs
+++ b/src/dev/pages/drawer/drawer-mini.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini</h3>
+<h3 class="forge-typography--subtitle4">Mini</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-app-bar" title-text="Mini Drawer" slot="header">
diff --git a/src/dev/pages/drawer/drawer-modal.ejs b/src/dev/pages/drawer/drawer-modal.ejs
index dfa22149c..6e1038f33 100644
--- a/src/dev/pages/drawer/drawer-modal.ejs
+++ b/src/dev/pages/drawer/drawer-modal.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Modal</h3>
+<h3 class="forge-typography--subtitle4">Modal</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-modal-app-bar" title-text="Modal Drawer" slot="header">
diff --git a/src/dev/pages/drawer/drawer-permanent.ejs b/src/dev/pages/drawer/drawer-permanent.ejs
index 7336f22aa..0157ab2f6 100644
--- a/src/dev/pages/drawer/drawer-permanent.ejs
+++ b/src/dev/pages/drawer/drawer-permanent.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Permanent</h3>
+<h3 class="forge-typography--subtitle4">Permanent</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar title-text="Permanent Drawer" menu="false" slot="header">
diff --git a/src/dev/pages/expansion-panel/expansion-panel.ejs b/src/dev/pages/expansion-panel/expansion-panel.ejs
index bddbb5389..1230f5146 100644
--- a/src/dev/pages/expansion-panel/expansion-panel.ejs
+++ b/src/dev/pages/expansion-panel/expansion-panel.ejs
@@ -1,17 +1,17 @@
-<h3 class="forge-typography--subtitle1">Basic (unstyled)</h3>
+<h3 class="forge-typography--subtitle4">Basic (unstyled)</h3>
 <forge-expansion-panel id="expansion-panel-basic">
   <div slot="header">Click me</div>
   <div>Expandable content</div>
 </forge-expansion-panel>
 
-<h3 class="forge-typography--subtitle1">Card</h3>
+<h3 class="forge-typography--subtitle4">Card</h3>
 <forge-card class="expandable-card">
   <forge-expansion-panel id="expansion-panel-card">
     <div slot="header" role="button" class="flex expansion-panel-header">
-      <div class="forge-typography--body1">Click me too</div>
+      <div>Click me too</div>
       <forge-open-icon></forge-open-icon>
     </div>
-    <div class="forge-typography--body1">
+    <div>
       Expandable card content
     </div>
   </forge-expansion-panel>
diff --git a/src/dev/pages/file-picker/file-picker.ejs b/src/dev/pages/file-picker/file-picker.ejs
index df8c84764..08a3c95df 100644
--- a/src/dev/pages/file-picker/file-picker.ejs
+++ b/src/dev/pages/file-picker/file-picker.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Default</h3>
+<h3 class="forge-typography--subtitle4">Default</h3>
 
 <forge-file-picker id="file-picker-default" style="--forge-file-picker-width: 320px; width: 320px;">
   <span slot="primary">Drag files here or</span>
@@ -10,7 +10,7 @@
 </forge-file-picker>
 <ul id="file-picker-list"></ul>
 
-<h3 class="forge-typography--subtitle1">Compact</h3>
+<h3 class="forge-typography--subtitle4">Compact</h3>
 
 <forge-file-picker id="file-picker-compact" compact>
   <forge-button type="outlined">
@@ -19,7 +19,7 @@
 </forge-file-picker>
 <ul id="file-picker-list-compact"></ul>
 
-<h3 class="forge-typography--subtitle1">Borderless</h3>
+<h3 class="forge-typography--subtitle4">Borderless</h3>
 
 <forge-card style="width: 400px; --forge-card-padding: 0;">
   <div style="height: 400px;">
diff --git a/src/dev/pages/focus-indicator/focus-indicator.ejs b/src/dev/pages/focus-indicator/focus-indicator.ejs
index 4bc1b8c0a..b92117489 100644
--- a/src/dev/pages/focus-indicator/focus-indicator.ejs
+++ b/src/dev/pages/focus-indicator/focus-indicator.ejs
@@ -45,7 +45,7 @@
   <!-- Typical card example -->
   <div tabindex="0" role="button" class="example-target">
     <forge-card role="presentation" style="border-radius: 4px;">
-      <p class="forge-typography--body" style="margin: 0;">
+      <p style="margin: 0;">
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, nihil et sequi similique ad,
         voluptas quod quisquam iure deleniti voluptatibus pariatur laborum maiores iste omnis ut sapiente!
         Repellendus, autem delectus.
@@ -58,7 +58,7 @@
   <!-- Inward example -->
   <div>
     <div class="example-target inward-example" tabindex="0" role="button">
-      <span class="forge-typography--body">Inward example</span>
+      <span>Inward example</span>
       <forge-focus-indicator allow-focus inward></forge-focus-indicator>
       <forge-state-layer></forge-state-layer>
     </div>
diff --git a/src/dev/pages/icon-button/icon-button.ejs b/src/dev/pages/icon-button/icon-button.ejs
index a86156c76..1f172ada2 100644
--- a/src/dev/pages/icon-button/icon-button.ejs
+++ b/src/dev/pages/icon-button/icon-button.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--caption">Default</h3>
+    <h3 class="forge-typography--subtitle4">Default</h3>
     <forge-icon-button>
       <button type="button">
         <forge-icon name="code"></forge-icon>
@@ -9,7 +9,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">Default (dense)</h3>
+    <h3 class="forge-typography--subtitle4">Default (dense)</h3>
     <forge-icon-button dense>
       <button type="button">
         <forge-icon name="code"></forge-icon>
@@ -18,7 +18,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">Toggle</h3>
+    <h3 class="forge-typography--subtitle4">Toggle</h3>
     <forge-icon-button toggle="true" is-on="false">
       <button type="button">
         <forge-icon name="favorite" forge-icon-button-on></forge-icon>
@@ -28,7 +28,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">Toggle (dense)</h3>
+    <h3 class="forge-typography--subtitle4">Toggle (dense)</h3>
     <forge-icon-button dense toggle is-on="false">
       <button type="button">
         <forge-icon name="favorite" forge-icon-button-on></forge-icon>
@@ -38,7 +38,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">w/Anchor link</h3>
+    <h3 class="forge-typography--subtitle4">w/Anchor link</h3>
     <forge-icon-button>
       <a href="javascript: alert('Anchor link icon button works!');">
         <forge-icon name="open_in_new"></forge-icon>
diff --git a/src/dev/pages/icon/icon.ejs b/src/dev/pages/icon/icon.ejs
index c2f1f90a4..af7ddcf12 100644
--- a/src/dev/pages/icon/icon.ejs
+++ b/src/dev/pages/icon/icon.ejs
@@ -1,19 +1,19 @@
-<h3 class="forge-typography--caption">External icon</h3>
+<h3 class="forge-typography--label">External icon</h3>
 <forge-icon name="face" external theme="success"></forge-icon>
 
-<h3 class="forge-typography--caption">External icon (lazy)</h3>
+<h3 class="forge-typography--label">External icon (lazy)</h3>
 <forge-icon name="code" lazy external></forge-icon>
 
-<h3 class="forge-typography--caption">Registry icon</h3>
+<h3 class="forge-typography--label">Registry icon</h3>
 <forge-icon name="action_launcher"></forge-icon>
 
-<h3 class="forge-typography--caption">Custom</h3>
+<h3 class="forge-typography--label">Custom</h3>
 <forge-icon name="palette" style="font-size: 48px; color: deepPink;" external></forge-icon>
 
-<h3 class="forge-typography--caption">Invalid icon</h3>
+<h3 class="forge-typography--label">Invalid icon</h3>
 <forge-icon name="invalidIconName"></forge-icon>
 
-<h3 class="forge-typography--caption">Invalid icon (external)</h3>
+<h3 class="forge-typography--label">Invalid icon (external)</h3>
 <forge-icon name="another_invalid_icon_name" external></forge-icon>
 
 <script type="module" src="icon.ts"></script>
diff --git a/src/dev/pages/list/list.ejs b/src/dev/pages/list/list.ejs
index a5cb15415..0c1d36237 100644
--- a/src/dev/pages/list/list.ejs
+++ b/src/dev/pages/list/list.ejs
@@ -1,7 +1,7 @@
 <div>
   <!-- Non-interactive (static is deprecated) -->
   <div>
-    <h3 class="forge-typography--subtitle">Non-interactive (static is deprecated)</h3>
+    <h3 class="forge-typography--subtitle4">Non-interactive (static is deprecated)</h3>
     <div class="list-demo">
       <forge-list non-interactive>
         <forge-list-item>List Item One</forge-list-item>
@@ -13,7 +13,7 @@
 
   <!-- Disabled -->
   <div>
-    <h3 class="forge-typography--subtitle">Disabled</h3>
+    <h3 class="forge-typography--subtitle4">Disabled</h3>
     <div class="list-demo">
       <forge-list disabled>
         <forge-list-item>List Item One</forge-list-item>
@@ -25,7 +25,7 @@
 
   <!-- Single-line -->
   <div>
-    <h3 class="forge-typography--subtitle">Single-Line</h3>
+    <h3 class="forge-typography--subtitle4">Single-Line</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>List Item One</forge-list-item>
@@ -37,7 +37,7 @@
   
   <!-- Two-Line -->
   <div>
-    <h3 class="forge-typography--subtitle">Two-Line</h3>
+    <h3 class="forge-typography--subtitle4">Two-Line</h3>
     <div class="list-demo">
       <forge-list two-line>
         <forge-list-item>
@@ -58,7 +58,7 @@
   
   <!-- Three-Line -->
   <div>
-    <h3 class="forge-typography--subtitle">Three-Line</h3>
+    <h3 class="forge-typography--subtitle4">Three-Line</h3>
     <div class="list-demo">
       <forge-list three-line>
         <forge-list-item>
@@ -82,7 +82,7 @@
 
   <!-- Single-line long text -->
   <div>
-    <h3 class="forge-typography--subtitle">Single-Line (long text)</h3>
+    <h3 class="forge-typography--subtitle4">Single-Line (long text)</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
@@ -94,7 +94,7 @@
   
   <!-- Single-line long text w/wrap -->
   <div>
-    <h3 class="forge-typography--subtitle">Single-Line (long text w/wrap)</h3>
+    <h3 class="forge-typography--subtitle4">Single-Line (long text w/wrap)</h3>
     <div class="list-demo">
       <forge-list wrap>
         <forge-list-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
@@ -106,7 +106,7 @@
   
   <!-- Two-line long text w/wrap -->
   <div>
-    <h3 class="forge-typography--subtitle">Two-Line (long text w/wrap)</h3>
+    <h3 class="forge-typography--subtitle4">Two-Line (long text w/wrap)</h3>
     <div class="list-demo">
       <forge-list two-line wrap>
         <forge-list-item>
@@ -127,7 +127,7 @@
   
   <!-- Three-line long text w/wrap -->
   <div>
-    <h3 class="forge-typography--subtitle">Three-Line (long text w/wrap)</h3>
+    <h3 class="forge-typography--subtitle4">Three-Line (long text w/wrap)</h3>
     <div class="list-demo">
       <forge-list three-line wrap>
         <forge-list-item>
@@ -151,7 +151,7 @@
   
   <!-- Single-line (dense) -->
   <div>
-    <h3 class="forge-typography--subtitle">Single-Line (dense)</h3>
+    <h3 class="forge-typography--subtitle4">Single-Line (dense)</h3>
     <div class="list-demo">
       <forge-list dense>
         <forge-list-item>List Item One</forge-list-item>
@@ -163,7 +163,7 @@
   
   <!-- Two-line (dense) -->
   <div>
-    <h3 class="forge-typography--subtitle">Two-Line (dense)</h3>
+    <h3 class="forge-typography--subtitle4">Two-Line (dense)</h3>
     <div class="list-demo">
       <forge-list dense two-line>
         <forge-list-item>
@@ -184,7 +184,7 @@
   
   <!-- Three-line (dense) -->
   <div>
-    <h3 class="forge-typography--subtitle">Three-Line (dense)</h3>
+    <h3 class="forge-typography--subtitle4">Three-Line (dense)</h3>
     <div class="list-demo">
       <forge-list dense three-line>
         <forge-list-item>
@@ -208,7 +208,7 @@
   
   <!-- List with Selected Item -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Selected Item</h3>
+    <h3 class="forge-typography--subtitle4">List with Selected Item</h3>
     <div class="list-demo">
       <forge-list three-line selected-value="wifi">
         <forge-list-item value="wifi">
@@ -238,7 +238,7 @@
   
   <!-- Leading Icon -->
   <div>
-    <h3 class="forge-typography--subtitle">Leading Icon</h3>
+    <h3 class="forge-typography--subtitle4">Leading Icon</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -259,7 +259,7 @@
   
   <!-- Trailing Icon -->
   <div>
-    <h3 class="forge-typography--subtitle">Trailing Icon</h3>
+    <h3 class="forge-typography--subtitle4">Trailing Icon</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -280,7 +280,7 @@
   
   <!-- Two-Line with Leading and Trailing Icon and Divider -->
   <div>
-    <h3 class="forge-typography--subtitle">Two-Line with Leading and Trailing Icon and Divider</h3>
+    <h3 class="forge-typography--subtitle4">Two-Line with Leading and Trailing Icon and Divider</h3>
     <div class="list-demo">
       <forge-list two-line>
         <forge-list-item>
@@ -314,7 +314,7 @@
   
   <!-- List with Dividers and Expandable Items -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Dividers and Expandable Items</h3>
+    <h3 class="forge-typography--subtitle4">List with Dividers and Expandable Items</h3>
     <div class="list-demo">
       <forge-list>
         <forge-expansion-panel>
@@ -350,7 +350,7 @@
   
   <!-- List with Leading Checkbox -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Leading Checkbox</h3>
+    <h3 class="forge-typography--subtitle4">List with Leading Checkbox</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -377,7 +377,7 @@
   
   <!-- List with Trailing Checkbox -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Trailing Checkbox</h3>
+    <h3 class="forge-typography--subtitle4">List with Trailing Checkbox</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -404,7 +404,7 @@
   
   <!-- List with Leading Radio Buttons -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Leading Radio Buttons</h3>
+    <h3 class="forge-typography--subtitle4">List with Leading Radio Buttons</h3>
     <div class="list-demo">
       <forge-list role="radiogroup" aria-label="Choose radio option">
         <forge-list-item>
@@ -431,7 +431,7 @@
   
   <!-- List with Trailing Radio Buttons -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Trailing Radio Buttons</h3>
+    <h3 class="forge-typography--subtitle4">List with Trailing Radio Buttons</h3>
     <div class="list-demo">
       <forge-list role="radiogroup" aria-label="Choose radio option">
         <forge-list-item>
@@ -459,7 +459,7 @@
     
   <!-- List with Trailing Switch -->
   <div>
-    <h3 class="forge-typography--subtitle">List with Trailing Switch</h3>
+    <h3 class="forge-typography--subtitle4">List with Trailing Switch</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -480,7 +480,7 @@
   
   <!-- List with multiple Checkboxes (requires use of forge-ignore attribute) -->
   <div>
-    <h3 class="forge-typography--subtitle">List with multiple Checkboxes (requires use of forge-ignore attribute)</h3>
+    <h3 class="forge-typography--subtitle4">List with multiple Checkboxes (requires use of forge-ignore attribute)</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -516,7 +516,7 @@
   
   <!-- List Inside of Drawer -->
   <div>
-    <h3 class="forge-typography--subtitle">List Inside of Drawer</h3>
+    <h3 class="forge-typography--subtitle4">List Inside of Drawer</h3>
     <div class="list-demo">
       <forge-drawer static open>
         <aside>
@@ -534,7 +534,7 @@
 
   <!-- List with anchor links -->
   <div>
-    <h3 class="forge-typography--subtitle">List with anchor links</h3>
+    <h3 class="forge-typography--subtitle4">List with anchor links</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item href="https://www.google.com/">
diff --git a/src/dev/pages/popup/popup.ejs b/src/dev/pages/popup/popup.ejs
index d382aedeb..f331cfc96 100644
--- a/src/dev/pages/popup/popup.ejs
+++ b/src/dev/pages/popup/popup.ejs
@@ -4,7 +4,7 @@
 
 <template id="forge-popup-template">
   <div class="vert" style="padding: 16px;">
-    <h2 class="forge-typography--title">Popup title</h2>
+    <h2 class="forge-typography--heading4">Popup title</h2>
 
     <forge-select label="Select" value="determinate">
       <forge-option value="one">One</forge-option>
diff --git a/src/dev/pages/radio/radio.ejs b/src/dev/pages/radio/radio.ejs
index 69481396e..faed0d89e 100644
--- a/src/dev/pages/radio/radio.ejs
+++ b/src/dev/pages/radio/radio.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Default</h3>
+    <h3 class="forge-typography--subtitle4">Default</h3>
     <div role="radiogroup" aria-label="Choose radio option">
       <forge-radio>
         <input type="radio" id="input-radio-01" name="radios" />
@@ -18,7 +18,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Dense</h3>
+    <h3 class="forge-typography--subtitle4">Dense</h3>
     <div role="radiogroup" aria-label="Choose radio option">
       <forge-radio dense>
         <input type="radio" id="input-radio-dense-01" name="radios-dense" />
@@ -36,7 +36,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled</h3>
+    <h3 class="forge-typography--subtitle4">Disabled</h3>
     <div role="radiogroup" aria-label="Choose radio option">
       <forge-radio>
         <input type="radio" id="input-radio-disabled-01" name="radios-disabled" disabled />
@@ -54,7 +54,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Example</h3>
+    <h3 class="forge-typography--subtitle4">Example</h3>
     <div role="radiogroup" id="example-radio-group" aria-label="Choose radio option">
       <forge-radio>
         <input type="radio" id="input-radio-example-1" name="radios-example" />
diff --git a/src/dev/pages/ripple/ripple.ejs b/src/dev/pages/ripple/ripple.ejs
index 20583a90b..eb7e96c94 100644
--- a/src/dev/pages/ripple/ripple.ejs
+++ b/src/dev/pages/ripple/ripple.ejs
@@ -1,7 +1,7 @@
 <div class="vert">
   
   <div>
-    <h3 class="forge-typography--subtitle1">Attached by parent relationship</h3>
+    <h3 class="forge-typography--subtitle4">Attached by parent relationship</h3>
     <div class="ripple-surface-example">
       <forge-ripple></forge-ripple>
     </div>
@@ -10,12 +10,12 @@
   <div>
     <forge-ripple target="#ripple-surface-target-1"></forge-ripple>
 
-    <h3 class="forge-typography--subtitle1">Attached by target</h3>
+    <h3 class="forge-typography--subtitle4">Attached by target</h3>
     <div id="ripple-surface-target-1" class="ripple-surface-example"></div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Card</h3>
+    <h3 class="forge-typography--subtitle4">Card</h3>
     <forge-card id="forge-ripple-card" style="--forge-card-padding: 0;">
       <div style="padding: 16px;">
         Ripple's believe it or not!
@@ -25,7 +25,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Unbounded</h3>
+    <h3 class="forge-typography--subtitle4">Unbounded</h3>
     <div class="unbounded-container">
       <forge-ripple unbounded></forge-ripple>
     </div>
diff --git a/src/dev/pages/skeleton/skeleton.ejs b/src/dev/pages/skeleton/skeleton.ejs
index c3dc05c36..0fa0738f0 100644
--- a/src/dev/pages/skeleton/skeleton.ejs
+++ b/src/dev/pages/skeleton/skeleton.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div class="limit-container">
-    <h3 class="forge-typography--subtitle1-secondary">Profile</h3>
+    <h3 class="forge-typography--subtitle4">Profile</h3>
     <forge-skeleton avatar></forge-skeleton>
     <forge-skeleton text></forge-skeleton>
     <forge-skeleton text></forge-skeleton>
@@ -8,19 +8,19 @@
   </div>
 
   <div class="limit-container">
-    <h3 class="forge-typography--subtitle1-secondary">List</h3>
+    <h3 class="forge-typography--subtitle4">List</h3>
     <forge-skeleton list-item></forge-skeleton>
     <forge-skeleton list-item></forge-skeleton>
     <forge-skeleton list-item></forge-skeleton>
   </div>
 
   <div class="limit-container">
-    <h3 class="forge-typography--subtitle1-secondary">Section</h3>
+    <h3 class="forge-typography--subtitle4">Section</h3>
     <forge-skeleton stretch style="height: 256px;"></forge-skeleton>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Chips</h3>
+    <h3 class="forge-typography--subtitle4">Chips</h3>
     <div style="display: flex;">
       <div style="display: grid; grid-auto-flow: column; grid-gap: 16px;">
         <forge-skeleton chip></forge-skeleton>
@@ -31,7 +31,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Buttons</h3>
+    <h3 class="forge-typography--subtitle4">Buttons</h3>
     <div style="display: flex;">
       <div style="display: grid; grid-auto-flow: column; grid-gap: 16px;">
         <forge-skeleton button></forge-skeleton>
@@ -42,7 +42,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Form Fields</h3>
+    <h3 class="forge-typography--subtitle4">Form Fields</h3>
     <div style="display: flex;">
       <div>
         <forge-skeleton form-field></forge-skeleton>
@@ -53,7 +53,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">App</h3>
+    <h3 class="forge-typography--subtitle4">App</h3>
     <div style="height: 750px;">
       <forge-scaffold style="--forge-scaffold-width: 100%; --forge-scaffold-height: 100%;">
         <forge-app-bar slot="header" title-text="Skeleton">
@@ -89,7 +89,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Table</h3>
+    <h3 class="forge-typography--subtitle4">Table</h3>
     <div>
       <table style="width: 500px;">
         <thead>
diff --git a/src/dev/pages/stack/stack.ejs b/src/dev/pages/stack/stack.ejs
index 655bdc879..c450e69c4 100644
--- a/src/dev/pages/stack/stack.ejs
+++ b/src/dev/pages/stack/stack.ejs
@@ -1,4 +1,4 @@
-<p class="forge-typography--body2">Resize browser window to see wrapping (set inline and wrap to true)</p>
+<p>Resize browser window to see wrapping (set inline and wrap to true)</p>
 <div class="stack-container">
   <forge-stack id="main-demo" gap="16px">
     <div class="box"></div>
@@ -14,7 +14,7 @@
     <!-- Toolbar buttons -->
     <forge-card>
       <forge-toolbar style="--forge-toolbar-padding: 0" no-border>
-        <p slot="start" class="forge-typography--body2">Forge toolbar with perfectly spaced end slot buttons</p>
+        <p>Forge toolbar with perfectly spaced end slot buttons</p>
       </forge-toolbar>
       <forge-toolbar>
         <forge-stack inline slot="end">
@@ -31,7 +31,7 @@
     <!-- Vertical form -->
     <forge-card style="--forge-card-padding: 0;">
       <forge-toolbar>
-        <p slot="start" class="forge-typography--body2">Simple vertical form</p>
+        <p slot="start">Simple vertical form</p>
       </forge-toolbar>
       <form style="padding: 16px;">
         <forge-stack gap="16">
@@ -54,7 +54,7 @@
     <!-- Complex form -->
     <forge-card style="--forge-card-padding: 0;">
       <forge-toolbar>
-        <p slot="start" class="forge-typography--body2">Complex form</p>
+        <p slot="start">Complex form</p>
       </forge-toolbar>
       <form style="padding: 16px;">
         <forge-stack gap="16" stretch>
diff --git a/src/dev/pages/stepper/stepper.ejs b/src/dev/pages/stepper/stepper.ejs
index bfa8d191f..edae2efd7 100644
--- a/src/dev/pages/stepper/stepper.ejs
+++ b/src/dev/pages/stepper/stepper.ejs
@@ -1,5 +1,5 @@
 <div class="vert">
-  <h2 class="forge-typography--subtitle1">Default stepper</h2>
+  <h2 class="forge-typography--subtitle4">Default stepper</h2>
   <forge-stepper id="demo-stepper">
     <forge-step id="stepper-step-one">Step One</forge-step>
     <forge-step >Step Two <span slot="optional">An Alternate Message</span></forge-step>
@@ -9,12 +9,12 @@
   </forge-stepper>
 
   <div>
-    <h2 class="forge-typography--subtitle1">Stepper from configuration</h2>
+    <h2 class="forge-typography--subtitle4">Stepper from configuration</h2>
     <forge-stepper id="demo-config-stepper"></forge-stepper>
   </div>
   
   <div>
-    <h2 class="forge-typography--subtitle1">Vertical stepper variant</h2>
+    <h2 class="forge-typography--subtitle4">Vertical stepper variant</h2>
     <forge-stepper id="VerticalStepper" vertical>
       <forge-step id="stepper-step-one">Step One</forge-step> 
       <forge-step expanded ignore-user-expansion id="vertical-stepper-content">
diff --git a/src/dev/pages/switch/switch.ejs b/src/dev/pages/switch/switch.ejs
index 128ac0722..b06a45e75 100644
--- a/src/dev/pages/switch/switch.ejs
+++ b/src/dev/pages/switch/switch.ejs
@@ -1,33 +1,33 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Default</h3>
+    <h3 class="forge-typography--subtitle4">Default</h3>
     <forge-switch id="forge-switch-01" required aria-label="Active">
       <span>off/on</span>
     </forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Default (start label)</h3>
+    <h3 class="forge-typography--subtitle4">Default (start label)</h3>
     <forge-switch label-position="start">off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Dense</h3>
+    <h3 class="forge-typography--subtitle4">Dense</h3>
     <forge-switch dense>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled</h3>
+    <h3 class="forge-typography--subtitle4">Disabled</h3>
     <forge-switch disabled>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled (on)</h3>
+    <h3 class="forge-typography--subtitle4">Disabled (on)</h3>
     <forge-switch disabled selected>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Custom icons</h3>
+    <h3 class="forge-typography--subtitle4">Custom icons</h3>
     <forge-switch icon="both">
       <span>sad/happy</span>
       <forge-icon slot="icon-off" name="emoticon_sad"></forge-icon>
@@ -36,9 +36,9 @@
   </div>
 
   <form id="test-form">
-    <h3 class="forge-typography--subtitle1-secondary">Form associated</h3>
+    <h3 class="forge-typography--subtitle4">Form associated</h3>
     <label class="form-switch">
-      <span class="forge-typography--caption">off/on</span>
+      <span class="forge-typography--label">off/on</span>
       <forge-switch id="form-switch" name="test-switch" aria-label="Aria active"></forge-switch>
     </label>
     <button type="reset">Reset</button>
@@ -46,12 +46,12 @@
   </form>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Custom styling</h3>
+    <h3 class="forge-typography--subtitle4">Custom styling</h3>
     <forge-switch class="custom-switch" label-position="start">off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Prevent default</h3>
+    <h3 class="forge-typography--subtitle4">Prevent default</h3>
     <forge-switch id="prevent-switch">off/on</forge-switch>
   </div>
 </div>
diff --git a/src/dev/pages/tabs/tabs.ejs b/src/dev/pages/tabs/tabs.ejs
index c18863d8b..6b6be8100 100644
--- a/src/dev/pages/tabs/tabs.ejs
+++ b/src/dev/pages/tabs/tabs.ejs
@@ -22,7 +22,7 @@
 </div>
 
 <div class="tabs-demo">
-  <h2 class="forge-typography--subtitle1-secondary">Scrollable tabs</h2>
+  <h2 class="forge-typography--subtitle4">Scrollable tabs</h2>
   <forge-tab-bar id="demo-scrollable-tabs" active-tab="9" scroll-buttons>
     <forge-tab>Tab one</forge-tab>
     <forge-tab>Tab two</forge-tab>
@@ -48,7 +48,7 @@
 </div>
 
 <div class="tabs-demo">
-  <h2 class="forge-typography--subtitle1-secondary">Primary tabs w/icons</h2>
+  <h2 class="forge-typography--subtitle4">Primary tabs w/icons</h2>
   <forge-tab-bar stacked active-tab="0" style="max-width: 512px;">
     <forge-tab>
       <forge-icon slot="leading" name="videocam"></forge-icon>
@@ -66,7 +66,7 @@
 </div>
 
 <div class="tabs-demo">
-  <h2 class="forge-typography--subtitle1-secondary">Secondary tabs</h2>
+  <h2 class="forge-typography--subtitle4">Secondary tabs</h2>
   <forge-tab-bar secondary active-tab="0">
     <forge-tab>Overview</forge-tab>
     <forge-tab>Specs</forge-tab>
diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
index 25c9dbe65..83f1d823d 100644
--- a/src/dev/pages/theme/theme.ts
+++ b/src/dev/pages/theme/theme.ts
@@ -100,7 +100,7 @@ function buildSwatches(): void {
 
     if (group.header) {
       const header = document.createElement('h2');
-      header.classList.add('forge-typography--heading-03');
+      header.classList.add('forge-typography--subtitle4');
       header.textContent = group.header;
       container.appendChild(header);
     }
diff --git a/src/dev/pages/typography/typography.ejs b/src/dev/pages/typography/typography.ejs
index fa5007cee..83884af36 100644
--- a/src/dev/pages/typography/typography.ejs
+++ b/src/dev/pages/typography/typography.ejs
@@ -1,37 +1,38 @@
-<div class="forge-typography--heading-01">Heading 01</div>
-<div class="forge-typography--heading-02">Heading 02</div>
-<div class="forge-typography--heading-03">Heading 03</div>
-<div class="forge-typography--heading-04">Heading 04</div>
-<div class="forge-typography--heading-05">Heading 05</div>
-<div class="forge-typography--heading-06">Heading 06</div>
-<div class="forge-typography--display-01">Display 01</div>
-<div class="forge-typography--display-02">Display 02</div>
-<div class="forge-typography--display-03">Display 03</div>
-<div class="forge-typography--display-04">Display 04</div>
-<div class="forge-typography--display-05">Display 05</div>
-<div class="forge-typography--display-06">Display 06</div>
-<div class="forge-typography--body-01">Body 01</div>
-<div class="forge-typography--body-02">Body 02</div>
-<div class="forge-typography--body">Body (alias for Body 02)</div>
-<div class="forge-typography--title">Title</div>
-<div class="forge-typography--subtitle">Subtitle</div>
-<div class="forge-typography--label">Label</div>
-<div class="forge-typography--button">Button</div>
+<div class="section">
+  <div class="forge-typography--heading1">Heading 1</div>
+  <div class="forge-typography--heading2">Heading 2</div>
+  <div class="forge-typography--heading3">Heading 3</div>
+  <div class="forge-typography--heading4">Heading 4</div>
+  <div class="forge-typography--heading5">Heading 5</div>
+  <div class="forge-typography--heading6">Heading 6</div>
+</div>
 
-<forge-divider style="margin-block: 24px;"></forge-divider>
+<div class="section">
+  <div class="forge-typography--display1">Display 1</div>
+  <div class="forge-typography--display2">Display 2</div>
+  <div class="forge-typography--display3">Display 3</div>
+  <div class="forge-typography--display4">Display 4</div>
+  <div class="forge-typography--display5">Display 5</div>
+  <div class="forge-typography--display6">Display 6</div>
+</div>
 
-<div class="forge-typography--title">Title</div>
-<div class="forge-typography--headline1">Headline 1</div>
-<div class="forge-typography--headline2">Headline 2</div>
-<div class="forge-typography--headline3">Headline 3</div>
-<div class="forge-typography--headline4">Headline 4</div>
-<div class="forge-typography--headline5">Headline 5</div>
-<div class="forge-typography--headline6">Headline 6</div>
-<div class="forge-typography--subtitle1">Subtitle 1</div>
-<div class="forge-typography--subtitle2">Subtitle 2</div>
-<div class="forge-typography--body1">Body 1</div>
-<div class="forge-typography--body2">Body 2</div>
-<div class="forge-typography--caption">Caption</div>
-<div class="forge-typography--overline">Overline</span>
+<div class="section">
+  <div class="forge-typography--body1">Body 1</div>
+  <div class="forge-typography--body2">Body 2</div>
+</div>
+
+<div class="section">
+  <div class="forge-typography--title">Title</div>
+  <div class="forge-typography--subtitle1">Subtitle 1</div>
+  <div class="forge-typography--subtitle2">Subtitle 2</div>
+  <div class="forge-typography--subtitle3">Subtitle 3</div>
+  <div class="forge-typography--subtitle4">Subtitle 4</div>
+</div>
+
+<div class="section">
+  <div class="forge-typography--label">Label</div>
+  <div class="forge-typography--button">Button</div>
+  <div class="forge-typography--overline">Overline</div>
+</div>
 
 <script type="module" src="typography.ts"></script>
diff --git a/src/dev/pages/typography/typography.scss b/src/dev/pages/typography/typography.scss
new file mode 100644
index 000000000..841188028
--- /dev/null
+++ b/src/dev/pages/typography/typography.scss
@@ -0,0 +1,3 @@
+.section {
+  margin-block-end: 24px;
+}
diff --git a/src/dev/pages/typography/typography.ts b/src/dev/pages/typography/typography.ts
index 94c763cff..5bdbe1ff4 100644
--- a/src/dev/pages/typography/typography.ts
+++ b/src/dev/pages/typography/typography.ts
@@ -1,2 +1,3 @@
 import '$src/shared';
 import '@tylertech/forge/divider';
+import './typography.scss';
diff --git a/src/dev/pages/view-switcher/view-switcher.ts b/src/dev/pages/view-switcher/view-switcher.ts
index 2b9a95076..1b7911fdd 100644
--- a/src/dev/pages/view-switcher/view-switcher.ts
+++ b/src/dev/pages/view-switcher/view-switcher.ts
@@ -8,8 +8,8 @@ const tabBar = document.querySelector('forge-tab-bar#tab-bar') as ITabBarCompone
 const viewSwitcher = document.querySelector('forge-view-switcher#view-switcher') as IViewSwitcherComponent;
 const typeRadioGroup = document.querySelector('#view-switcher-animation-type-radiogroup');
 
-tabBar.addEventListener('forge-tab-bar-activate', ({ detail: { index }}) => {
-  viewSwitcher.index = index;
+tabBar.addEventListener('forge-tab-bar-change', ({ detail }) => {
+  viewSwitcher.index = detail;
 });
 
 typeRadioGroup.addEventListener('change', evt => {
diff --git a/src/dev/src/component-list.ts b/src/dev/src/component-list.ts
index 56b937545..37e28e6a8 100644
--- a/src/dev/src/component-list.ts
+++ b/src/dev/src/component-list.ts
@@ -127,7 +127,7 @@ function buildComponentsList(groups: IComponentGroup[]): HTMLElement[] {
 
   for (const { label: groupLabel, components } of groups) {
     const groupHeader = document.createElement('h3');
-    groupHeader.classList.add('forge-typography--subtitle1-secondary');
+    groupHeader.classList.add('forge-typography--subtitle3');
     groupHeader.textContent = groupLabel;
     elements.push(groupHeader);
 
diff --git a/src/dev/src/partials/header.ejs b/src/dev/src/partials/header.ejs
index ce9cc736e..5d2d08475 100644
--- a/src/dev/src/partials/header.ejs
+++ b/src/dev/src/partials/header.ejs
@@ -1,6 +1,6 @@
 <forge-app-bar slot="header" id="page-app-bar">
   <a slot="title" href="/">
-    <h1 class="forge-typography--headline5"><%= site.title %><%= title ? ` - ${title}` : null %></h1>
+    <h1 class="forge-typography--heading4"><%= site.title %><%= title ? ` - ${title}` : null %></h1>
     <forge-ripple></forge-ripple>
   </a>
   <forge-icon name="forge_logo" slot="logo"></forge-icon>
diff --git a/src/dev/src/partials/options-drawer.ejs b/src/dev/src/partials/options-drawer.ejs
index 62cbeb3ef..92dfc8c84 100644
--- a/src/dev/src/partials/options-drawer.ejs
+++ b/src/dev/src/partials/options-drawer.ejs
@@ -1,7 +1,7 @@
 <aside slot="body-left">
   <forge-drawer>
     <forge-toolbar slot="header">
-      <h2 slot="start" class="forge-typography--subtitle1-secondary">Options</h2>
+      <h2 slot="start" class="forge-typography--heading1">Options</h2>
     </forge-toolbar>
     <div class="options-container">
       <% controls.forEach(control => { %>
diff --git a/src/dev/src/partials/page.ejs b/src/dev/src/partials/page.ejs
index ad98d2f3f..0aefea1f8 100644
--- a/src/dev/src/partials/page.ejs
+++ b/src/dev/src/partials/page.ejs
@@ -13,7 +13,7 @@
         <forge-card class="card<%= !page.options?.length ? ' card--centered' : undefined %>">
           <!-- Card header-->
           <forge-toolbar>
-            <h2 slot="start" id="content-title" class="forge-typography--headline5"><%= page.contentTitle ?? page.title %></h2>
+            <h2 slot="start" id="content-title" class="forge-typography--title"><%= page.contentTitle ?? page.title %></h2>
           </forge-toolbar>
 
           <!-- Card content -->
diff --git a/src/lib/banner/banner.html b/src/lib/banner/banner.html
index daaee1d1f..5aca22ef5 100644
--- a/src/lib/banner/banner.html
+++ b/src/lib/banner/banner.html
@@ -6,7 +6,7 @@
           <slot name="icon"></slot>
         </div>
         <div class="forge-banner__container-wrapper-subsection" part="subsection-wrapper">
-          <div class="forge-banner__container-wrapper-subsection-text forge-typography--body1" part="subsection-text">
+          <div class="forge-banner__container-wrapper-subsection-text forge-typography--body2" part="subsection-text">
             <slot></slot>
           </div>
           <div class="forge-banner__container-wrapper-subsection-action" part="action-subsection">
diff --git a/src/lib/core/styles/_utils.scss b/src/lib/core/styles/_utils.scss
index b962ccbfd..a73845ed6 100644
--- a/src/lib/core/styles/_utils.scss
+++ b/src/lib/core/styles/_utils.scss
@@ -10,11 +10,11 @@
   @if not $value {
     @error 'Invalid #{$module} token: #{$key}';
   }
-  @return _create-var($module, $key, $value, $prefix);
+  @return create-var($module, $key, $value, $prefix);
 }
 
 ///
-/// Creates a CSS custom property declaration for a token in the provided module
+/// Creates a CSS custom property reference for a token in the provided module
 /// referencing an existing module token variable as the fallback.
 /// 
 /// To provide a module reference variable with a different fallback value, set the
@@ -27,7 +27,7 @@
 /// 
 @function module-ref($module, $token, $value, $type: ref, $prefix: config.$prefix) {
   $fallback: if($type == ref, module-var($value), $value);
-  @return _create-var($module, $token, $fallback, $prefix);
+  @return create-var($module, $token, $fallback, $prefix);
 }
 
 ///
@@ -38,7 +38,7 @@
 }
 
 ///
-/// Creates a CSS custom property declaration for a module token using the
+/// Creates a CSS custom property reference for a module token using the
 /// provided value as the variable fallback.
 /// 
 /// Example:
@@ -48,7 +48,7 @@
 /// ```
 /// 
 @function module-val($module, $token, $value, $prefix: config.$prefix) {
-  @return _create-var($module, $token, $value, $prefix);
+  @return create-var($module, $token, $value, $prefix);
 }
 
 ///
@@ -60,7 +60,7 @@
 /// ```
 ///
 @function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
-  @return _create-var($module, $token, $value, $prefix);
+  @return create-var($module, $token, $value, $prefix);
 }
 
 ///
@@ -72,22 +72,21 @@
     @if not map.get($module-tokens, $token-name) {
       @error 'Invalid token "#{$token-name}" for module "#{$module}"';
     }
-    --#{$prefix}-#{$module}-#{$token-name}: #{$token-value};
+    @include declare-var($module, $token-name, $token-value, $prefix);
   }
 }
 
 ///
 /// Creates a new map by inheriting from a base map and overriding/adding values.
-/// 
+///
 @function inherit-map($base, $overrides) {
   @return map.merge($base, $overrides);
 }
 
-
 ///
-/// Creates a CSS custom property declaration for a module token, using the provided fallback value.
+/// Creates a CSS custom property reference for a module token, using the provided fallback value.
 /// 
-@function _create-var($module, $token, $value: null, $prefix: config.$prefix) {
+@function create-var($module, $token, $value: null, $prefix: config.$prefix) {
   @if $value == null {
     @return var(--#{$prefix}-#{$module}-#{$token});
   }
@@ -102,6 +101,12 @@
   @return math.div(math.round($power * $value), $power);
 }
 
+/// Creates a CSS custom property declaration for a module token. 
+///
+@mixin declare-var($module, $name, $value, $prefix: config.$prefix) {
+  --#{$prefix}-#{$module}-#{$name}: #{$value};
+}
+
 ///
 /// Flattens multiple maps into a single map. 
 ///
diff --git a/src/lib/core/styles/tokens/list/list-item/_tokens.scss b/src/lib/core/styles/tokens/list/list-item/_tokens.scss
index 14d7138a3..08fdf5d75 100644
--- a/src/lib/core/styles/tokens/list/list-item/_tokens.scss
+++ b/src/lib/core/styles/tokens/list/list-item/_tokens.scss
@@ -17,9 +17,9 @@ $tokens: (
 
   // Supporting text
   supporting-text-color: utils.module-val(list-item, supporting-text-color, theme.variable(text-medium)),
-  supporting-text-font-size: utils.module-val(list-item, supporting-text-font-size, typography.variable(body, font-size)),
-  supporting-text-font-weight: utils.module-val(list-item, supporting-text-font-weight, typography.variable(body, font-weight)),
-  supporting-text-line-height: utils.module-val(list-item, supporting-text-line-height, typography.scale(24)),
+  supporting-text-font-size: utils.module-val(list-item, supporting-text-font-size, typography.variable(body2, font-size)),
+  supporting-text-font-weight: utils.module-val(list-item, supporting-text-font-weight, typography.variable(body2, font-weight)),
+  supporting-text-line-height: utils.module-val(list-item, supporting-text-line-height, typography.scale('1500')),
 
   // Selected
   selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)),
diff --git a/src/lib/core/styles/tokens/typography/_scale.scss b/src/lib/core/styles/tokens/typography/_scale.scss
new file mode 100644
index 000000000..77dc17b5d
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_scale.scss
@@ -0,0 +1,28 @@
+@use 'sass:map';
+
+$scale: (
+  '0075': 0.75,  // 12px
+  '0875': 0.875, // 14px
+  '1000': 1,     // 16px
+  '1125': 1.125, // 18px
+  '1250': 1.25,  // 20px
+  '1375': 1.375, // 22px
+  '1500': 1.5,   // 24px
+  '1750': 1.75,  // 28px
+  '2000': 2,     // 32px
+  '2125': 2.125, // 34px
+  '2250': 2.25,  // 36px
+  '2500': 2.5,   // 40px
+  '2625': 2.625, // 42px
+  '2750': 2.75,  // 44px
+  '3000': 3,     // 48px
+  '3500': 3.5,   // 56px
+  '4000': 4      // 64px
+) !default;
+
+@function value($key) {
+  @if not map.has-key($scale, $key) {
+    @error 'Unknown scale value `#{$key}`.';
+  }
+  @return map.get($scale, $key);
+}
diff --git a/src/lib/core/styles/tokens/typography/_tokens.body.scss b/src/lib/core/styles/tokens/typography/_tokens.body.scss
new file mode 100644
index 000000000..352e6f527
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.body.scss
@@ -0,0 +1,23 @@
+@use '../../theme';
+@use '../../utils';
+@use './type-utils';
+@use './tokens.core' as core;
+
+// Less important body text
+$body1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '0875'),
+  line-height: type-utils.font-size-relative(body, line-height, '1125'),
+  letter-spacing: 0.0178571429em
+)) !default;
+
+// Standard body text
+$body2: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1000'),
+  line-height: type-utils.font-size-relative(body, line-height, '1500'),
+  letter-spacing: 0.03125em
+)) !default;
+
+$tokens: (
+  body1: $body1,
+  body2: $body2
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.core.scss b/src/lib/core/styles/tokens/typography/_tokens.core.scss
new file mode 100644
index 000000000..910aaf0c0
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.core.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../../utils';
+@use '../../core/config';
+@use './weight';
+
+// Base typography style values
+$font-family: 'Roboto', sans-serif !default;
+$font-size: 1rem !default; // 16px
+
+// The base typography styles that other styles inherit from.
+$base: (
+  font-family: utils.create-var(typography, font-family, $font-family),
+  font-size: utils.create-var(typography, font-size, $font-size),
+  font-weight: weight.value(regular),
+  line-height: normal,
+  letter-spacing: normal,
+  text-transform: inherit,
+  text-decoration: inherit
+) !default;
+
+@function get($key) {
+  @if not map.has-key($base, $key) {
+    @error 'No typography style exists with the key `#{$key}`.';
+  }
+  @return map.get($base, $key);
+}
diff --git a/src/lib/core/styles/tokens/typography/_tokens.display.scss b/src/lib/core/styles/tokens/typography/_tokens.display.scss
new file mode 100644
index 000000000..2af1c2f6b
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.display.scss
@@ -0,0 +1,44 @@
+@use '../../utils';
+@use './type-utils';
+@use './tokens.core' as core;
+@use './weight';
+
+$display1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(display1, font-size, '1500'),
+  font-weight: weight.value(light),
+  line-height: type-utils.font-size-relative(display1, line-height, '2000')
+)) !default;
+
+$display2: utils.inherit-map($display1, (
+  font-size: type-utils.font-size-relative(display2, font-size, '1750'),
+  line-height: type-utils.font-size-relative(display2, line-height, '2125')
+)) !default;
+
+$display3: utils.inherit-map($display2, (
+  font-size: type-utils.font-size-relative(display3, font-size, '2000'),
+  line-height: type-utils.font-size-relative(display3, line-height, '2500')
+)) !default;
+
+$display4: utils.inherit-map($display3, (
+  font-size: type-utils.font-size-relative(display4, font-size, '2250'),
+  line-height: type-utils.font-size-relative(display4, line-height, '2750')
+)) !default;
+
+$display5: utils.inherit-map($display4, (
+  font-size: type-utils.font-size-relative(display5, font-size, '2500'),
+  line-height: type-utils.font-size-relative(display5, line-height, '3000')
+)) !default;
+
+$display6: utils.inherit-map($display5, (
+  font-size: type-utils.font-size-relative(display6, font-size, '3000'),
+  line-height: type-utils.font-size-relative(display6, line-height, '4000')
+)) !default;
+
+$tokens: (
+  display1: $display1,
+  display2: $display2,
+  display3: $display3,
+  display4: $display4,
+  display5: $display5,
+  display6: $display6
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.heading.scss b/src/lib/core/styles/tokens/typography/_tokens.heading.scss
new file mode 100644
index 000000000..d27a4a94f
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.heading.scss
@@ -0,0 +1,48 @@
+@use '../../utils';
+@use './type-utils';
+@use './weight';
+@use './tokens.core' as core;
+
+$heading1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(heading1, font-size, '0875'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(heading1, line-height, '1250'),
+  letter-spacing: 0.0071428571em
+)) !default;
+
+$heading2: utils.inherit-map($heading1, (
+  font-size: type-utils.font-size-relative(heading2, font-size, '1000'),
+  line-height: type-utils.font-size-relative(heading2, line-height, '1250'),
+  letter-spacing: 0.009375em
+)) !default;
+
+$heading3: utils.inherit-map($heading2, (
+  font-size: type-utils.font-size-relative(heading3, font-size, '1125'),
+  line-height: type-utils.font-size-relative(heading3, line-height, '1500'),
+  letter-spacing: 0.0125em
+)) !default;
+
+$heading4: utils.inherit-map($heading3, (
+  font-size: type-utils.font-size-relative(heading4, font-size, '1250'),
+  line-height: type-utils.font-size-relative(heading4, line-height, '1750'),
+  letter-spacing: normal
+)) !default;
+
+$heading5: utils.inherit-map($heading4, (
+  font-size: type-utils.font-size-relative(heading5, font-size, '1500'),
+  line-height: type-utils.font-size-relative(heading5, line-height, '2000'),
+)) !default;
+
+$heading6: utils.inherit-map($heading5, (
+  font-size: type-utils.font-size-relative(heading6, font-size, '1750'),
+  line-height: type-utils.font-size-relative(heading6, line-height, '2250'),
+)) !default;
+
+$tokens: (
+  heading1: $heading1,
+  heading2: $heading2,
+  heading3: $heading3,
+  heading4: $heading4,
+  heading5: $heading5,
+  heading6: $heading6
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.label.scss b/src/lib/core/styles/tokens/typography/_tokens.label.scss
new file mode 100644
index 000000000..34ad0871f
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.label.scss
@@ -0,0 +1,32 @@
+@use '../../utils';
+@use './type-utils';
+@use './weight';
+@use './scale';
+@use './tokens.core' as core;
+
+$label: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(label, font-size, '0075'),
+  line-height: type-utils.font-size-relative(label, line-height, '1250'),
+  letter-spacing: 0.0333333333em
+)) !default;
+
+$button: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(button, font-size, '0875'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(button, line-height, '2250'),
+  letter-spacing: 0.0892857143em
+)) !default;
+
+$overline: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(overline, font-size, '0075'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(overline, line-height, '2000'),
+  letter-spacing: 0.1666666667em,
+  text-transform: uppercase
+)) !default;
+
+$tokens: (
+  label: $label,
+  button: $button,
+  overline: $overline
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.scss b/src/lib/core/styles/tokens/typography/_tokens.scss
index 33e946bc5..097b5e622 100644
--- a/src/lib/core/styles/tokens/typography/_tokens.scss
+++ b/src/lib/core/styles/tokens/typography/_tokens.scss
@@ -1,220 +1,25 @@
 @use 'sass:map';
-@use 'sass:list';
-@use '../../core/config';
-@use '../../theme';
 @use '../../utils';
-
-/// Base typography style values
-$font-family: 'Roboto', sans-serif !default;
-$font-size: 1rem !default; // 16px
-
-/// The Forge typography scale system
-$font-scale: (
-  12: 0.75,
-  14: 0.875,
-  16: 1,
-  18: 1.125,
-  20: 1.25,
-  22: 1.375,
-  24: 1.5,
-  28: 1.75,
-  32: 2,
-  34: 2.125,
-  36: 2.25,
-  40: 2.5,
-  42: 2.625,
-  44: 2.75,
-  48: 3,
-  56: 3.5,
-  64: 4,
-) !default;
-
-/// Available font weights for Forge typography styles
-$font-weight: (
-  light: 300,
-  regular: 400,
-  medium: 500,
-  bold: 700
-) !default;
-
-/// The base typography styles that other styles inherit from.
-$base: (
-  font-family: var(--#{config.$prefix}-typography-font-family, #{$font-family}),
-  font-size: var(--#{config.$prefix}-typography-font-size, #{$font-size}),
-  font-weight: map.get($font-weight, regular),
-  line-height: normal,
-  letter-spacing: normal,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-high)
+@use './tokens.body' as body;
+@use './tokens.display' as display;
+@use './tokens.heading' as heading;
+@use './tokens.label' as label;
+@use './tokens.title' as title;
+
+$tokens: utils.flatten(
+  heading.$tokens,
+  display.$tokens,
+  label.$tokens,
+  body.$tokens,
+  title.$tokens
 ) !default;
 
 ///
-/// Creates a style value that is relative to the base font size for the given property.
+/// Retrieves a typography style token value.
 /// 
-/// This allows for typography styles to be scaled relative to the root font size, or
-/// relative to a specific CSS custom property if optionally applied. This is useful
-/// when embedding Forge in an application that adjusts the root `font-size` to something
-/// other than `16px` (browser default).
-///
-@function _font-size-relative($style, $property, $scale) {
-  @return calc(#{map.get($base, font-size)} * var(--#{config.$prefix}-typography-#{$style}-#{$property}-scale, #{$scale}));
-}
-
-/// Heading
-$heading-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(heading-01, font-size, map.get($font-scale, 14)),
-  font-weight: map.get($font-weight, medium),
-  line-height: _font-size-relative(heading-01, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.0071428571em
-)) !default;
-
-$heading-02: utils.inherit-map($heading-01, (
-  font-size: _font-size-relative(heading-02, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(heading-02, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.009375em
-)) !default;
-
-$heading-03: utils.inherit-map($heading-02, (
-  font-size: _font-size-relative(heading-03, font-size, map.get($font-scale, 18)),
-  line-height: _font-size-relative(heading-03, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.0125em
-)) !default;
-
-$heading-04: utils.inherit-map($heading-03, (
-  font-size: _font-size-relative(heading-04, font-size, map.get($font-scale, 20)),
-  line-height: _font-size-relative(heading-04, line-height, map.get($font-scale, 28)),
-  letter-spacing: normal
-)) !default;
-
-$heading-05: utils.inherit-map($heading-04, (
-  font-size: _font-size-relative(heading-05, font-size, map.get($font-scale, 24)),
-  line-height: _font-size-relative(heading-05, line-height, map.get($font-scale, 32)),
-)) !default;
-
-$heading-06: utils.inherit-map($heading-05, (
-  font-size: _font-size-relative(heading-06, font-size, map.get($font-scale, 28)),
-  line-height: _font-size-relative(heading-06, line-height, map.get($font-scale, 36)),
-)) !default;
-
-/// Display
-$display-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(display-01, font-size, map.get($font-scale, 24)),
-  font-weight: map.get($font-weight, light),
-  line-height: _font-size-relative(display-01, line-height, map.get($font-scale, 30)),
-)) !default;
-
-$display-02: utils.inherit-map($display-01, (
-  font-size: _font-size-relative(display-02, font-size, map.get($font-scale, 28)),
-  line-height: _font-size-relative(display-02, line-height, map.get($font-scale, 34)),
-)) !default;
-
-$display-03: utils.inherit-map($display-02, (
-  font-size: _font-size-relative(display-03, font-size, map.get($font-scale, 32)),
-  line-height: _font-size-relative(display-03, line-height, map.get($font-scale, 40)),
-)) !default;
-
-$display-04: utils.inherit-map($display-03, (
-  font-size: _font-size-relative(display-04, font-size, map.get($font-scale, 36)),
-  line-height: _font-size-relative(display-04, line-height, map.get($font-scale, 44)),
-)) !default;
-
-$display-05: utils.inherit-map($display-04, (
-  font-size: _font-size-relative(display-05, font-size, map.get($font-scale, 40)),
-  line-height: _font-size-relative(display-05, line-height, map.get($font-scale, 48)),
-)) !default;
-
-$display-06: utils.inherit-map($display-05, (
-  font-size: _font-size-relative(display-06, font-size, map.get($font-scale, 48)),
-  line-height: _font-size-relative(display-06, line-height, map.get($font-scale, 64)),
-)) !default;
-
-/// Title
-$title: utils.inherit-map($heading-03, (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(title, font-size, map.get($font-scale, 20)),
-  font-weight: map.get($font-weight, regular),
-  line-height: _font-size-relative(title, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.0125em,
-)) !default;
-
-/// Subtitle
-$subtitle: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(subtitle, font-size, map.get($font-scale, 16)),
-  font-weight: map.get($base, font-weight),
-  line-height: _font-size-relative(subtitle, line-height, map.get($font-scale, 28)),
-  letter-spacing: 0.009375em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-medium)
-) !default;
-
-$body-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 14)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.0178571429em
-)) !default;
-
-$body-02: utils.inherit-map($base, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.03125em
-)) !default;
-
-$body: utils.inherit-map($body-01, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
-)) !default;
-
-/// Label
-$label: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(label, font-size, 0.75), // 12px
-  font-weight: map.get($base, font-weight),
-  line-height: _font-size-relative(label, line-height, 1.25), // 20px
-  letter-spacing: 0.0333333333em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-/// Button
-$button: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(button, font-size, 0.875), // 14px
-  font-weight: 500,
-  line-height: _font-size-relative(button, line-height, 2.25), // 36px
-  letter-spacing: 0.0892857143em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-$tokens: (
-  heading-01: $heading-01,
-  heading-02: $heading-02,
-  heading-03: $heading-03,
-  heading-04: $heading-04,
-  heading-05: $heading-05,
-  heading-06: $heading-06,
-  display-01: $display-01,
-  display-02: $display-02,
-  display-03: $display-03,
-  display-04: $display-04,
-  display-05: $display-05,
-  display-06: $display-06,
-  title: $title,
-  subtitle: $subtitle,
-  body-01: $body-01,
-  body-02: $body-02,
-  body: $body,
-  label: $label,
-  button: $button
-) !default;
-
-///
-/// Returns a typography style token value.
+/// @param {String} $style - The typography style.
+/// @param {String} $token - The token within the provided style.
+/// @return {String} - The value of the style token.
 /// 
 @function get($style, $token) {
   $style-tokens: map.get($tokens, $style);
diff --git a/src/lib/core/styles/tokens/typography/_tokens.title.scss b/src/lib/core/styles/tokens/typography/_tokens.title.scss
new file mode 100644
index 000000000..45a92c067
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.title.scss
@@ -0,0 +1,43 @@
+@use '../../utils';
+@use '../../theme';
+@use './weight';
+@use './type-utils';
+@use './tokens.core' as core;
+@use './tokens.heading' as heading;
+
+$title: utils.inherit-map(heading.$heading3, (
+  font-size: type-utils.font-size-relative(title, font-size, '1250'),
+  font-weight: weight.value(regular),
+  line-height: type-utils.font-size-relative(title, line-height, '2000'),
+  letter-spacing: 0.0125em
+)) !default;
+
+$subtitle1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(subtitle, font-size, '0875'),
+  line-height: type-utils.font-size-relative(subtitle, line-height, '1375'),
+  letter-spacing: 0.0087500001em
+)) !default;
+
+$subtitle2: utils.inherit-map($subtitle1, (
+  font-weight: weight.value(medium),
+  letter-spacing: 0.0071428571em
+)) !default;
+
+$subtitle3: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(subtitle, font-size, '1000'),
+  line-height: type-utils.font-size-relative(subtitle, line-height, '1500'),
+  letter-spacing: 0.01em
+)) !default;
+  
+$subtitle4: utils.inherit-map($subtitle3, (
+  font-weight: weight.value(medium),
+  letter-spacing: 0.009375em
+)) !default;
+
+$tokens: (
+  title: $title,
+  subtitle1: $subtitle1,
+  subtitle2: $subtitle2,
+  subtitle3: $subtitle3,
+  subtitle4: $subtitle4
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_type-utils.scss b/src/lib/core/styles/tokens/typography/_type-utils.scss
new file mode 100644
index 000000000..f6fa0a786
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_type-utils.scss
@@ -0,0 +1,20 @@
+@use '../../core/config';
+@use './tokens.core' as core;
+@use './scale';
+
+$module: 'typography' !default;
+$token: 'scale' !default;
+
+///
+/// Creates a style value that is relative to the base font size for the given property.
+/// 
+/// This allows for typography styles to be scaled relative to the root font size, or
+/// relative to a specific CSS custom property if optionally applied. This is useful
+/// when embedding Forge in an application that adjusts the root `font-size` to something
+/// other than `16px` (browser default).
+///
+@function font-size-relative($style, $property, $scale) {
+  $scale-value: scale.value($scale);
+  $var-name: '--#{config.$prefix}-#{$module}-#{$style}-#{$property}-#{$token}';
+  @return calc(#{core.get(font-size)} * var(#{$var-name}, #{$scale-value}));
+}
diff --git a/src/lib/core/styles/tokens/typography/_weight.scss b/src/lib/core/styles/tokens/typography/_weight.scss
new file mode 100644
index 000000000..360be0b5b
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_weight.scss
@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+$font-weight: (
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700
+) !default;
+
+@function value($weight) {
+  @if not map.has-key($font-weight, $weight) {
+    @error 'Invalid font weight: "#{$weight}"';
+  }
+  @return map.get($font-weight, $weight);
+}
diff --git a/src/lib/core/styles/typography/index.scss b/src/lib/core/styles/typography/index.scss
index ae2321b30..e09ed3e2e 100644
--- a/src/lib/core/styles/typography/index.scss
+++ b/src/lib/core/styles/typography/index.scss
@@ -2,7 +2,10 @@
 @use 'sass:list';
 @use '../core/config';
 @use '../utils';
+@use '../theme';
 @use '../tokens/typography/tokens';
+@use '../tokens/typography/scale';
+@use '../tokens/typography/tokens.core' as core;
 
 @forward '../tokens/typography/tokens';
 
@@ -27,8 +30,7 @@
     line-height: _get-style-value($style, line-height),
     letter-spacing: _get-style-value($style, letter-spacing),
     text-transform: _get-style-value($style, text-transform),
-    text-decoration: _get-style-value($style, text-decoration),
-    color: _get-style-value($style, color)
+    text-decoration: _get-style-value($style, text-decoration)
   );
 
   -moz-osx-font-smoothing: grayscale;
@@ -52,7 +54,7 @@
 /// Gets the value of a typography scale token.
 /// 
 @function scale($scale) {
-  @return #{map.get(tokens.$font-scale, $scale)}rem;
+  @return #{scale.value($scale)}rem;
 }
 
 @mixin ellipse {
@@ -67,8 +69,10 @@
 @mixin base {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-family: map.get(tokens.$base, font-family);
-  color: map.get(tokens.$base, color);
+  font-family: core.get(font-family);
+  color: theme.variable(text-high);
+
+  @include style(body2);
 }
 
 ///
@@ -127,7 +131,7 @@
 /// ```
 /// 
 @function font-size-relative($scale) {
-  @return calc(#{map.get(tokens.$base, font-size)} * #{$scale});
+  @return calc(#{core.get(font-size)} * #{$scale});
 }
 
 @function _get-style-value($style, $token) {
diff --git a/src/lib/list/list-item/_core.scss b/src/lib/list/list-item/_core.scss
index 973cfc442..ab462ce05 100644
--- a/src/lib/list/list-item/_core.scss
+++ b/src/lib/list/list-item/_core.scss
@@ -33,7 +33,7 @@
 }
 
 @mixin text-container {
-  @include typography.style(body, $exclude: [font-size font-weight line-height]);
+  @include typography.style(body2, $exclude: [font-size font-weight line-height]);
   @include typography.ellipse;
 
   box-sizing: border-box;
@@ -73,7 +73,7 @@
 }
 
 @mixin supporting-text {
-  @include typography.style(body-01);
+  @include typography.style(body1);
   @include typography.ellipse;
 
   color: var(--_supporting-text-color);
diff --git a/src/lib/slider/_core.scss b/src/lib/slider/_core.scss
index 2b5f8deba..ed0df27c6 100644
--- a/src/lib/slider/_core.scss
+++ b/src/lib/slider/_core.scss
@@ -194,7 +194,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handle-label {
-  @include typography.style(label, $exclude: [color font-weight]);
+  @include typography.style(label, $exclude: [font-weight]);
 
   position: absolute;
   box-sizing: border-box;
diff --git a/src/lib/typography/_mixins.scss b/src/lib/typography/_mixins.scss
index 5fc128b9f..2bd4e2155 100644
--- a/src/lib/typography/_mixins.scss
+++ b/src/lib/typography/_mixins.scss
@@ -9,26 +9,6 @@
 @use '../theme/custom-properties';
 
 @mixin core-styles() {
-  .forge-typography {
-    @include mdc-typography.base;
-    @include theme.css-custom-property(color, --mdc-theme-text-primary-on-background, mdc-theme-color.prop-value(text-primary-on-background));
-  }
-
-  // Create custom classes for built-in MDC typography styles
-  @each $style in map.keys(mdc-typography.$styles) {
-    .forge-typography--#{$style} {
-      @include mdc-typography.typography($style);
-      @include apply-additional-styles(variables.$mdc-typography-additional-styles, $style);
-    }
-  }
-  
-  // Create classes for forge-specific typography styles
-  @each $style in map.keys(variables.$styles) {
-    .forge-typography--#{$style} {
-      @include typography($style);
-    }
-  }
-  
   :root {
     // forge-specific MDC typography overrides
     @each $style, $properties in variables.$mdc-typography-overrides {
diff --git a/src/stories/StorybookMdxProvider.tsx b/src/stories/StorybookMdxProvider.tsx
index 0dccbf49b..f4bdb1ef9 100644
--- a/src/stories/StorybookMdxProvider.tsx
+++ b/src/stories/StorybookMdxProvider.tsx
@@ -16,9 +16,9 @@ import { LiveDemoStage } from './src/core/live-demo-stage';
 
 export const StorybookMdxComponents: Record<string, FC> = {
   wrapper: ({ children }: any) => <ForgeCard style={{ '--forge-card-padding': '16px 0' }}>{children}</ForgeCard>,
-  h1: (props: any) => <h1 {...props} className="forge-typography--headline5" style={{marginTop: '16px'}}>{props.children}</h1>,
+  h1: (props: any) => <h1 {...props} className="forge-typography--heading4" style={{marginTop: '16px'}}>{props.children}</h1>,
   h2: (props: any) => <h2 {...props} className="forge-typography--title forge-docs-core--header1">{props.children}</h2>,
-  h3: (props: any) => <h3 {...props} className="forge-typography--subtitle1-secondary forge-docs-core--header2">{props.children}</h3>,
+  h3: (props: any) => <h3 {...props} className="forge-typography--subtitle4 forge-docs-core--header2">{props.children}</h3>,
   table: (props: any) => <table {...props} className="forge-docs-core__table" />,
   section: (props: any) => <section {...props} className="forge-docs-core__section">{props.children}</section>,
   blockquote: (props: any) => <Blockquote {...props} />,
diff --git a/src/stories/src/components/backdrop/backdrop.stories.tsx b/src/stories/src/components/backdrop/backdrop.stories.tsx
index 8a47cdaa5..b8fc5ca0a 100644
--- a/src/stories/src/components/backdrop/backdrop.stories.tsx
+++ b/src/stories/src/components/backdrop/backdrop.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story<IBackdropProps> = ({
       <ForgeButton type="raised">
         <button onClick={openBackdrop}>Show backdrop</button>
       </ForgeButton>
-      <p className="forge-typography--caption">(When open, click backdrop to close)</p>
+      <p className="forge-typography--label">(When open, click backdrop to close)</p>
       <ForgeBackdrop
         ref={backdropRef}
         delay={delay}
diff --git a/src/stories/src/components/button-area/button-area.stories.tsx b/src/stories/src/components/button-area/button-area.stories.tsx
index ff92613b3..796306118 100644
--- a/src/stories/src/components/button-area/button-area.stories.tsx
+++ b/src/stories/src/components/button-area/button-area.stories.tsx
@@ -48,7 +48,7 @@ export const Default: Story<IButtonAreaProps> = ({
         <button slot="button" type="button" disabled={disabled}>{label}</button>
         <div style={contentStyle}>
           <div style={textStyle}>
-            <div className="forge-typography--headline5">Heading</div>
+            <div className="forge-typography--heading4">Heading</div>
             <div>Content</div>
           </div>
           <ForgeIconButton data-forge-ignore>
@@ -90,7 +90,7 @@ export const InExpansionPanel: Story<IButtonAreaProps> = ({
           <button ref={buttonRef} slot="button" type="button" disabled={disabled} aria-controls="expandable-content" aria-expanded="false">{label}</button>
           <div style={contentStyle}>
             <div style={textStyle}>
-              <div className="forge-typography--headline5">Heading</div>
+              <div className="forge-typography--heading4">Heading</div>
               <div>Content</div>
             </div>
             <ForgeIconButton data-forge-ignore>
diff --git a/src/stories/src/components/card/card.stories.tsx b/src/stories/src/components/card/card.stories.tsx
index 3c5763a20..365ef633f 100644
--- a/src/stories/src/components/card/card.stories.tsx
+++ b/src/stories/src/components/card/card.stories.tsx
@@ -63,7 +63,7 @@ export const Styled: Story<ICardProps> = ({
     <div style={containerStyle}>
       <ForgeCard raised={raised} style={{'--forge-card-padding': '16px'}}>
         <div style={headerStyle}>
-          <h3 className="forge-typography--headline6">This is the card title</h3>
+          <h3 className="forge-typography--heading4">This is the card title</h3>
           <ForgeIconButton>
             <button type="button">
               <ForgeIcon name="more_vert" />
@@ -71,7 +71,7 @@ export const Styled: Story<ICardProps> = ({
           </ForgeIconButton>
         </div>
         <div>
-          <p className="forge-typography--body2">{LOREM_IPSUM.p1}</p>
+          <p>{LOREM_IPSUM.p1}</p>
         </div>
         <div style={footerStyle}>
           <div>
@@ -101,7 +101,7 @@ export const WithScaffold: Story<ICardProps> = ({
           <h1 slot="start" className="forge-typography--title">Lorem ipsum</h1>
         </ForgeToolbar>
 
-        <p slot="body" className="forge-typography--body2" tabIndex={0} style={{padding: '16px', margin: '0'}}>
+        <p slot="body" tabIndex={0} style={{padding: '16px', margin: '0'}}>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed
           aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
           enim sint nesciunt provident excepturi dolorum pariatur illum?
diff --git a/src/stories/src/components/card/code/card-scaffold.ts b/src/stories/src/components/card/code/card-scaffold.ts
index a36523d67..55094749a 100644
--- a/src/stories/src/components/card/code/card-scaffold.ts
+++ b/src/stories/src/components/card/code/card-scaffold.ts
@@ -6,7 +6,7 @@ export const CardScaffoldCodeHtml = () => {
       <h1 slot="start" class="forge-typography--title">Lorem ipsum</h1>
     </forge-toolbar>
 
-    <p slot="body" class="forge-typography--body2" tabindex="0" class="card-content">
+    <p slot="body" tabindex="0" class="card-content">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed
       aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
       enim sint nesciunt provident excepturi dolorum pariatur illum?
diff --git a/src/stories/src/components/card/code/card-styled.ts b/src/stories/src/components/card/code/card-styled.ts
index f2b87f205..b1525f0b8 100644
--- a/src/stories/src/components/card/code/card-styled.ts
+++ b/src/stories/src/components/card/code/card-styled.ts
@@ -3,7 +3,7 @@ export const CardStyledCodeHtml = () => {
 <div class="demo-card">
   <forge-card>
     <div class="forge-card-header-container">
-      <h3 class="forge-typography--headline6">This is the card title</h3>
+      <h3 class="forge-typography--heading4">This is the card title</h3>
       <forge-icon-button>
         <button type="button">
           <forge-icon name="more_vert"></forge-icon>
@@ -12,7 +12,7 @@ export const CardStyledCodeHtml = () => {
     </div>
 
     <div>
-      <p class="forge-typography--body2">
+      <p>
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem doloremque dolorem ullam, nesciunt quia velit necessitatibus numquam quasi voluptates impedit earum dolores repudiandae facilis totam non quo labore itaque?
       </p>
     </div>
diff --git a/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx b/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx
index 906ab2038..0e269a5a4 100644
--- a/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx
+++ b/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx
@@ -38,7 +38,7 @@ export const Default: Story<IKeyboardShortcutProps> = ({
 
   return (
     <div>
-      <div className="forge-typography--body2" style={{ marginBottom: '16px' }}>Focus an element and press the key combination ({key})</div>
+      <div className="forge-typography--body1" style={{ marginBottom: '16px' }}>Focus an element and press the key combination ({key})</div>
       <form style={gridStyles}>
         <ForgeTextField>
           <label slot="label" htmlFor="first-name">First name</label>
diff --git a/src/stories/src/components/popup/popup.stories.tsx b/src/stories/src/components/popup/popup.stories.tsx
index 534b7f317..06b482074 100644
--- a/src/stories/src/components/popup/popup.stories.tsx
+++ b/src/stories/src/components/popup/popup.stories.tsx
@@ -39,7 +39,7 @@ export const Default: Story<IPopupProps> = ({
         open={isOpen}
         onDismiss={() => setIsOpen(false)}
         options={{ placement, manageFocus, animationType, offset }}>
-        <div style={{ width: '256px', padding: '16px' }} className="forge-typography--body1">
+        <div style={{ width: '256px', padding: '16px' }}>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum, est iste.
           Tempore iure iste molestias expedita, laboriosam magni a nostrum, ullam molestiae,
           obcaecati dicta ipsam provident aut praesentium eius dolore!
diff --git a/src/stories/src/components/view-switcher/view-switcher.stories.tsx b/src/stories/src/components/view-switcher/view-switcher.stories.tsx
index c8b92afa2..0367fdfa3 100644
--- a/src/stories/src/components/view-switcher/view-switcher.stories.tsx
+++ b/src/stories/src/components/view-switcher/view-switcher.stories.tsx
@@ -42,13 +42,13 @@ export const Default: Story<IViewSwitcherProps> = ({
 
         <ForgeViewSwitcher {...viewSwitcherProps} index={index}>
           <ForgeView id="tabpanel-1" aria-labelledby="tab-1" role="tabpanel">
-            <div style={viewStyles} className="forge-typography--body1">View one</div>
+            <div style={viewStyles}>View one</div>
           </ForgeView>
           <ForgeView id="tabpanel-2" aria-labelledby="tab-2" role="tabpanel">
-            <div style={viewStyles} className="forge-typography--body1">View two</div>
+            <div style={viewStyles}>View two</div>
           </ForgeView>
           <ForgeView id="tabpanel-3" aria-labelledby="tab-3" role="tabpanel">
-            <div style={viewStyles} className="forge-typography--body1">View three</div>
+            <div style={viewStyles}>View three</div>
           </ForgeView>
         </ForgeViewSwitcher>
       </div>