Wyst...
0 Tk

Typography

Typography

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

Roboto font

MaterialĀ UI uses the Roboto font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.

npm install @fontsource/roboto

pnpm add @fontsource/roboto

yarn add @fontsource/roboto

Then you can import it in your entry point like this:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

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:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

Component

Usage

The Typography component follows the Material Design typographic 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 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 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:

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

To change the typography element mapping globally, use the theme:

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

System props are deprecated and will be removed in the next major release. Please use the sx prop instead.

- <Typography mt={2} />
+ <Typography sx={{ mt: 2 }} />

Accessibility

Key factors to follow for an accessible typography: