Typography Props

Typography props control text styling and font properties. Values reference the theme's typography scales.

Available Props

Prop	CSS Property	Theme Key
fontSize	font-size	fontSizes
fontFamily	font-family	fonts
fontWeight	font-weight	fontWeights
lineHeight	line-height	lineHeights
letterSpacing	letter-spacing	letterSpacings
textAlign	text-align	none
fontStyle	font-style	none
textTransform	text-transform	none
textDecoration	text-decoration	none

Theme Scales

{
  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'Georgia, serif',
    mono: 'Menlo, monospace',
  },
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  lineHeights: {
    normal: 'normal',
    none: 1,
    shorter: 1.25,
    short: 1.375,
    base: 1.5,
    tall: 1.625,
    taller: 2,
  },
}

Usage

<Box
  fontSize="lg"
  fontWeight="bold"
  lineHeight="tall"
  letterSpacing="wide"
  textAlign="center"
/>