1. css
  2. /properties
  3. /font-optical-sizing



The font-optical-sizing property in CSS is used to enable or disable the optical sizing feature of a font. Optical sizing is a feature that adjusts the letterforms of a font based on the font size and resolution to improve legibility and aesthetics. The property takes a value that enables or disables the feature.


Enable optical sizing for headings:

h1, h2, h3, h4, h5, h6 {
  font-optical-sizing: auto;

Disable optical sizing for all text:

body {
  font-optical-sizing: none;

Enable optical sizing for a specific element with a specific font size:

blockquote {
  font-size: 1.5em;
  font-optical-sizing: 100%;


autoThe default value. The font's default optical sizing is used.
noneDisables the optical sizing feature for the text element.
<percentage>Sets the optical sizing to a specific percentage value. The value determines the amount of optical adjustment applied to the font.

Best Practices

  • Use the font-optical-sizing property with caution, as excessive optical adjustment can reduce the legibility of text, particularly at small font sizes.
  • Test your optical sizing settings on different devices and browsers to ensure that they are supported and display correctly.
  • Consider using optical sizing in conjunction with other font properties, such as font-size, to achieve the desired text appearance.
  • Be aware that not all fonts support optical sizing, and that the level of support may vary between fonts and browsers.
  • Choose the level of optical sizing carefully based on the font and content, and consider the intended audience when applying the feature.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera