Tipografia

O tema fornece um conjunto de tipos de tamanhos que funcionam bem juntos e também com a grade de leiaute.

Fonte

Você pode alterar a família de fontes com a propriedade theme.typography.fontFamily.

Por exemplo, esta demonstração usa a fonte do sistema em vez da fonte padrão Roboto:

const theme = createTheme({
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

Fontes auto-hospedadas

Para fontes auto-hospedadas, baixe os arquivos de fonte em formatos ttf, woff, e/ou woff2 e importe-os em seu código.

⚠️ Isso requer que você tenha um plugin ou loader em seu processo de compilação que possa manipular o carregamento de arquivos ttf, woff e woff2. Fontes não serão embutidas dentro do seu pacote. Elas serão carregadas de seu servidor da web em vez de uma CDN.

import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

Em seguida, você precisa alterar o tema para usar essa nova fonte. In order to globally define Raleway as a font face, the CssBaseline component can be used (or any other CSS solution of your choice).

import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

const theme = createTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Raleway';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: "local('Raleway'), local('Raleway-Regular'), url(${RalewayWoff2}) format('woff2')";
          unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
        }
      `,
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box
      sx={{
        fontFamily: 'Raleway',
      }}
    >
      Raleway
    </Box>
  </ThemeProvider>
);

Observe que se você deseja adicionar declarações @font-face adicionais, você precisa usar a sintaxe de string do modelo CSS para adicionar substituições de estilo, de modo que as declarações @font-face previamente definidas não serão substituídas.

Tamanho da fonte

Material-UI usa a unidade rem para o tamanho da fonte. O tamanho da fonte padrão do elemento <html> do navegador é 16px, mas os navegadores têm a opção de alterar esse valor, a unidade rem nos permite acomodar as configurações do usuário, resultando em um melhor suporte de acessibilidade. Os usuários alteram as configurações de tamanho da fonte por vários motivos, desde problemas de visão, até a escolha de configurações ideais para dispositivos que podem ser muito diferentes em tamanho e distância de visualização.

Para alterar o tamanho da fonte do Material-UI, você pode definir a propriedade fontSize. O valor padrão é 14px.

const theme = createTheme({
  typography: {
    // In Chinese and Japanese the characters are usually larger,
    // so a smaller fontsize may be appropriate.
    fontSize: 12,
  },
});

O tamanho da fonte computada pelo navegador segue esta equação matemática:

Tamanhos de fonte responsivo

As propriedades de variações de tipografia são mapeadas diretamente para o CSS gerado. You can use media queries inside them:

const theme = createTheme();

theme.typography.h3 = {
  fontSize: '1.2rem',
  '@media (min-width:600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2.4rem',
  },
};

Responsive h3

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
</ThemeProvider>

Press Enter to start editing

To automate this setup, you can use the responsiveFontSizes() helper to make Typography font sizes in the theme responsive.

Você pode ver isso em ação no exemplo abaixo. Adjust your browser's window size, and notice how the font size changes as the width crosses the different breakpoints:

import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

Responsive h3

Responsive h4

Responsive h5

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
  <Typography variant="h4">Responsive h4</Typography>
  <Typography variant="h5">Responsive h5</Typography>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
  <Typography variant="h4">Responsive h4</Typography>
  <Typography variant="h5">Responsive h5</Typography>
</ThemeProvider>

Press Enter to start editing

Tamanhos da fonte fluido

Para ser feito: #15251.

Tamanho da fonte no HTML

Você pode querer alterar o tamanho da fonte padrão do elemento <html>. Por exemplo, quando usando a simplificação de 10px.

Alterar o tamanho da fonte pode prejudicar a acessibilidade. Most browsers agreed on the default size of 16px, but the user can change it. Por exemplo, alguém com deficiência visual pode ter definido o tamanho da fonte padrão do navegador para algo maior.

The theme.typography.htmlFontSize property is provided for this use case, which tells MUI what the font-size on the <html> element is. This is used to adjust the rem value so the calculated font-size always match the specification.

const theme = createTheme({
  typography: {
    // Tell Material-UI what's the font-size on the html element is.
    htmlFontSize: 10,
  },
});

html {
  font-size: 62.5%; /* 62.5% de 16px = 10px */
}

You need to apply the above CSS on the html element of this page to see the below demo rendered correctly

body1

<ThemeProvider theme={theme}>
  <Typography>body1</Typography>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography>body1</Typography>
</ThemeProvider>

Press Enter to start editing

Variantes

The typography object comes with 13 variants by default:

h1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
button
caption
overline

Each of these variants can be customized individually:

const theme = createTheme({
  typography: {
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    button: {
      fontStyle: 'italic',
    },
  },
});

subtitle

body1

<ThemeProvider theme={theme}>
  <Typography variant="subtitle1">subtitle</Typography>
  <Typography>body1</Typography>
  <Button>Button</Button>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography variant="subtitle1">subtitle</Typography>
  <Typography>body1</Typography>
  <Button>Button</Button>
</ThemeProvider>

Press Enter to start editing

Adicionando & desativando variantes

Além de usar as variantes de tipografia padrão, você pode adicionar variantes personalizadas ou desabilitar as que não precisar. O que você precisa fazer:

Passo 1. Atualizar o tema da tipografia de um objeto

const theme = createTheme({
  typography: {
    poster: {
      color: 'red',
    },
    // Disable h3 variant
    h3: undefined,
  },
});

Passo 2. Atualize as tipagens necessárias (se você estiver usando TypeScript)

You need to make sure that the typings for the theme's typography variants and the Typography's variant prop reflects the new set of variants.

declare module '@material-ui/core/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@material-ui/core/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

Passo 3. Agora você pode usar a nova variante criada

poster

h3

<Typography variant="poster">poster</Typography>;

/* This variant is no longer supported */
<Typography variant="h3">h3</Typography>;

Valores padrão

Você pode explorar os valores padrão da tipografia usando o explorador de temas ou abrindo o console de ferramentas de desenvolvimento nesta página (window.theme.typography).