diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js
index 09c5647227..0183378375 100644
--- a/core/scripts/tokens/index.js
+++ b/core/scripts/tokens/index.js
@@ -16,6 +16,7 @@ const {
   getRgbaValue,
   hexToRgb,
   generateShadowValue,
+  generateFontSizeValue,
   generateFontFamilyValue,
   generateTypographyValue,
   generateRgbValue,
@@ -43,6 +44,8 @@ StyleDictionary.registerFormat({
           return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
         } else if (prop.attributes.category.match('font-family')) {
           return generateFontFamilyValue(prop);
+        } else if (prop.attributes.category.match('font-size')) {
+          return generateFontSizeValue(prop);
         } else {
           const rgb = hexToRgb(prop.value);
           prop.value = getRgbaValue(prop.value);
@@ -52,7 +55,11 @@ StyleDictionary.registerFormat({
         }
       });
 
-    return fileHeader({ file }) + ':root {\n' + prefixedVariables.join('\n') + '\n}\n';
+    return [
+      fileHeader({ file }),
+      '@use "../themes/functions.sizes" as font;\n',
+      ':root {\n' + prefixedVariables.join('\n') + '\n}\n',
+    ].join('\n');
   },
 });
 
@@ -72,6 +79,8 @@ StyleDictionary.registerFormat({
         return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
       } else if (prop.attributes.category.match('font-family')) {
         return generateFontFamilyValue(prop, 'scss');
+      } else if (prop.attributes.category.match('font-size')) {
+        return generateFontSizeValue(prop, 'scss');
       } else if (prop['$type'] === 'typography') {
         return generateTypographyValue(prop, dictionary);
       } else {
@@ -79,7 +88,11 @@ StyleDictionary.registerFormat({
       }
     });
 
-    return fileHeader({ file }) + prefixedVariables.join('\n') + '\n';
+    return [
+      fileHeader({ file }),
+      '@use "../themes/functions.sizes" as font;\n',
+      prefixedVariables.join('\n') + '\n',
+    ].join('\n');
   },
 });
 
