Pular para o conteúdo
Ajude a traduzir esta página

Tipografia

Use a tipografia para apresentar seu design e conteúdo da forma mais clara e eficiente possível.

O uso de diferentes tamanhos e estilos de uma só vez pode estragar qualquer layout. Uma escala tipográfica tem um conjunto limitado de tamanhos de tipo que funcionam bem em conjunto com a grade de layout.

Geral

A fonte Roboto não será carregada automaticamente pelo Material-UI. O desenvolvedor é responsável por carregar todas as fontes usadas em sua aplicação. A fonte Roboto possui algumas maneiras fáceis de começar. Para configuração mais avançadas, dê uma olhada na seção de personalização de temas.

CDN da fonte Roboto

Temos abaixo um exemplo de markup de link usado para carregar a fonte Roboto de um CDN:

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

Instalar via npm

Você pode instalá-la digitando o comando a seguir em um terminal:

npm install typeface-roboto --save

Então, você pode importá-la no seu ponto de entrada (entry-point).

import 'typeface-roboto';

Para mais informações confira o projeto typeface.

⚠️ Tome cuidado ao usar essa abordagem. Certifique-se de que seu bundler não carregue ansiosamente todas as variações da fonte (100/300/400/500/700/900, itálico/regular, SVG/woff). Colocar todos os arquivos de fonte em linha pode aumentar o tamanho do seu pacote significativamente. A configuração de tipografia padrão do Material-UI depende apenas dos pesos de fonte de 300, 400, 500 e 700.

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

Em algumas situações, talvez você não consiga usar o componente Tipografia. 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>

Alterando o elemento semântico

O componente de Tipografia (Typography) usa a propriedade variantMapping para associar a variação da UI com um elemento semântico. É importante ressaltar que o estilo de uma tipografia é independente do elemento semântico por baixo dela.

  • Você pode alterar o elemento subjacente para uma ocasião única com a propriedade component:
{/ * Já existe um h1 na página, não vamos duplicá-lo. */}
<Typography variant="h1" component="h2">
  h1. Título
</Typography>
const theme = createMuiTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});

Acessibilidade

Alguns fatores chave a seguir para uma tipografia acessível:

API