Text Styles

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

source

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.

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

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

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

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

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

button-md
Default size for buttons across the platform

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

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

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

Overview
Defining text styles
Built-in text styles
Update the theme
Using text styles