diff --git a/.changeset/nervous-experts-camp.md b/.changeset/nervous-experts-camp.md
new file mode 100644
index 0000000000..fc239a0b39
--- /dev/null
+++ b/.changeset/nervous-experts-camp.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Convert typography to use `rem` units with `px` fallbacks 
diff --git a/src/base/base.scss b/src/base/base.scss
index bdd4b39f82..f82f8fec88 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
 * {
   box-sizing: border-box;
 }
@@ -14,7 +14,7 @@ button {
 
 body {
   font-family: $body-font;
-  font-size: $body-font-size;
+  font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
diff --git a/src/primitives/index.scss b/src/primitives/index.scss
index 1a6bf9d92e..e28c2c0724 100644
--- a/src/primitives/index.scss
+++ b/src/primitives/index.scss
@@ -7,3 +7,4 @@
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
+@import './temp-typography-tokens.scss';
diff --git a/src/primitives/temp-typography-tokens.scss b/src/primitives/temp-typography-tokens.scss
new file mode 100644
index 0000000000..35adedf8ed
--- /dev/null
+++ b/src/primitives/temp-typography-tokens.scss
@@ -0,0 +1,22 @@
+// Temporary typography vars in rem units variables
+:root {
+  // Heading sizes - mobile
+  // h4-h6 remain the same size on both mobile & desktop
+  --h00-size-mobile: 2.5rem;
+  --h0-size-mobile: 2rem;
+  --h1-size-mobile: 1.625rem;
+  --h2-size-mobile: 1.375rem;
+  --h3-size-mobile: 1.125rem;
+
+  // Heading sizes - desktop
+  --h00-size: 3rem;
+  --h0-size: 2.5rem;
+  --h1-size: 2rem;
+  --h2-size: 1.5rem;
+  --h3-size: 1.25rem;
+  --h4-size: 1rem;
+  --h5-size: 0.875rem;
+  --h6-size: 0.75rem;
+  --body-font-size: 0.875rem;
+  --font-size-small: 0.75rem;
+}
diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss
index cc5e858349..a5a0381d4e 100644
--- a/src/support/mixins/typography.scss
+++ b/src/support/mixins/typography.scss
@@ -10,32 +10,32 @@
 // Heading mixins for use within components
 // These match heading utilities in utilities/typography
 @mixin h1 {
-  font-size: $h1-size;
+  font-size: var(--h1-size, $h1-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h2 {
-  font-size: $h2-size;
+  font-size: var(--h2-size, $h2-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h3 {
-  font-size: $h3-size;
+  font-size: var(--h3-size, $h3-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h4 {
-  font-size: $h4-size;
+  font-size: var(--h4-size, $h4-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h5 {
-  font-size: $h5-size;
+  font-size: var(--h5-size, $h5-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h6 {
-  font-size: $h6-size;
+  font-size: var(--h6-size, $h6-size);
   font-weight: $font-weight-bold;
 }
 
@@ -43,24 +43,30 @@
 // There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
-  font-size: $h1-size-mobile;
+  font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   // 32px on desktop
-  @include breakpoint(md) { font-size: $h1-size; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size);
+  }
 }
 
 @mixin f2-responsive {
-  font-size: $h2-size-mobile;
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   // 24px on desktop
-  @include breakpoint(md) { font-size: $h2-size; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size);
+  }
 }
 
 @mixin f3-responsive {
-  font-size: $h3-size-mobile;
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   // 20px on desktop
-  @include breakpoint(md) { font-size: $h3-size; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size);
+  }
 }
 
 // These use the mixins from above for responsive heading sizes.
diff --git a/src/support/variables/typography.scss b/src/support/variables/typography.scss
index d7ca7c830d..5bc6d46329 100644
--- a/src/support/variables/typography.scss
+++ b/src/support/variables/typography.scss
@@ -21,10 +21,10 @@ $h6-size: 12px !default;
 $font-size-small: 12px !default;
 
 // Font weights
-$font-weight-bold: 600 !default;
-$font-weight-semibold: 500 !default;
-$font-weight-normal: 400 !default;
-$font-weight-light: 300 !default;
+$font-weight-bold: var(--base-text-weight-medium, 600) !default;
+$font-weight-semibold: var(--base-text-weight-semibold, 500) !default;
+$font-weight-normal: var(--base-text-weight-normal, 400) !default;
+$font-weight-light: var(--base-text-weight-light, 300) !default;
 
 // Line heights
 $lh-condensed-ultra: 1 !default;
diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss
index 77d9021ab5..5f8ec226b6 100644
--- a/src/utilities/typography.scss
+++ b/src/utilities/typography.scss
@@ -1,4 +1,4 @@
-// stylelint-disable comment-empty-line-before
+// stylelint-disable comment-empty-line-before, primer/typography
 
 // Type scale variables found in ../support/lib/variables.scss
 // $h00-size-mobile: 40px;
@@ -17,40 +17,47 @@
 
 /* Set the font size to 26px */
 .h1 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h1-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size) !important;
+  }
 }
 
 /* Set the font size to 22px */
 .h2 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h2-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size) !important;
+  }
 }
 
 /* Set the font size to 18px */
 .h3 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h3-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size) !important;
+  }
 }
 
 /* Set the font size to #{$h4-size} */
 .h4 {
-  font-size: $h4-size !important;
+  font-size: var(--h4-size, $h4-size) !important;
 }
 
 /* Set the font size to #{$h5-size} */
