Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post →

Ayuda a traducir esta página

Typography

Usa el componente de tipografía para mantener tus contenidos y diseño tan limpio y eficiente como sea posible.

Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

General

La fuente Roboto no será cargada automáticamente por Material-UI. El desarrollador es responsable de cargar todas las fuentes utilizadas en su aplicación. Roboto tiene algunas maneras fáciles de empezar. For more advanced configuration, check out the theme customization section.

Roboto Font CDN

Shown below is a sample link markup used to load the Roboto font from a CDN:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Instalar con npm

Puede instalarlo escribiendo el siguiente comando en su terminal:

npm install @fontsource/roboto

Entonces, puede importarlo en su punto de entrada.

import 'fontsource-roboto';

Para obtener más información, consulte Fuente.

⚠️ Tener cuidado cuando se utiliza este enfoque. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Fontsource can be configured to load specific subsets, weights and styles. Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights.

Componente

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text

Tema

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.

This div's text looks like that of a button.
<div className={classes.root}>{"This div's text looks like that of a button."}</div>

Cambiando el elemento semántico

The Typography component uses the variantMapping property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.

  • You can change the underlying element for a one time occasion with the component property:
Heading
</Typography> {/* There is already an h1 in the page, let's not duplicate it. {/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
  h1.
const theme = createTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});

Accesibilidad

A few key factors to follow for an accessible typography:

API