Home

Math

Usage

Start with these tokens when customizing math:

  • --math-font-family for equation typography

  • --math-spacing for vertical rhythm around blocks

  • --math-label-gap, --math-label-font-weight, and --math-label-color for equation labels

--math-spacing derives from --content-spacing for responsive rhythm, and label tokens align with the shared label styling used by figures and tables.

Tokens

Math Block Tokens

Layout and styling controls for block-level mathematical expressions.

TokenDescriptionDefault Value
--math-font-familyFont family for mathematical expressionsvar(--font-family-math)
--math-spacingVertical spacing (top margin)var(--content-spacing)
--math-label-gapSpacing between equation and labelvar(--space-4)
--math-label-font-weightFont weight for equation labelsvar(--label-font-weight)
--math-label-font-styleFont style for equation labelsvar(--label-font-style)
--math-label-colorText color for equation labelsvar(--label-color)

Math Inline Tokens

Inline mathematical expressions inherit the --math-font-family token but otherwise integrate within text flow.

Examples

Default Math Block

Standard math block styling with centered equation and right-aligned label:

:root {
  /* No design token overrides */
}
E=mc2
(1)

Custom Label Styling

Adjust label appearance for different document styles:

:root {
  --math-label-gap: var(--space-20);
  --math-label-color: var(--color-gray-400);
  --math-label-font-weight: normal;
}
0e-x2dx=π2
(2)

Inline Math

Inline mathematical expressions like eiπ+1=0 and 2 integrate within text flow using the same font family as block math but without layout tokens.

Image Fallbacks

Some math renderers may provide image fallbacks. When present, images are constrained to max-height: 1.1em for inline math and centered for blocks, matching the text flow and alignment.

© 2026 Stencila