-.h5 { font-size: $h5-size !important; }
+.h5 {
+  font-size: var(--h5-size, $h5-size) !important;
+}
 
 // Does not include color property like typography base
 // styles, color should be applied with color utilities.
 /* Set the font size to #{$h6-size} */
-.h6 { font-size: $h6-size !important; }
+.h6 {
+  font-size: var(--h6-size, $h6-size) !important;
+}
 
 // Heading utilities
 .h1,
@@ -58,102 +65,123 @@
 .h3,
 .h4,
 .h5,
-.h6 { font-weight: $font-weight-bold !important; }
+.h6 {
+  font-weight: var(--base-text-weight-semibold, $font-weight-bold) !important;
+}
 
 // Type utilities that match type sale
 /* Set the font size to 26px */
 .f1 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h1-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size) !important;
+  }
 }
 
 /* Set the font size to 22px */
 .f2 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h2-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size) !important;
+  }
 }
 
 /* Set the font size to 18px */
 .f3 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h3-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size) !important;
+  }
 }
 
 /* Set the font size to #{$h4-size} */
 .f4 {
-  font-size: $h4-size !important;
+  font-size: var(--h4-size, $h4-size) !important;
 
-  @include breakpoint(md) { font-size: $h4-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h4-size, $h4-size) !important;
+  }
 }
 
 /* Set the font size to #{$h5-size} */
-.f5 { font-size: $h5-size !important; }
+.f5 {
+  font-size: var(--h5-size, $h5-size) !important;
+}
+
 /* Set the font size to #{$h6-size} */
-.f6 { font-size: $h6-size !important; }
+.f6 {
+  font-size: var(--h6-size, $h6-size) !important;
+}
 
 // Type utils with light weight that match type scale
 /* Set the font size to 40px and weight to light */
 .f00-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h00-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h00-size-mobile, $h00-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h00-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h00-size, $h00-size) !important;
+  }
 }
 
 /* Set the font size to 32px and weight to light */
 .f0-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h0-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h0-size-mobile, $h0-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h0-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h0-size, $h0-size) !important;
+  }
 }
 
 /* Set the font size to 26px and weight to light */
 .f1-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h1-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size) !important;
+  }
 }
 
 /* Set the font size to 22px and weight to light */
 .f2-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h2-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size) !important;
+  }
 }
 
 // Same size and weight as .lead but without color property
 /* Set the font size to 18px and weight to light */
 .f3-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h3-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size) !important;
