Tipografia

Documentação e exemplos de texto, utilizações comuns para controlar o alinhamento, quebra, peso e muito mais.

Alinhamento do texto

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

Left aligned text.

Center aligned text.

Right aligned text.

<Box textAlign="left">…
<Box textAlign="center">…
<Box textAlign="right">…

Peso da fonte

Light

Regular

Medium

500

Bold

<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…

Tamanho da fonte

Default

h6.fontSize

16px

<Box fontSize="fontSize">…
<Box fontSize="h6.fontSize">…
<Box fontSize={16}>…

Estilo da fonte

Normal font style.

Italic font Style.

Oblique font style.

<Box fontStyle="normal">…
<Box fontStyle="italic">…
<Box fontStyle="oblique">…

Família da fonte

Default

Monospace

<Box fontFamily="fontFamily">…
<Box fontFamily="Monospace">…

Espaçamento das letras

Letter Spacing 6px.

Letter Spacing 10px.

<Box letterSpacing={6}>…
<Box letterSpacing={10}>…

Altura da linha

Normal height.

line-height: 2

<Box lineHeight="normal">…
<Box lineHeight={10}>…

API

import { typography } from '@material-ui/system';

Nome da importação	Propriedade	Propriedade CSS	Chave do tema
`fontFamily`	`fontFamily`	`font-family`	`typography`
`fontSize`	`fontSize`	`font-size`	`typography`
`fontStyle`	`fontStyle`	`font-style`	`typography`
`fontWeight`	`fontWeight`	`font-weight`	`typography`
`letterSpacing`	`letterSpacing`	`letter-spacing`	none
`lineHeight`	`lineHeight`	`line-height`	none
`textAlign`	`textAlign`	`text-align`	none