• Docs
  • Blog

    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    Cerberus FactoryResponsive DesignCSS VariablesThemes & Color ModesColor Opacity ModifierConditional StylesVirtual ColorCascade Layers

    Compositions

    Animation StylesText Styles

    Style Props

    BackgroundBorderEffectsSpacingText GradientTransitionsZ-Index

    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

    • Edit this page on Github
    Cerberus Design System | Docs