Pular para o conteúdo

🎉 Material UI v5 is out now! Check out the announcement blog post

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