Tipografia

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

Variante

subtitle2

body1

body2

<Box sx={{ typography: 'subtitle2' }}>… <Box sx={{ typography: 'subtitle2' }}>… // theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}>…
<Box sx={{ typography: 'body2' }}>…
<Box sx={{ typography: 'body2' }}>… <Box sx={{ typography: 'subtitle2' }}>… // theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}>…
<Box sx={{ typography: 'body2' }}>…
<Box sx={{ typography: 'body2' }}>…

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 sx={{ textAlign: 'left' }}>…
<Box sx={{ textAlign: 'left' }}>…
<Box sx={{ textAlign: 'left' }}>…
<Box sx={{ textAlign: 'center' }}>…
<Box sx={{ textAlign: 'right' }}>…
<Box sx={{ textAlign: 'right' }}>…
<Box sx={{ textAlign: 'right' }}>…

Peso da fonte

capitalized text.

Lowercase Text.

Uppercase Text.

<Box sx={{ textTransform: 'capitalize' }}>…
<Box sx={{ textTransform: 'lowercase' }}>…
<Box sx={{ textTransform: 'uppercase' }}>…
<Box sx={{ textTransform: 'lowercase' }}>…
<Box sx={{ textTransform: 'uppercase' }}>…

Tamanho da fonte

Light

Regular

Medium

500

Bold

<Box sx={{ fontWeight: 'light' }}>… <Box sx={{ fontWeight: 'light' }}>… // theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>… <Box sx={{ fontWeight: 'light' }}>… // theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>…

Estilo da fonte

Default

h6.fontSize

16px

<Box sx={{ fontSize: 'default' }}>…  <Box sx={{ fontSize: 'default' }}>…  <Box sx={{ fontSize: 'default' }}>…  // theme.typography.fontSize
<Box sx={{ fontSize: 'h6.fontSize' }}>…
<Box sx={{ fontSize: 16 }}>…
<Box sx={{ fontSize: 16 }}>…
<Box sx={{ fontSize: 16 }}>…

Família da fonte

Normal font style.

Italic font Style.

Oblique font style.

<Box sx={{ fontStyle: 'normal' }}>…
<Box sx={{ fontStyle: 'italic' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…
<Box sx={{ fontStyle: 'normal' }}>…
<Box sx={{ fontStyle: 'italic' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…
<Box sx={{ fontStyle: 'italic' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…

Espaçamento das letras

Default

Monospace

<Box sx={{ fontFamily: 'default' }}>…
<Box sx={{ fontFamily:
'Monospace' }}>…

Altura da linha

Letter Spacing 6px.

Letter Spacing 10px.

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

Line height

Normal height.

line-height: 2

<Box sx={{ lineHeight: 'normal' }}>…
<Box sx={{ lineHeight: 10 }}>…
<Box sx={{ lineHeight: 'normal' }}>…
<Box sx={{ lineHeight: 10 }}>…
<Box sx={{ lineHeight: 10 }}>…

API

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

Nome da importação	Propriedade	Propriedade CSS	Chave do tema
`typography`	`typography`	`font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform`	`typography`
`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
`textTransform`	`textTransform`	`text-transform`	none