Text

Primitive typographic component.

import { Text } from 'theme-ui'

<Text
  sx={{
    fontSize: 4,
    fontWeight: 'bold',
  }}>
  Hello
</Text>
<Text variant='caps'>Hello</Text>
<Text
  sx={{
    fontSize: 4,
    fontWeight: 'bold',
  }}>
  Hello
</Text>
<Text variant='caps'>Hello</Text>

Variants

Text style variants can be defined in the theme.text object. The Text component uses theme.text.default as its default variant style.

// example theme variants
{
  text: {
    default: {
      color: 'text',
      fontSize: 3,
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.2em',
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
  }
}