Pular para o conteúdo

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