diff --git a/core/src/css/test/a11y/typography.e2e.ts b/core/src/css/test/typography/a11y/typography.e2e.ts
similarity index 100%
rename from core/src/css/test/a11y/typography.e2e.ts
rename to core/src/css/test/typography/a11y/typography.e2e.ts
diff --git a/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/css/test/typography/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/css/test/typography/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/css/test/typography/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/css/test/typography/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/css/test/typography/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Safari-linux.png
rename to core/src/css/test/typography/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts b/core/src/css/test/typography/basic/typography.e2e.ts
new file mode 100644
index 0000000000..d87a270d2b
--- /dev/null
+++ b/core/src/css/test/typography/basic/typography.e2e.ts
@@ -0,0 +1,107 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Typography styles are only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('typography: global styles'), () => {
+    test('should apply the globals styles for each semantic tag', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
+          <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+          <p><ion-text class="ionic-font-size-l"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
+          <p><ion-text class="ionic-font-size-s"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
+          <p><ion-text class="ionic-font-size-base">Tag_None FontBase: The quick brown fox jumps over the lazydog</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
+    });
+
+    test('should apply the utility classes for each heading', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <h1 class="ionic-heading2 ionic-font-light">Tag H1 - Style Heading 2 - Font Light</h1>
+          <h2 class="ionic-heading3 ionic-font-light">Tag H2 - Style Heading 3 - Font Light</h2>
+          <h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
+          <h4 class="ionic-heading5 ionic-font-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
+          <h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
+          <h6 class="ionic-heading1 ionic-font-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
+    });
+
+    test('should apply the heading classes on ion-text element', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
+          <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
+          <p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
+          <p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
+          <p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
+          <p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
+    });
+
+    test('should apply the utility classes for font weights', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-font-light">Utility class 'ionic-font-light'</ion-text></p>
+          <p><ion-text class="ionic-font-regular">Utility class 'ionic-font-regular'</ion-text></p>
+          <p><ion-text class="ionic-font-medium">Utility class 'ionic-font-medium'</ion-text></p>
+          <p><ion-text class="ionic-font-semibold">Utility class 'ionic-font-semibold'</ion-text></p>
+          <p><ion-text class="ionic-font-bold">Utility class 'ionic-font-bold'</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
+    });
+
+    test('should apply the utility classes for font display', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
+          <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
+    });
+  });
+});
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..34dd6aac2e
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d3ca79a8ee
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2f089beead
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c45a2f9ea0
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..135caf1f16
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..98de003845
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..315434f81d
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6dab853f18
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..58d1fa9721
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1096cde66f
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..90eabf4717
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..40c1689928
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..220736e7be
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d768764f60
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a8080e15f4
Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/typography.ionic.scss b/core/src/css/typography.ionic.scss
new file mode 100644
index 0000000000..53a0336a15
--- /dev/null
+++ b/core/src/css/typography.ionic.scss
@@ -0,0 +1,173 @@
+:root {
+  /* Font Family */
+  --ionic-font-family: "Inter", sans-serif;
+
+  /* Font sizes */
+  --ionic-font-size-s: 12px;
+  --ionic-font-size-m: 14px;
+  --ionic-font-size-l: 16px;
+
+  /* Font size displays */
+  --ionic-display-s: 32px;
+  --ionic-display-m: 36px;
+
+  /* Headings */
+  --ionic-h1-font-size: 28px;
+  --ionic-h2-font-size: 26px;
+  --ionic-h3-font-size: 24px;
+  --ionic-h4-font-size: 22px;
+  --ionic-h5-font-size: 20px;
+  --ionic-h6-font-size: 18px;
+
+  /* Font Weights */
+  --ionic-font-light: 300;
+  --ionic-font-regular: 400;
+  --ionic-font-medium: 500;
+  --ionic-font-semibold: 600;
+  --ionic-font-bold: 700;
+
+  /* Line heights */
+  --ionic-line-height-xs: 16px;
+  --ionic-line-height-s: 20px;
+  --ionic-line-height-m: 24px;
+  --ionic-line-height-l: 28px;
+  --ionic-line-height-xl: 32px;
+  --ionic-line-height-xxl: 36px;
+  --ionic-line-height-display-s: 44px;
+  --ionic-line-height-display-m: 48px;
+
+  /* Letter spacing */
+  --ionic-letter-spacing-none: 0em;
+  --ionic-letter-spacing-s: 0.1em;
+  --ionic-letter-spacing-m: 0.15em;
+}
+
+html {
+  font-family: var(--ionic-font-family);
+  font-size: var(--ionic-font-size-m);
+  font-weight: var(--ionic-font-regular);
+  
+  line-height: var(--ionic-line-height-m);
+}
+
+h1,
+.ionic-heading1,
+h2,
+.ionic-heading2,
+h3,
+.ionic-heading3,
+h4,
+.ionic-heading4,
+h5,
+.ionic-heading5,
+h6,
+.ionic-heading6 {
+  color: var(--ionic-color-base);
+
+  font-weight: var(--ionic-font-semibold);
+}
+
+h1,
+.ionic-heading1 {
+  font-size: var(--ionic-h1-font-size);
+
+  line-height: var(--ionic-line-height-xxl);
+}
+
+h2,
+.ionic-heading2 {
+  font-size: var(--ionic-h2-font-size);
+
+  line-height: var(--ionic-line-height-xl);
+}
+
+h3,
+.ionic-heading3 {
+  font-size: var(--ionic-h3-font-size);
+
+  line-height: var(--ionic-line-height-xl);
+}
+
+h4,
+.ionic-heading4 {
+  font-size: var(--ionic-h4-font-size);
+
+  line-height: var(--ionic-line-height-l);
+}
+
+h5,
+.ionic-heading5 {
+  font-size: var(--ionic-h5-font-size);
+
+  line-height: var(--ionic-line-height-l);
+}
+
+h6,
+.ionic-heading6 {
+  font-size: var(--ionic-h6-font-size);
+
+  line-height: var(--ionic-line-height-m);
+}
+
+/* Utility Classes */
+/* Font size display */
+.ionic-font-display-s,
+.ionic-font-display-m {
+  font-weight: var(--ionic-font-regular);
+}
+
+.ionic-display-s {
+  font-size: var(--ionic-display-s);
+
+  line-height: var(--ionic-line-height-display-s);
+}
+
+.ionic-display-m {
+  font-size: var(--ionic-display-m);
+
+  line-height: var(--ionic-line-height-display-m);
+}
+
+/* Font sizes */
+.ionic-font-size-s {
+  font-size: var(--ionic-font-size-s);
+}
+.ionic-font-size-m {
+  font-size: var(--ionic-font-size-m);
+}
+.ionic-font-size-l {
+  font-size: var(--ionic-font-size-l);
+}
+
+/* Font weights */
+.ionic-font-light {
+  font-weight: var(--ionic-font-light);
+}
+.ionic-font-regular {
+  font-weight: var(--ionic-font-regular);
+}
+.ionic-font-medium {
+  font-weight: var(--ionic-font-medium);
+}
+.ionic-font-semibold {
+  font-weight: var(--ionic-font-semibold);
+}
+.ionic-font-bold {
+  font-weight: var(--ionic-font-bold);
+}
+
+/* Letter spacing */
+.ionic-letter-spacing-none {
+  letter-spacing: var(--ionic-letter-spacing-none);
+}
+.ionic-letter-spacing-s {
+  letter-spacing: var(--ionic-letter-spacing-s);
+}
+.ionic-letter-spacing-m {
+  letter-spacing: var(--ionic-letter-spacing-m);
+}
+
+/* Common */
+.ionic-font-italic {
+  font-style: italic;
+}