Typography
Twenty-nine text styles in eight families, set in Geist, with Geist Mono for code. Size, line height and tracking are variables, so one style resolves per breakpoint: display and headings scale down on tablet and mobile, interface, label and overline styles hold.
Styles
Each style binds its size, line height and tracking to Chartory · Type. The values below are Desktop · Tablet · Mobile, as size / line height · tracking.
Every chart
display-xlD 80 / 88 · −4 % T 64 / 72 · −3.5 % M 48 / 56 · −3 %
Every chart
display-lgD 64 / 72 · −3.5 % T 52 / 60 · −3 % M 40 / 48 · −2.5 %
Designed and coded
heading-h1D 52 / 60 · −3 % T 44 / 52 · −2.5 % M 34 / 40 · −2 %
Designed and coded
heading-h2D 40 / 48 · −2.5 % T 34 / 40 · −2 % M 28 / 36 · −1.5 %
Designed and coded
heading-h3D 32 / 40 · −2 % T 28 / 36 · −1.5 % M 24 / 32 · −1 %
Designed and coded
heading-h4D 28 / 36 · −1.5 % T 24 / 32 · −1 % M 22 / 28 · −1 %
Designed and coded
heading-h5D 20 / 28 · −1 % T 20 / 28 · −1 % M 18 / 26 · −0.5 %
Designed and coded
heading-h6D 16 / 24 · −0.5 % T 16 / 24 · −0.5 % M 16 / 24 · −0.5 %
Long-form reading text with room to breathe across several lines.
paragraph-xlD 22 / 32 · −0.5 % T 20 / 30 · −0.5 % M 20 / 30 · −0.5 %
Long-form reading text with room to breathe across several lines.
paragraph-lgD 18 / 28 · −0.2 % T 18 / 28 · −0.2 % M 17 / 28 · −0.2 %
Long-form reading text with room to breathe across several lines.
paragraph-mdD 16 / 26 · 0 % T 16 / 26 · 0 % M 16 / 26 · 0 %
Long-form reading text with room to breathe across several lines.
paragraph-smD 14 / 22 · 0 % T 14 / 22 · 0 % M 14 / 22 · 0 %
Long-form reading text with room to breathe across several lines.
paragraph-xsD 13 / 20 · 0 % T 13 / 20 · 0 % M 13 / 20 · 0 %
Interface text for labels, tables and panels.
body-lgD 16 / 24 · 0 % T 16 / 24 · 0 % M 16 / 24 · 0 %
Interface text for labels, tables and panels.
body-mdD 14 / 20 · 0 % T 14 / 20 · 0 % M 14 / 20 · 0 %
Interface text for labels, tables and panels.
body-smD 13 / 18 · 0 % T 13 / 18 · 0 % M 13 / 18 · 0 %
Interface text for labels, tables and panels.
body-xsD 12 / 16 · 0 % T 12 / 16 · 0 % M 12 / 16 · 0 %
Get Chartory
label-lgD 16 / 24 · 0 % T 16 / 24 · 0 % M 16 / 24 · 0 %
Get Chartory
label-mdD 14 / 20 · 0 % T 14 / 20 · 0 % M 14 / 20 · 0 %
Get Chartory
label-smD 13 / 18 · 0 % T 13 / 18 · 0 % M 13 / 18 · 0 %
Get Chartory
label-xsD 12 / 16 · 0 % T 12 / 16 · 0 % M 12 / 16 · 0 %
Last updated
overline-mdD 12 / 16 · 6 % T 12 / 16 · 6 % M 12 / 16 · 6 %
Last updated
overline-smD 11 / 14 · 6 % T 11 / 14 · 6 % M 11 / 14 · 6 %
Last updated
overline-xsD 10 / 14 · 6 % T 10 / 14 · 6 % M 10 / 14 · 6 %
$1,284.50
numeric-xlD 52 / 56 · −3 % T 44 / 48 · −2.5 % M 36 / 40 · −2 %
$1,284.50
numeric-lgD 32 / 36 · −2 % T 28 / 32 · −1.5 % M 24 / 28 · −1 %
$1,284.50
numeric-mdD 24 / 28 · −1 % T 24 / 28 · −1 % M 24 / 28 · −1 %
$1,284.50
numeric-smD 18 / 24 · −0.5 % T 18 / 24 · −0.5 % M 18 / 24 · −0.5 %
npx shadcn add @chartory/waterfall
code-mdD 13 / 22 · 0 % T 13 / 22 · 0 % M 13 / 22 · 0 %