--- productId: material-ui title: React Typography component components: Typography githubLabel: 'scope: typography' materialDesign: https://m2.material.io/design/typography/the-type-system.html githubSource: packages/mui-material/src/Typography --- # Typography

Use typography to present your design and content as clearly and efficiently as possible.

{{"component": "@mui/docs/ComponentLinkHeader"}} ## Roboto font Material UI uses the [Roboto](https://fonts.google.com/specimen/Roboto) font by default. Add it to your project via Fontsource, or with the Google Fonts CDN. ```bash npm npm install @fontsource/roboto ``` ```bash pnpm pnpm add @fontsource/roboto ``` ```bash yarn yarn add @fontsource/roboto ``` Then you can import it in your entry point like this: ```tsx import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; ``` :::info Fontsource can be configured to load specific subsets, weights, and styles. Material UI's default typography configuration relies only on the 300, 400, 500, and 700 font weights. ::: ### Google Web Fonts To install Roboto through the Google Web Fonts CDN, add the following code inside your project's `` tag: ```html ``` ## Component ### Usage The Typography component follows the [Material Design typographic scale](https://m2.material.io/design/typography/#type-scale) that provides a limited set of type sizes that work well together for a consistent layout. {{"demo": "Types.js"}} ### Theme keys In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the [`typography`](/material-ui/customization/default-theme/?expand-path=$.typography) keys of the theme. {{"demo": "TypographyTheme.js"}} ## Customization ### Adding & disabling variants In addition to using the default typography variants, you can add custom ones, or disable any you don't need. See the [Adding & disabling variants](/material-ui/customization/typography/#adding-amp-disabling-variants) page for more info. ### Changing the semantic element The Typography component uses the `variantMapping` prop to associate a UI variant with a semantic element. It's important to realize that the style of a typography component is independent from the semantic underlying element. To change the underlying element for a one-off situation, like avoiding two `h1` elements in your page, use the `component` prop: ```jsx h1. Heading ``` To change the typography element mapping globally, [use the theme](/material-ui/customization/typography/#adding-amp-disabling-variants): ```js const theme = createTheme({ components: { MuiTypography: { defaultProps: { variantMapping: { h1: 'h2', h2: 'h2', h3: 'h2', h4: 'h2', h5: 'h2', h6: 'h2', subtitle1: 'h2', subtitle2: 'h2', body1: 'span', body2: 'span', }, }, }, }, }); ``` ### System props :::info System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead. ```diff - + ``` ::: ## Accessibility Key factors to follow for an accessible typography: - **Color**. Provide enough contrast between text and its background, check out the minimum recommended [WCAG 2.0 color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) (4.5:1). - **Font size**. Use [relative units (rem)](/material-ui/customization/typography/#font-size), instead of pixels, to accommodate the user's browser settings. - **Heading hierarchy**. Based on [the W3 guidelines](https://www.w3.org/WAI/tutorials/page-structure/headings/), don't skip heading levels. Make sure to [separate the semantics from the style](#changing-the-semantic-element).