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.

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.

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