diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss
index 1a7adecf6c9..eada67d4c27 100644
--- a/core/src/components/button/button.ios.vars.scss
+++ b/core/src/components/button/button.ios.vars.scss
@@ -34,7 +34,9 @@ $button-ios-height:                                   3.1em !default;
 $button-ios-border-radius:                            14px !default;
 
 /// @prop - Font size of the button text
-$button-ios-font-size:                                16px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-font-size:                                min(1rem, 48px) !default;
 
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
@@ -83,7 +85,9 @@ $button-ios-large-height:                             3.1em !default;
 $button-ios-large-border-radius:                      16px !default;
 
 /// @prop - Font size of the large button
-$button-ios-large-font-size:                          20px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-large-font-size:                          min(1.25rem, 60px) !default;
 
 
 // iOS Small Button
@@ -108,7 +112,9 @@ $button-ios-small-height:                             2.1em !default;
 $button-ios-small-border-radius:                      6px !default;
 
 /// @prop - Font size of the small button
-$button-ios-small-font-size:                          13px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-small-font-size:                          min(0.8125rem, 39px) !default;
 
 
 // iOS Outline Button
@@ -151,13 +157,15 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 // --------------------------------------------------
 
 /// @prop - Font size of the clear button
-$button-ios-clear-font-size:                          17px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-clear-font-size:                          min(1.0625rem, 51px) !default;
 
 /// @prop - Font weight of the clear button
 $button-ios-clear-font-weight:                        normal !default;
 
 /// @prop - Letter spacing of the button
-$button-ios-letter-spacing:                     0 !default;
+$button-ios-letter-spacing:                           0 !default;
 
 /// @prop - Border color of the clear button
 $button-ios-clear-border-color:                       transparent !default;
diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss
index a5af53c9520..198f94e214c 100644
--- a/core/src/components/button/button.md.vars.scss
+++ b/core/src/components/button/button.md.vars.scss
@@ -34,7 +34,7 @@ $button-md-height:                                      36px !default;
 $button-md-border-radius:                               4px !default;
 
 /// @prop - Font size of the button text
-$button-md-font-size:                                   14px !default;
+$button-md-font-size:                                   0.875rem !default;
 
 /// @prop - Font weight of the button text
 $button-md-font-weight:                                 500 !default;
@@ -78,7 +78,7 @@ $button-md-large-padding-start:                         $button-md-large-padding
 $button-md-large-height:                                2.8em !default;
 
 /// @prop - Font size of the large button
-$button-md-large-font-size:                             20px !default;
+$button-md-large-font-size:                             1.25rem !default;
 
 
 // Material Design Small Button
@@ -100,7 +100,7 @@ $button-md-small-padding-start:                         $button-md-small-padding
 $button-md-small-height:                                2.1em !default;
 
 /// @prop - Font size of the small button
-$button-md-small-font-size:                             13px !default;
+$button-md-small-font-size:                             0.8125rem !default;
 
 
 // Material Design Outline Button
diff --git a/core/src/components/button/test/a11y/button.e2e.ts b/core/src/components/button/test/a11y/button.e2e.ts
new file mode 100644
index 00000000000..c6efe22d935
--- /dev/null
+++ b/core/src/components/button/test/a11y/button.e2e.ts
@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: font scaling'), () => {
+    test('should scale default button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button>Default</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-default-scale`));
+    });
+
+    test('should scale clear button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button fill="clear">Clear</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-clear-scale`));
+    });
+
+    test('should scale small button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button size="small">Small</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-small-scale`));
+    });
+
+    test('should scale large button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button size="large">Large</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2dbb542b16e
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3c5deb7cd4a
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2f922a18c51
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d749b093c37
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5bb45276633
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aa65408d330
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..904dcdc8dc8
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ae5defaf14
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..89c3498d840
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2f367491869
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..40392ebfed8
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..759ef7a3d5f
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..268141eb5d0
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4736211887e
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..97003abe052
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..840b5ec58d8
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f30c0c8aaa9
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..baf148bc19a
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dba28972d9e
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..62bb829eb17
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..24c17215509
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0950c75a337
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7861de29393
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e184b698e3f
Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png differ