Text styles
Type styles shipped with the Saas UI preset
Text styles map a name to fontSize and lineHeight. From 4xl up they also
set letter spacing. The default face is Inter Variable.
| Style | Notes |
|---|---|
2xs–3xl | Size + line height |
4xl–5xl | Plus letterSpacing: tight |
6xl | Plus tighter |
7xl | Plus tightest |
none | Empty. Clears an inherited text style |
<Text textStyle="sm">Secondary copy</Text>
<Heading textStyle="2xl">Page title</Heading>textStyle: xs
Chakra UI
textStyle: sm
Chakra UI
textStyle: md
Chakra UI
textStyle: lg
Chakra UI
textStyle: xl
Chakra UI
textStyle: 2xl
Chakra UI
textStyle: 3xl
Chakra UI
textStyle: 4xl
Chakra UI
textStyle: 5xl
Chakra UI
textStyle: 6xl
Chakra UI
textStyle: 7xl
Chakra UI