diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index e3ea4afdf9d3e4..c5659a181997f2 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -61,10 +61,8 @@ const Item = styled(
       ...color,
       ...(subheader && {
         marginTop: theme.spacing(1),
-        textTransform: 'uppercase',
-        letterSpacing: '.1rem',
-        fontWeight: theme.typography.fontWeightBold,
-        fontSize: theme.typography.pxToRem(11),
+        letterSpacing: '.01rem',
+        fontSize: theme.typography.pxToRem(12),
         '&::before': {
           content: '""',
           display: 'block',
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index c093a609b9342b..95006780b0e945 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -31,10 +31,9 @@ const Nav = styled('nav')(({ theme }) => ({
 
 const NavLabel = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 0, 1, 1.4),
-  fontSize: theme.typography.pxToRem(11),
-  fontWeight: theme.typography.fontWeightBold,
-  textTransform: 'uppercase',
-  letterSpacing: '.1rem',
+  letterSpacing: '.01rem',
+  fontSize: theme.typography.pxToRem(12),
+  fontWeight: theme.typography.fontWeightMedium,
   color: (theme.vars || theme).palette.text.tertiary,
 }));
 
diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
index 5dcbbab831d48f..15c0d50f675851 100644
--- a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
+++ b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -62,11 +62,12 @@ const Root = styled('div')(
     },
     '& h1': {
       ...lightTheme.typography.h3,
-      fontSize: lightTheme.typography.pxToRem(36),
+      fontSize: lightTheme.typography.pxToRem(32),
       fontFamily: `"Graphik", ${lightTheme.typography.fontFamilySystem}`,
       margin: '10px 0',
       color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
       fontWeight: 600,
+      letterSpacing: '-0.02rem',
     },
     '& .description': {
       ...lightTheme.typography.subtitle1,
@@ -79,10 +80,11 @@ const Root = styled('div')(
     '& h2': {
       ...lightTheme.typography.h5,
       fontFamily: `"Graphik", ${lightTheme.typography.fontFamilySystem}`,
-      fontSize: theme.typography.pxToRem(26),
+      fontSize: theme.typography.pxToRem(24),
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '40px 0 4px',
+      letterSpacing: '-0.02rem',
     },
     '& h3': {
       ...lightTheme.typography.h6,
@@ -91,6 +93,7 @@ const Root = styled('div')(
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '24px 0 4px',
+      letterSpacing: '-0.02rem',
     },
     '& h4': {
       ...lightTheme.typography.subtitle1,
@@ -98,6 +101,7 @@ const Root = styled('div')(
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '20px 0 6px',
+      letterSpacing: '-0.02rem',
     },
     '& h5': {
       ...lightTheme.typography.subtitle2,
@@ -105,6 +109,7 @@ const Root = styled('div')(
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '20px 0 8px',
+      letterSpacing: '-0.02rem',
     },
     '& p': {
       marginTop: 0,
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index 292b020edbdc62..b456c0614b4351 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -335,8 +335,8 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         fontWeight: 500,
       },
       body1: {
-        fontSize: defaultTheme.typography.pxToRem(16),
-        lineHeight: 24 / 16,
+        fontSize: defaultTheme.typography.pxToRem(15),
+        lineHeight: 1.4,
         letterSpacing: 0,
       },
       body2: {