diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js
index aa4f20f0d11252..51b6198cff254b 100644
--- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js
+++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js
@@ -10,21 +10,29 @@ const createFontStyleFunction = (prop) => {
   return (props) => {
     if (props[prop] !== undefined && props[prop] !== null) {
       const styleFromPropValue = (propValue) => {
-        let value =
-          props.theme.typography?.[
-            `${prop}${
-              props[prop] === 'default' || props[prop] === prop
-                ? ''
-                : capitalize(props[prop]?.toString())
-            }`
-          ];
+        // fetch the value directly defined in the theme, like fontWeightLight
+        let value = props.theme.typography?.[propValue];
+
+        if (typeof value === 'object') {
+          // typography variant was pulled, but these props can't be an object
+          value = null;
+        }
 
         if (!value) {
-          value = props.theme.typography?.[propValue]?.[prop];
+          // fetch fontWeightLight when the value is 'light'
+          value =
+            props.theme.typography?.[
+              `${prop}${
+                props[prop] === 'default' || props[prop] === prop
+                  ? ''
+                  : capitalize(props[prop]?.toString())
+              }`
+            ];
         }
 
         if (!value) {
-          value = propValue;
+          // fetch the value from the typography variant or default to the propValue
+          value = props.theme.typography?.[propValue]?.[prop] ?? propValue;
         }
 
         return {
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
index 922f428e245f27..376cc2de5689b1 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
+++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -441,4 +441,21 @@ describe('styleFunctionSx', () => {
       letterSpacing: 'inherit',
     });
   });
+
+  it('resolves theme typography properties', () => {
+    const result = styleFunctionSx({
+      theme: { typography: createTypography({}, {}) },
+      sx: {
+        fontFamily: 'default',
+        fontWeight: 'fontWeightMedium',
+        fontSize: 'fontSize',
+      },
+    });
+
+    expect(result).deep.equal({
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      fontWeight: 500,
+      fontSize: 14,
+    });
+  });
 });