Saltar al contenido

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

Tipografía

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Text alignment

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">

Font weight

Light
Regular
Medium
500
Bold
<Box fontWeight="fontWeightLight"><Box fontWeight="fontWeightRegular"><Box fontWeight="fontWeightMedium"><Box fontWeight={500}><Box fontWeight="fontWeightBold">

Font size

Default
h6.fontSize
16px
<Box fontSize="fontSize"><Box fontSize="h6.fontSize"><Box fontSize={16}>

Font Style

Normal font style.
Italic font Style.
Oblique font style.
<Box fontStyle="normal"><Box fontStyle="italic"><Box fontStyle="oblique">

Familia de fuente

Default
Monospace
<Box fontFamily="fontFamily"><Box fontFamily="Monospace">

Letter Spacing

Letter Spacing 6px.
Letter Spacing 10px.
<Box letterSpacing={6}><Box letterSpacing={10}>

Line Height

Normal height.
line-height: 2
<Box lineHeight="normal"><Box lineHeight={10}>

API

import { typography } from '@material-ui/system';
Nombre del import Prop Propiedad CSS Clave del 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