Typography

Utilisez la typographie pour présenter votre design et votre contenu aussi clairement et efficacement que possible.

Trop de types de formats et de styles à la fois peuvent gâcher n'importe quelle mise en page. Une échelle typographique a un ensemble limité de tailles de type qui fonctionnent bien ensemble avec la grille de mise en page.

Général

La police Roboto ne sera pas automatiquement chargée par Material-UI. Le développeur est responsable du chargement de toutes les polices utilisées dans leur application. Roboto Font a quelques moyens faciles pour commencer. Pour une configuration plus avancée, consultez la section de personnalisation du thème.

Roboto Font CDN

Afficher ci-dessous est un exemple de balisage de lien utilisé pour charger la police Roboto à partir d'un CDN :

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

Installer via npm

Vous pouvez l'installer en tapant la commande ci-dessous dans votre terminal :

npm install @fontsource/roboto

Ensuite, vous pouvez l'importer dans votre point d'entrée.

import 'fontsource-roboto';

For more info check out Fontsource.

⚠️ Soyez prudent lorsque vous utilisez cette approche. 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.

Composant

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

Thème

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>

Changing the semantic element

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.

You can change the mapping globally using the theme:

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',
      },
    },
  },
});

Accessibilité

A few 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 (4.5:1).
Font size. Use relative units (rem) to accommodate the user's settings.
Heading hierarchy. Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the style.

API

<Typographie />