Typography
Typography tokens give your theme consistent, scalable text styles across every component. You can adjust individual tokens or use scale multipliers to change all sizes or weights at once.
Font Family
Font family tokens are assigned to specific roles — body text, headings, code, and long-form prose. By default, they use system fonts for maximum performance.
| Custom Property | Description | Preview |
|---|---|---|
--cs-font-family-body |
Default font for body text and UI components | Sphinx of black quartz, judge my vow. |
--cs-font-family-heading |
Font for headings | Sphinx of black quartz, judge my vow. |
--cs-font-family-code |
Font for code blocks and inline code | Sphinx of black quartz, judge my vow. |
--cs-font-family-longform |
Font for long-form prose and reading-optimized content | Sphinx of black quartz, judge my vow. |
Font Size
Font sizes use a ratio of 1.125 to scale proportionally. The medium size (m) is the base; sizes below are 1.125× smaller and sizes above are twice 1.125× larger to maximize visual contrast between larger sizes. All values use rem units and round to the nearest whole pixel.
Use --cs-font-size-scale to proportionally increase or decrease all sizes at once.
| Custom Property | Description | Preview |
|---|---|---|
--cs-font-size-scale |
Global multiplier applied to all font size calculations | — |
--cs-font-size-3xs |
Smallest font size. Use sparingly and only for non-essential UI. | AaBb |
--cs-font-size-2xs |
Near-smallest font size. Use sparingly and only for non-essential UI. | AaBb |
--cs-font-size-xs |
Extra-small font size, suitable for labels and metadata | AaBb |
--cs-font-size-s |
Small font size, for secondary text and hints | AaBb |
--cs-font-size-m |
Base font size, used for most body text | AaBb |
--cs-font-size-l |
Large font size, for slightly emphasized text and small headings | AaBb |
--cs-font-size-xl |
Extra-large font size, for subheadings | AaBb |
--cs-font-size-2xl |
2× extra-large font size, for section headings | AaBb |
--cs-font-size-3xl |
3× extra-large font size, for page headings | AaBb |
--cs-font-size-4xl |
4× extra-large font size, for display headings | AaBb |
--cs-font-size-5xl |
5× extra-large font size, for hero headlines | AaBb |
--cs-font-size-smaller |
Makes text proportionally smaller relative to its parent's font size | Normal → smaller |
--cs-font-size-larger |
Makes text proportionally larger relative to its parent's font size | Normal → larger |
Font Weight
Font weight tokens come in two flavors: named weights that cover the full range, and role-based weights for specific text types. Role-based weights reference named weights by default.
| Custom Property | Description | Preview |
|---|---|---|
--cs-font-weight-light |
Light text weight | AaBb |
--cs-font-weight-normal |
Normal text weight | AaBb |
--cs-font-weight-semibold |
Medium/semibold text weight | AaBb |
--cs-font-weight-bold |
Bold text weight | AaBb |
--cs-font-weight-body |
Weight for body/paragraph text | AaBb |
--cs-font-weight-heading |
Weight for headings | AaBb |
--cs-font-weight-code |
Weight for code | AaBb |
--cs-font-weight-longform |
Weight for long-form prose | AaBb |
--cs-font-weight-action |
Weight for interactive text like button labels and tabs. Also recommended for links that don't use text decorations. | AaBb |
Line Height
Line heights are unitless to scale proportionately with text size. For readability, paragraph text should be at least 1.5.
| Custom Property | Description | Preview |
|---|---|---|
--cs-line-height-condensed |
Tight line height for headings and short UI text | The quick brown fox jumps over the lazy dog |
--cs-line-height-normal |
Standard line height for body/paragraph text | The quick brown fox jumps over the lazy dog |
--cs-line-height-expanded |
Open line height for reading-optimized or airy content | The quick brown fox jumps over the lazy dog |
Link Decoration
Together with --cs-color-text-link, these tokens add text decoration to <a> elements to signal their role as hyperlinks.
| Custom Property | Description | Preview |
|---|---|---|
--cs-link-decoration-default |
Text decoration applied to links in their default (non-hovered) state | Link text |
--cs-link-decoration-hover |
Text decoration applied to links on hover | Link text |