Get Started
Components
Styling
Theming

Text Styles

Learn how to use text styles to define typography related properties.

Overview

Text styles allows you to define textual css properties. The common properties are:

  • Font: font family, weight, size
  • Line height
  • Letter spacing
  • Text decoration
  • Text transform

Defining text styles

Text styles are defined using the defineTextStyles function.

text-styles.ts
import { defineTextStyles } from "@pandacss/dev"


export const textStyles = defineTextStyles({
  body: {
    description: "The body text style - used in paragraphs",
    value: {
      fontFamily: "Inter",
      fontWeight: "500",
      fontSize: "16px",
      lineHeight: "24",
      letterSpacing: "0",
      textDecoration: "None",
      textTransform: "None",
    },
  },
})

Built-in text styles

Cerberus provides a set of built-in text styles.

  • display-lg

    used for large headlines to bring the most emphasis on a page - less than one sentence

  • display-md

    emphasized headlines to draw attention to, less than one sentence

  • display-sm

    bold text used in things like marketing cards, data viz etc

  • heading-2xl

    large on page header such as age tiles etc. one sentence or less

  • heading-xl

    use for things like section headers on a page etc

  • heading-lg

    use for subsections of pages, up to one sentence

  • heading-md

    emphasized subheads, cards etc

  • heading-sm

    headings for body text or things like card titles etc

  • heading-xs

    Use mostly as a subhead or body size text that is meant to be emphasized

  • heading-2xs

    used in chips or small pieces of information that introduce main content (a heading for a list of names etc)

  • body-lg

    large body blocks - 1 paragraph or less

  • body-md

    default body text size

  • body-sm

    body text used in compact things like cards and other areas where information density is required

  • label-sm

    default lable for things like radio buttons, input fields etc

  • label-md

    For large input fields that are designated to be more ephasized, used in rare cases.

  • button-md

    Default size for buttons across the platform

  • button-sm

    Used for small buttons, or other use cases where information density is important for actions.

  • mono-xl

    Reserved for numbers and data visualization

  • mono-lg

    Reserved for numbers and data visualization

  • mono-md

    Reserved for numbers and data visualization

  • mono-sm

    Reserved for numbers and data visualization

  • mono-xs

    Reserved for numbers and data visualization

  • link

    Used for inline text links.

Update the theme

To use the text styles, update the theme object with the textStyles property.

panda.config.ts
import {
  createCerberusConfig,
  createCerberusPreset,
} from '@cerberus/panda-preset'
import { textStyles } from "./text-styles"


export default createCerberusConfig({
  presets: [createCerberusPreset()],


  include: ['./app/**/*.{ts,tsx}'],
  exclude: [],


  theme: {
    extend: {
      textStyles,
    },
  }
})

Using text styles

Now you can use textStyle property in your components.

<Box textStyle="body">This is the body text style</Box>

On this page