CSS font-synthesis-small-caps Property

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

Description

The font-synthesis-small-caps property governs whether the user agent is allowed to synthesize small-caps glyphs when the chosen font does not provide true small-caps designs. In practice this means the browser can manufacture small-cap-like letterforms from the available glyphs (for example, by scaling or transforming uppercase forms) so that typographic features relying on small caps—such as certain headings, initials, or typographic emphasis—still render even when no dedicated small-caps OpenType feature is present in the selected font. Because the produced shapes are generated rather than designed, they will generally differ in proportion and stroke contrast from a real small-caps cut, which can affect the visual tone and legibility.

This property interacts with the broader font selection and variant system: whether small caps are requested and how they are chosen depends on properties such as font-variant (which signals that small-caps behavior is desired) and the chosen font-family (which determines whether native small-caps glyphs exist). When synthesis is enabled, the browser will typically use fallback strategies that try to preserve weight and color, but those strategies can be imperfect—synthesized small caps can look lighter or heavier than surrounding text, or introduce mismatched x-heights and spacing that affect justification and line breaks.

From a practical standpoint, authors should treat synthesis as a last resort: if consistent small-caps appearance is important, prefer fonts that provide true small-caps designs or enable opentype features explicitly (for example with font-feature-settings) when available. Also be mindful of interactions with other font-related controls such as font-weight, because synthetic transformations may change perceived weight and spacing; testing across sizes and weights is recommended. Finally, where precise typographic control is required (branding, print-like layouts, or high-density UI), consider serving a font family that includes designed small caps rather than relying on synthesized results.

Definition

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.fontSynthesisSmallCaps

Syntax

font-synthesis-small-caps: auto | none

Values

autoIndicates that the synthesis of the missing small-caps typeface by the browser is not allowed.
noneIndicates that the missing small-caps typeface may be synthesized by the browser if needed.

Example

HTML

<div class='wrapper'>

  <h1>font-synthesis-small-caps demo</h1>

  <p class='note'>This demo requests small caps via font-variant-caps and shows different synthesis settings.</p>

  <p class='example default'>Default (synthesis allowed): The quick brown fox jumps over the lazy dog.</p>

  <p class='example no-synth'>Synthesis disabled (font-synthesis-small-caps: none): The quick brown fox jumps over the lazy dog.</p>

  <p class='example explicit'>Explicit synth (font-synthesis: small-caps): The quick brown fox jumps over the lazy dog.</p>

</div>

CSS

/* Basic page styles */
body {
  font-family: system-ui, Arial, sans-serif;
  padding: 24px;
  background: #f7f7f8;
  color: #111;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 12px;
}

.note {
  margin-bottom: 14px;
  color: #555;
}

.example {
  background: #fff;
  border-left: 4px solid #2b6cb0;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 18px;
  line-height: 1.4;
}

/* Allow synthesis (default) */
.example.default {
  font-variant-caps: small-caps;
}

/* Disable synthesis using both shorthand and the longhand small-caps property */
.example.no-synth {
  font-variant-caps: small-caps;
  font-synthesis: none;
  font-synthesis-small-caps: none;
}

/* Explicitly allow small-caps synthesis */
.example.explicit {
  font-variant-caps: small-caps;
  font-synthesis: small-caps;
}

Result

Editor

Browser Support

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