CSS math-style Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The math-style property controls how user agents choose and shape glyphs and spacing specifically for mathematical content, affecting the visual relationship between variables, operators, and delimiters. It does not directly change the underlying math layout algorithm, but it influences which glyph variants and OpenType features are used, whether characters are treated as upright or slanted, and how certain symbols are scaled or spaced in different mathematical contexts. In practice this means the property helps ensure that mathematical expressions look consistent and readable by selecting glyph forms that match the intended typographic style for display, inline, or script-level math.

Authoring with math-style ties closely to the fonts and font features available to the document. The effective appearance depends on the chosen font-family and on which OpenType features are enabled via font-feature-settings or higher-level font controls like font-variant. A font that provides comprehensive math tables (for example, with dedicated mathematical glyph variants and metrics) will respond to the property by substituting appropriate glyphs; when a math-capable font is absent, user agents may emulate some effects but with less typographic fidelity.

Because it is a typographic control rather than a layout toggle, math-style interacts with sizing and vertical metrics so that substituted glyphs align correctly with surrounding text. Authors should consider the relationship between mathematical style choices and the element’s surrounding text metrics, notably properties such as font-size and line-height, since smaller or denser line settings can change how visible differences in glyph forms appear and how tightly operators and limits fit into a line. Setting the property on a container is an effective way to ensure consistent math rendering across all descendant math expressions.

In practical use, apply math-style when you need typographic consistency for math-heavy content — for example, in academic articles, textbooks, or web apps that render mathematical notation — and pair it with appropriate math-capable web fonts. Testing is important: check how different fonts respond and whether the user agent falls back to acceptable substitutions when a full math font is not available. Because the property delegates much of the work to the font and font-feature machinery, combining it with well-chosen fonts and feature settings yields the best results for clarity and aesthetics in mathematical typography.

Definition

Initial value: normal
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: no
JavaScript syntax: object.style.mathStyle

Syntax

math-style: normal | compact

Values

normalThe initial value, indicates normal rendering.
compactThe math layout on descendants tries to minimize the logical height.

Example

HTML

<div class="grid">

  <div class="example normal">

    <p>Normal math-style:</p>

    <math xmlns="http://www.w3.org/1998/Math/MathML">

      <mrow>

        <msup>

          <mi>a</mi>

          <mn>2</mn>

        </msup>

        <mo>+</mo>

        <msub>

          <mi>b</mi>

          <mn>1</mn>

        </msub>

        <mo>=</mo>

        <mfrac>

          <mi>c</mi>

          <mi>d</mi>

        </mfrac>

      </mrow>

    </math>

  </div>



  <div class="example compact">

    <p>Compact math-style:</p>

    <math xmlns="http://www.w3.org/1998/Math/MathML">

      <mrow>

        <msup>

          <mi>a</mi>

          <mn>2</mn>

        </msup>

        <mo>+</mo>

        <msub>

          <mi>b</mi>

          <mn>1</mn>

        </msub>

        <mo>=</mo>

        <mfrac>

          <mi>c</mi>

          <mi>d</mi>

        </mfrac>

      </mrow>

    </math>

  </div>

</div>

CSS

/* Layout and base */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
  font-family: "Times New Roman", serif;
  padding: 16px;
  background: #f7f7fb;
}

/* Card styling for each example */
.example {
  border: 1px solid #e3e6ef;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(12, 20, 40, 0.04);
}

.example p {
  margin: 0 0 8px 0;
  font-weight: 600;
  font-size: 14px;
  color: #222;
}

/* Apply the CSS math-style property to MathML elements */
.example.normal math {
  math-style: normal;
  font-size: 28px;
  color: #111;
}

.example.compact math {
  math-style: compact;
  font-size: 28px;
  color: #02494b;
}

/* Informational hint (non-essential) */
.grid::after {
  content: "Note: browser support for CSS math-style may vary. If unsupported, both examples can look the same.";
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS math-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.