diff --git a/packages/components/src/core/Callout/style.ts b/packages/components/src/core/Callout/style.ts
index 31e7b0ebb..3e35d809d 100644
--- a/packages/components/src/core/Callout/style.ts
+++ b/packages/components/src/core/Callout/style.ts
@@ -54,7 +54,7 @@ export const StyledCallout = styled(Alert, {
     const alertMessagePaddingTop = Math.abs(
       ((iconSizes?.l.height ?? 0) -
         parseInt(
-          String(typography?.styles?.body?.regular?.xs?.lineHeight ?? "0")
+          String(typography?.wideStyles?.body?.regular?.xs?.lineHeight ?? "0")
         )) /
         2
     );
diff --git a/packages/components/src/core/Notification/style.ts b/packages/components/src/core/Notification/style.ts
index a8ed89892..cd766b6cb 100644
--- a/packages/components/src/core/Notification/style.ts
+++ b/packages/components/src/core/Notification/style.ts
@@ -49,7 +49,7 @@ export const StyledNotification = styled(Alert, {
     const alertMessagePaddingTop = Math.abs(
       ((iconSizes?.l.height ?? 0) -
         parseInt(
-          String(typography?.styles?.body?.regular?.xs?.lineHeight ?? "0")
+          String(typography?.wideStyles?.body?.regular?.xs?.lineHeight ?? "0")
         )) /
         2
     );
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
index 9d9c88cd7..e4c5be205 100644
--- a/packages/components/src/core/styles/common/SDSAppTheme.ts
+++ b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -200,7 +200,270 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
       header: fontFamily,
       tabular: fontFamily,
     },
-    styles: {
+    narrowStyles: {
+      body: {
+        regular: {
+          button: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          l: {
+            fontSize: 16,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "26px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          button: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          l: {
+            fontSize: 16,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "26px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+        },
+      },
+      caps: {
+        semibold: {
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "18px",
+            textTransform: "uppercase",
+          },
+          xxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "16px",
+            textTransform: "uppercase",
+          },
+          xxxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "16px",
+            textTransform: "uppercase",
+          },
+        },
+      },
+      code: {
+        regular: {
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+      },
+      header: {
+        semibold: {
+          l: {
+            fontSize: 16,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "22px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xl: {
+            fontSize: 18,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxl: {
+            fontSize: 22,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "30px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+        },
+      },
+      tabular: {
+        regular: {
+          s: {
+            fontSize: 14,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          s: {
+            fontSize: 14,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+      },
+    },
+    wideStyles: {
       body: {
         regular: {
           button: {
diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts
index 69da63ca7..683ec2284 100644
--- a/packages/components/src/core/styles/common/makeThemeOptions.ts
+++ b/packages/components/src/core/styles/common/makeThemeOptions.ts
@@ -442,20 +442,20 @@ export function makeThemeOptions(
       },
     },
     typography: {
-      body1: appTheme.typography.styles.body.regular.xs,
-      body2: appTheme.typography.styles.body.regular.xxs,
-      button: appTheme.typography.styles.body.regular.button,
-      caption: appTheme.typography.styles.body.regular.xxxs,
+      body1: appTheme.typography.wideStyles.body.regular.xs,
+      body2: appTheme.typography.wideStyles.body.regular.xxs,
+      button: appTheme.typography.wideStyles.body.regular.button,
+      caption: appTheme.typography.wideStyles.body.regular.xxxs,
       fontFamily: `${appTheme.typography.fontFamily.body}, sans-serif`,
-      h1: appTheme.typography.styles.header.semibold.xxl,
-      h2: appTheme.typography.styles.header.semibold.xl,
-      h3: appTheme.typography.styles.header.semibold.l,
-      h4: appTheme.typography.styles.header.semibold.m,
-      h5: appTheme.typography.styles.header.semibold.s,
-      h6: appTheme.typography.styles.header.semibold.xs,
-      overline: appTheme.typography.styles.caps.semibold.xxxs,
-      subtitle1: appTheme.typography.styles.body.regular.xs,
-      subtitle2: appTheme.typography.styles.header.semibold.xxs,
+      h1: appTheme.typography.wideStyles.header.semibold.xxl,
+      h2: appTheme.typography.wideStyles.header.semibold.xl,
+      h3: appTheme.typography.wideStyles.header.semibold.l,
+      h4: appTheme.typography.wideStyles.header.semibold.m,
+      h5: appTheme.typography.wideStyles.header.semibold.s,
+      h6: appTheme.typography.wideStyles.header.semibold.xs,
+      overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
+      subtitle1: appTheme.typography.wideStyles.body.regular.xs,
+      subtitle2: appTheme.typography.wideStyles.header.semibold.xxs,
     },
   };
 }
diff --git a/packages/components/src/core/styles/common/mixins/fonts.ts b/packages/components/src/core/styles/common/mixins/fonts.ts
index 74b927e41..7ba30ac42 100644
--- a/packages/components/src/core/styles/common/mixins/fonts.ts
+++ b/packages/components/src/core/styles/common/mixins/fonts.ts
@@ -3,13 +3,14 @@ import { TypographyStyle } from "@mui/material";
 import { Typography } from "../types";
 import { CommonThemeProps, getTypography } from "../selectors/theme";
 
-type FontBodyWeight = keyof Typography["styles"]["body"];
+type FontBodyWeight = keyof Typography["wideStyles"]["body"];
 type FontBodySize<T extends FontBodyWeight> =
-  keyof Typography["styles"]["body"][T];
+  keyof Typography["wideStyles"]["body"][T];
 
 export const fontBody = (
   fontSize: FontBodySize<FontBodyWeight>,
-  fontWeight: FontBodyWeight = "regular"
+  fontWeight: FontBodyWeight = "regular",
+  isNarrow: boolean = false
 ) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
     const typography = getTypography(props);
@@ -17,10 +18,19 @@ export const fontBody = (
     if (!typography) return null;
 
     const {
-      styles: { body },
+      wideStyles: { body },
+      narrowStyles: { body: narrowBody },
       fontFamily: { body: bodyFontFamily },
     } = typography;
 
+    if (isNarrow) {
+      return css`
+        ${props.theme?.breakpoints.down("md")} {
+          ${themeToCss(narrowBody[fontWeight][fontSize], bodyFontFamily)}
+        }
+      `;
+    }
+
     return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
   };
 };
@@ -40,22 +50,30 @@ export const fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
 
 // Font Caps
 
-type FontCapsSize = keyof Typography["styles"]["caps"]["semibold"];
+type FontCapsSize = keyof Typography["wideStyles"]["caps"]["semibold"];
 
-export const fontCaps = (fontSize: FontCapsSize) => {
+export const fontCaps = (fontSize: FontCapsSize, isNarrow: boolean = false) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
     const typography = getTypography(props);
 
     if (!typography) return null;
 
     const {
-      styles: { caps },
+      wideStyles: { caps },
+      narrowStyles: { caps: narrowCaps },
       fontFamily: { caps: capsFontFamily },
     } = typography;
 
     return css`
-      ${themeToCss(caps.semibold[fontSize], capsFontFamily)}
       text-transform: uppercase;
+
+      ${isNarrow
+        ? css`
+            ${props.theme?.breakpoints.down("md")} {
+              ${themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)}
+            }
+          `
+        : themeToCss(caps.semibold[fontSize], capsFontFamily)}
     `;
   };
 };
@@ -66,19 +84,31 @@ export const fontCapsXxxxs = fontCaps("xxxxs");
 
 // Font Header
 
-type FontHeaderSize = keyof Typography["styles"]["header"]["semibold"];
+type FontHeaderSize = keyof Typography["wideStyles"]["header"]["semibold"];
 
-export const fontHeader = (fontSize: FontHeaderSize) => {
+export const fontHeader = (
+  fontSize: FontHeaderSize,
+  isNarrow: boolean = false
+) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
     const typography = getTypography(props);
 
     if (!typography) return null;
 
     const {
-      styles: { header },
+      wideStyles: { header },
+      narrowStyles: { header: narrowHeader },
       fontFamily: { header: headerFontFamily },
     } = typography;
 
+    if (isNarrow) {
+      return css`
+        ${props.theme?.breakpoints.down("md")} {
+          ${themeToCss(narrowHeader.semibold[fontSize], headerFontFamily)}
+        }
+      `;
+    }
+
     return themeToCss(header.semibold[fontSize], headerFontFamily);
   };
 };
@@ -94,13 +124,14 @@ export const fontHeaderXxxs = fontHeader("xxxs");
 
 // Font Code
 
-type FontCodeWeight = keyof Typography["styles"]["code"];
+type FontCodeWeight = keyof Typography["wideStyles"]["code"];
 type FontCodeSize<T extends FontCodeWeight> =
-  keyof Typography["styles"]["code"][T];
+  keyof Typography["wideStyles"]["code"][T];
 
 export const fontCode = (
   fontSize: FontCodeSize<FontCodeWeight>,
-  fontWeight: FontCodeWeight = "regular"
+  fontWeight: FontCodeWeight = "regular",
+  isNarrow: boolean = false
 ) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
     const typography = getTypography(props);
@@ -108,13 +139,20 @@ export const fontCode = (
     if (!typography) return null;
 
     const {
-      styles: { code },
+      wideStyles: { code },
+      narrowStyles: { code: narrowCode },
       fontFamily: { code: codeFontFamily },
     } = typography;
 
-    return css`
-      ${themeToCss(code[fontWeight][fontSize], codeFontFamily)}
-    `;
+    if (isNarrow) {
+      return css`
+        ${props.theme?.breakpoints.down("md")} {
+          ${themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily)}
+        }
+      `;
+    }
+
+    return themeToCss(code[fontWeight][fontSize], codeFontFamily);
   };
 };
 
@@ -125,13 +163,14 @@ export const fontCodeSemiboldS = fontCode("s", "semibold");
 
 // Font Tabular
 
-type FontTabularWeight = keyof Typography["styles"]["tabular"];
+type FontTabularWeight = keyof Typography["wideStyles"]["tabular"];
 type FontTabularSize<T extends FontTabularWeight> =
-  keyof Typography["styles"]["tabular"][T];
+  keyof Typography["wideStyles"]["tabular"][T];
 
 export const fontTabular = (
   fontSize: FontTabularSize<FontTabularWeight>,
-  fontWeight: FontTabularWeight = "regular"
+  fontWeight: FontTabularWeight = "regular",
+  isNarrow: boolean = false
 ) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
     const typography = getTypography(props);
@@ -139,13 +178,24 @@ export const fontTabular = (
     if (!typography) return null;
 
     const {
-      styles: { tabular },
+      wideStyles: { tabular },
+      narrowStyles: { tabular: narrowTabular },
       fontFamily: { tabular: tabularFontFamily },
     } = typography;
 
     return css`
-      ${themeToCss(tabular[fontWeight][fontSize], tabularFontFamily)}
       font-variant-numeric: tabular-nums;
+
+      ${isNarrow
+        ? css`
+            ${props.theme?.breakpoints.down("md")} {
+              ${themeToCss(
+                narrowTabular[fontWeight][fontSize],
+                tabularFontFamily
+              )}
+            }
+          `
+        : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily)}
     `;
   };
 };
diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts
index 495f992dd..e27c341a0 100644
--- a/packages/components/src/core/styles/common/types.ts
+++ b/packages/components/src/core/styles/common/types.ts
@@ -125,6 +125,68 @@ export interface Shadows {
   l: string;
 }
 
+export interface TypographyStyles {
+  body: {
+    regular: {
+      button: TypographyStyle;
+      l: TypographyStyle;
+      m: TypographyStyle;
+      s: TypographyStyle;
+      xs: TypographyStyle;
+      xxs: TypographyStyle;
+      xxxs: TypographyStyle;
+    };
+    semibold: {
+      button: TypographyStyle;
+      l: TypographyStyle;
+      m: TypographyStyle;
+      s: TypographyStyle;
+      xs: TypographyStyle;
+      xxs: TypographyStyle;
+      xxxs: TypographyStyle;
+    };
+  };
+  caps: {
+    semibold: {
+      xxs: TypographyStyle;
+      xxxs: TypographyStyle;
+      xxxxs: TypographyStyle;
+    };
+  };
+  code: {
+    regular: {
+      s: TypographyStyle;
+      xs: TypographyStyle;
+    };
+    semibold: {
+      s: TypographyStyle;
+      xs: TypographyStyle;
+    };
+  };
+  header: {
+    semibold: {
+      xxl: TypographyStyle;
+      xl: TypographyStyle;
+      l: TypographyStyle;
+      m: TypographyStyle;
+      s: TypographyStyle;
+      xs: TypographyStyle;
+      xxs: TypographyStyle;
+      xxxs: TypographyStyle;
+    };
+  };
+  tabular: {
+    regular: {
+      s: TypographyStyle;
+      xs: TypographyStyle;
+    };
+    semibold: {
+      s: TypographyStyle;
+      xs: TypographyStyle;
+    };
+  };
+}
+
 export interface Typography {
   fontFamily: {
     body: CSSProperties["fontFamily"];
@@ -133,67 +195,8 @@ export interface Typography {
     header?: CSSProperties["fontFamily"];
     tabular?: CSSProperties["fontFamily"];
   };
-  styles: {
-    body: {
-      regular: {
-        button: TypographyStyle;
-        l: TypographyStyle;
-        m: TypographyStyle;
-        s: TypographyStyle;
-        xs: TypographyStyle;
-        xxs: TypographyStyle;
-        xxxs: TypographyStyle;
-      };
-      semibold: {
-        button: TypographyStyle;
-        l: TypographyStyle;
-        m: TypographyStyle;
-        s: TypographyStyle;
-        xs: TypographyStyle;
-        xxs: TypographyStyle;
-        xxxs: TypographyStyle;
-      };
-    };
-    caps: {
-      semibold: {
-        xxs: TypographyStyle;
-        xxxs: TypographyStyle;
-        xxxxs: TypographyStyle;
-      };
-    };
-    code: {
-      regular: {
-        s: TypographyStyle;
-        xs: TypographyStyle;
-      };
-      semibold: {
-        s: TypographyStyle;
-        xs: TypographyStyle;
-      };
-    };
-    header: {
-      semibold: {
-        xxl: TypographyStyle;
-        xl: TypographyStyle;
-        l: TypographyStyle;
-        m: TypographyStyle;
-        s: TypographyStyle;
-        xs: TypographyStyle;
-        xxs: TypographyStyle;
-        xxxs: TypographyStyle;
-      };
-    };
-    tabular: {
-      regular: {
-        s: TypographyStyle;
-        xs: TypographyStyle;
-      };
-      semibold: {
-        s: TypographyStyle;
-        xs: TypographyStyle;
-      };
-    };
-  };
+  wideStyles: TypographyStyles;
+  narrowStyles: TypographyStyles;
 }
 
 export interface FontWeights {