Text Styles

Overview

Instead of repeating fontSize, fontWeight, and lineHeight across dozens of components, text styles let you define them once and apply them everywhere using the textStyle prop.

By the end of this lesson, you'll have a clean, scalable typography system where every heading, paragraph, and caption feels intentional and cohesive.

Key Takeaways

Text styles bundle typography into reusable patterns. They combine properties like font family, size, weight, line height, and letter spacing into named, reusable styles.

Before: Inconsistent and repetitive typography

<Text fontSize="24px" fontWeight="600" lineHeight="1.2" letterSpacing="-0.02em">
  Welcome to Our Blog
</Text>
<Text fontSize="22px" fontWeight="bold" lineHeight="1.25" letterSpacing="-0.02em">
  Product Name
</Text>

Define text styles

export const textStyles = defineTextStyles({
  heading: {
    description: 'Primary heading style',
    value: {
      fontFamily: 'heading',
      fontWeight: 'bold',
      fontSize: '2xl',
      lineHeight: 'tight',
      letterSpacing: 'tight',
    },
  },
  body: {
    description: 'Default paragraph text',
    value: {
      fontFamily: 'body',
      fontWeight: 'normal',
      fontSize: 'md',
      lineHeight: 'normal',
      letterSpacing: 'normal',
    },
  },
})

Add textStyles to theme

Add them to your theme.ts configuration so they're available throughout your app:

const customConfig = defineConfig({
  theme: {
    textStyles,
  },
})

Use textStyle prop in components

Use the textStyle prop to assign styles easily:

<Text textStyle="heading">Welcome to Our Blog</Text>
<Text textStyle="body">Product Name</Text>

Now, you can update once and change everywhere.