+  }
 }
 
 // Smallest text size
 /* Set the font size to ${#h6-size} */
-.text-small { font-size: $h6-size !important; } // 12px
+.text-small {
+  font-size: var(--h6-size, $h6-size) !important;
+}
+
+// 12px
 
 /* Large leading paragraphs */
 .lead {
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 30px;
-  font-size: $h3-size;
-  font-weight: $font-weight-light;
+  font-size: var(--h3-size, $h3-size);
+  font-weight: var(--base-text-weight-light, $font-weight-light);
 }
 
 // Line-height variations
@@ -163,14 +191,26 @@
 // Responsive line-height
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
+
     /* Set the line height to ultra condensed */
-    .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+    .lh#{$variant}-condensed-ultra {
+      line-height: $lh-condensed-ultra !important;
+    }
+
     /* Set the line height to condensed */
-    .lh#{$variant}-condensed { line-height: $lh-condensed !important; }
+    .lh#{$variant}-condensed {
+      line-height: $lh-condensed !important;
+    }
+
     /* Set the line height to default */
-    .lh#{$variant}-default { line-height: $lh-default !important; }
+    .lh#{$variant}-default {
+      line-height: $lh-default !important;
+    }
+
     /* Set the line height to zero */
-    .lh#{$variant}-0 { line-height: 0 !important; }
+    .lh#{$variant}-0 {
+      line-height: 0 !important;
+    }
   }
 }
 
@@ -178,34 +218,72 @@
 // Responsive text alignment
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
+
     /* Text align to the right */
-    .text#{$variant}-right { text-align: right !important; }
+    .text#{$variant}-right {
+      text-align: right !important;
+    }
+
     /* Text align to the left */
-    .text#{$variant}-left { text-align: left !important; }
+    .text#{$variant}-left {
+      text-align: left !important;
+    }
+
     /* Text align to the center */
-    .text#{$variant}-center { text-align: center !important; }
+    .text#{$variant}-center {
+      text-align: center !important;
+    }
   }
 }
 
 // Text styles
 /* Set the font weight to normal */
-.text-normal { font-weight: $font-weight-normal !important; }
+.text-normal {
+  font-weight: $font-weight-normal !important;
+}
+
 /* Set the font weight to bold */
-.text-bold { font-weight: $font-weight-bold !important; }
-.text-semibold { font-weight: $font-weight-semibold !important; }
-.text-light { font-weight: $font-weight-light !important; }
+.text-bold {
+  font-weight: $font-weight-bold !important;
+}
+
+.text-semibold {
+  font-weight: $font-weight-semibold !important;
+}
+
+.text-light {
+  font-weight: $font-weight-light !important;
+}
+
 /* Set the font to italic */
-.text-italic { font-style: italic !important; }
+.text-italic {
+  font-style: italic !important;
+}
+
 /* Make text uppercase */
-.text-uppercase { text-transform: uppercase !important; }
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
 /* Underline text */
-.text-underline { text-decoration: underline !important; }
+.text-underline {
+  text-decoration: underline !important;
+}
+
 /* Don't underline text */
-.no-underline { text-decoration: none !important; }
+.no-underline {
+  text-decoration: none !important;
+}
+
 /* Don't wrap white space */
-.no-wrap { white-space: nowrap !important; }
+.no-wrap {
+  white-space: nowrap !important;
+}
+
 /* Normal white space */
-.ws-normal { white-space: normal !important; }
+.ws-normal {
+  white-space: normal !important;
+}
 
 /* Force long "words" to wrap if they exceed the width of the container */
 .wb-break-word {
@@ -225,14 +303,18 @@
  *
  * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
  */
-.wb-break-all { word-break: break-all !important; }
+.wb-break-all {
+  word-break: break-all !important;
+}
 
 .text-emphasized {
-  font-weight: $font-weight-bold;
+  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
 }
 
 // List styles
-.list-style-none { list-style: none !important; }
+.list-style-none {
+  list-style: none !important;
+}
 
 /* Set to monospace font */
 .text-mono {