CSS font-synthesis-small-caps Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-synthesis-small-caps CSS property is used to control how small-caps fonts are synthesized when they are not available in a web font stack. Small-caps fonts consist of uppercase letters that are styled to look like smaller capitals. When a small-caps font is not present in the specified font stack, this property determines whether the browser should synthesize or fake the small-caps appearance by scaling down regular uppercase letters. By setting it to auto, the browser will decide whether to synthesize small-caps based on available fonts. However, when set to none, it explicitly prevents synthesis, ensuring that small-caps are only displayed if a true small-caps font is available, maintaining better typographic integrity.

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
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

<p class="english">

  These are the default <span class="small-caps">small-caps</span>,

  <strong>bold</strong>, and <em>oblique</em> typefaces.

</p>



<p class="english no-syn">

  The <span class="small-caps">small-caps</span> typeface is turned off here but

  not the <strong>bold</strong> and <em>oblique</em> typefaces.

</p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.small-caps {
  font-variant: small-caps;
}
.no-syn {
  font-synthesis-small-caps: none;
}

Result

Editor