diff --git a/docs/data/material/customization/typography/TypographyCustomVariant.js b/docs/data/material/customization/typography/TypographyCustomVariant.js
index 2bfa48886348c6..d1ba23032bb44a 100644
--- a/docs/data/material/customization/typography/TypographyCustomVariant.js
+++ b/docs/data/material/customization/typography/TypographyCustomVariant.js
@@ -31,7 +31,7 @@ const theme = createTheme({
body2: 'p',
inherit: 'p',
// @ts-ignore
- poster: 'h1', // map our new variant to render a
by default
+ poster: 'h1', // map our new variant to render an by default
},
},
},
diff --git a/docs/data/material/customization/typography/TypographyCustomVariant.tsx b/docs/data/material/customization/typography/TypographyCustomVariant.tsx
index 2bfa48886348c6..d1ba23032bb44a 100644
--- a/docs/data/material/customization/typography/TypographyCustomVariant.tsx
+++ b/docs/data/material/customization/typography/TypographyCustomVariant.tsx
@@ -31,7 +31,7 @@ const theme = createTheme({
body2: 'p',
inherit: 'p',
// @ts-ignore
- poster: 'h1', // map our new variant to render a by default
+ poster: 'h1', // map our new variant to render an by default
},
},
},
diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md
index c826b4cd5f57e5..7000c7f67474a0 100644
--- a/docs/data/material/customization/typography/typography.md
+++ b/docs/data/material/customization/typography/typography.md
@@ -229,7 +229,7 @@ In addition to using the default typography variants, you can add custom ones, o
**Step 1. Update the theme's typography object**
-Let's add a variant called "poster", and get rid the "h3" variant:
+The code snippet below adds a custom variant to the theme called `poster`, and removes the default `h3` variant:
```js
const theme = createTheme({
@@ -246,9 +246,10 @@ const theme = createTheme({
**Step 2. (Optional) Set the default semantic element for your new variant**
-At this point, you can already use the new `poster` variant, which will render a `` by default with your custom styles. Sometimes you may want to default to a different HTML element for semantic purposes, or to replace the inline `` with a block-level element for styling purposes.
+At this point, you can already use the new `poster` variant, which will render a `` by default with your custom styles.
+Sometimes you may want to default to a different HTML element for semantic purposes, or to replace the inline `` with a block-level element for styling purposes.
-To do this we need to update the `variantMapping` prop of the `Typography` globally in the theme:
+To do this, update the `variantMapping` prop of the `Typography` component globally, at the theme level:
```js
const theme = createTheme({
@@ -324,7 +325,7 @@ declare module '@mui/material/Typography' {
```jsx
poster;
-/* This variant is no longer supported, if you are using TypeScript it will give an error */
+/* This variant is no longer supported. If you are using TypeScript it will give an error */
h3;
```