Typography Styles or Text Styles are really a clean way to maintain cohesive and consistent textual styling across your application.
In this lesson, we’ll implement a typography system based on a Figma design spec. The goal is to take some text styles that were designed in Figma and properly implement them.
We'll define styles for things like display text and body by specifying the font, size, line height, letter spacing, etc.
Inside the panda.config file and within the theme object, add the textStyles property.
theme: {
extend: {
textStyles: {
display: {
large: {
value: {
fontSize: '56px',
lineHeight: '1.2',
},
},
medium: {
value: {
...
},
},
small: {
value: {
...
},
},
},
body: {
XLarge: {
value: {
...
},
},
large: {
value: {
...
},
},
medium: {
value: {
...
},
},
small: {
value: {
...
},
},
},
},
},
},Avoid specifying font weights within text styles. Instead, define font weight at the point of usage.