diff --git a/core/scripts/tokens/utilities.js b/core/scripts/tokens/utilities.js
index 82039a5686..480228dec0 100644
--- a/core/scripts/tokens/utilities.js
+++ b/core/scripts/tokens/utilities.js
@@ -44,6 +44,15 @@ function generateShadowValue(shadow) {
   return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${color}`;
 }
 
+// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
+function generateFontSizeValue(prop, variableType = 'css') {
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, font.px-to-rem(${parseInt(
+        prop.value
+      )}));`
+    : `--${variablesPrefix}-${prop.name}: #{font.px-to-rem(${parseInt(prop.value)})};`;
+}
+
 // Generates a valid font-family value from a font-family Design Token structure
 function generateFontFamilyValue(prop, variableType = 'css') {
   // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
@@ -169,6 +178,7 @@ module.exports = {
   hexToRgb,
   hexToRgba,
   generateShadowValue,
+  generateFontSizeValue,
   generateFontFamilyValue,
   generateTypographyValue,
   generateRgbValue: generateValue,
diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss
index 0cf695c09e..687e0a549f 100644
--- a/core/src/foundations/ionic.root.scss
+++ b/core/src/foundations/ionic.root.scss
@@ -3,6 +3,8 @@
  * Ionic Design System
  */
 
+@use "../themes/functions.sizes" as font;
+
 :root {
   --ionic-elevation-100: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
   --ionic-elevation-200: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
@@ -12,18 +14,18 @@
   --ionic-elevation-600: 0px 8px 25px 0px rgba(6, 43, 99, 0.08), 0px 1px 5px 0px rgba(6, 43, 99, 0.05);
   --ionic-elevation-700: 0px 15px 32px 0px rgba(6, 43, 99, 0.09), 0px 2px 7px 0px rgba(6, 43, 99, 0.05);
   --ionic-elevation-800: 0px 20px 48px 0px rgba(6, 43, 99, 0.12), 0px 3px 14px 0px rgba(6, 43, 99, 0.12);
-  --ionic-font-size-275: 11px;
-  --ionic-font-size-300: 12px;
-  --ionic-font-size-350: 14px;
-  --ionic-font-size-400: 16px;
-  --ionic-font-size-450: 18px;
-  --ionic-font-size-500: 20px;
-  --ionic-font-size-550: 22px;
-  --ionic-font-size-600: 24px;
-  --ionic-font-size-650: 26px;
-  --ionic-font-size-700: 28px;
-  --ionic-font-size-800: 32px;
-  --ionic-font-size-900: 36px;
+  --ionic-font-size-275: #{font.px-to-rem(11)};
+  --ionic-font-size-300: #{font.px-to-rem(12)};
+  --ionic-font-size-350: #{font.px-to-rem(14)};
+  --ionic-font-size-400: #{font.px-to-rem(16)};
+  --ionic-font-size-450: #{font.px-to-rem(18)};
+  --ionic-font-size-500: #{font.px-to-rem(20)};
+  --ionic-font-size-550: #{font.px-to-rem(22)};
+  --ionic-font-size-600: #{font.px-to-rem(24)};
+  --ionic-font-size-650: #{font.px-to-rem(26)};
+  --ionic-font-size-700: #{font.px-to-rem(28)};
+  --ionic-font-size-800: #{font.px-to-rem(32)};
+  --ionic-font-size-900: #{font.px-to-rem(36)};
   --ionic-font-weight-thin: 100;
   --ionic-font-weight-extra-light: 200;
   --ionic-font-weight-light: 300;
diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss
index f37cec7000..6c316623aa 100644
--- a/core/src/foundations/ionic.vars.scss
+++ b/core/src/foundations/ionic.vars.scss
@@ -3,6 +3,8 @@
  * Ionic Design System
  */
 
+@use "../themes/functions.sizes" as font;
+
 $ionic-elevation-100: var(
   --ionic-elevation-100,
   0px 3px 9px 0px rgba(0, 0, 0, 0.07),
@@ -43,18 +45,18 @@ $ionic-elevation-800: var(
   0px 20px 48px 0px rgba(6, 43, 99, 0.12),
   0px 3px 14px 0px rgba(6, 43, 99, 0.12)
 );
-$ionic-font-size-275: var(--ionic-font-size-275, 11px);
-$ionic-font-size-300: var(--ionic-font-size-300, 12px);
-$ionic-font-size-350: var(--ionic-font-size-350, 14px);
-$ionic-font-size-400: var(--ionic-font-size-400, 16px);
-$ionic-font-size-450: var(--ionic-font-size-450, 18px);
-$ionic-font-size-500: var(--ionic-font-size-500, 20px);
-$ionic-font-size-550: var(--ionic-font-size-550, 22px);
-$ionic-font-size-600: var(--ionic-font-size-600, 24px);
-$ionic-font-size-650: var(--ionic-font-size-650, 26px);
-$ionic-font-size-700: var(--ionic-font-size-700, 28px);
-$ionic-font-size-800: var(--ionic-font-size-800, 32px);
-$ionic-font-size-900: var(--ionic-font-size-900, 36px);
+$ionic-font-size-275: var(--ionic-font-size-275, font.px-to-rem(11));
+$ionic-font-size-300: var(--ionic-font-size-300, font.px-to-rem(12));
+$ionic-font-size-350: var(--ionic-font-size-350, font.px-to-rem(14));
+$ionic-font-size-400: var(--ionic-font-size-400, font.px-to-rem(16));
+$ionic-font-size-450: var(--ionic-font-size-450, font.px-to-rem(18));
+$ionic-font-size-500: var(--ionic-font-size-500, font.px-to-rem(20));
+$ionic-font-size-550: var(--ionic-font-size-550, font.px-to-rem(22));
+$ionic-font-size-600: var(--ionic-font-size-600, font.px-to-rem(24));
+$ionic-font-size-650: var(--ionic-font-size-650, font.px-to-rem(26));
+$ionic-font-size-700: var(--ionic-font-size-700, font.px-to-rem(28));
+$ionic-font-size-800: var(--ionic-font-size-800, font.px-to-rem(32));
+$ionic-font-size-900: var(--ionic-font-size-900, font.px-to-rem(36));
 $ionic-font-weight-thin: var(--ionic-font-weight-thin, 100);
 $ionic-font-weight-extra-light: var(--ionic-font-weight-extra-light, 200);
 $ionic-font-weight-light: var(--ionic-font-weight-light, 300);