font-optical-sizing

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that’s more “delicate” to quote the specification.

.element {
  font-optical-sizing: none;
}

Glyphs have outlines?

They do! In fact, all glyphs have them and they scale with the size of the font. The problem is that a super thin outline at a tiny font size may not provide enough contrast for the best legibility; similarly, thicker outlines at larger sizes may have too much weight and contrast. font-optical-sizing attempts to correct that by allowing the browser to fiddle with the outline so it reads better at different scales. The result will be crisper text and either narrower or wider text lengths depending on the font size.

This only works on fonts that support optical sizing

And the fonts that support optical sizing are variable fonts, including Roboto Delta, a variable version of Google’s classic Roboto. Another supporting font is Amstelvar. Both fonts are maintained by Type Network.

Even if a font is variable, it must explicitly support optical sizing as a feature.

Another way to optically size fonts

The font-optical-sizing property is the most efficient way to optically size a font that supports it. Another way is to use the font-variation-settings property, which allows you to control optical sizing with opsz, which is the keyword for optical sizing on variable fonts that support it.

Note that using font-variation-settings requires you to set the opsz in accordance to the font size so everything scales properly.

.element {
  font-size: 18px;
  font-variation-settings: 'opsz', 18;
}

Syntax

font-optical-sizing: auto | none;
  • Initial: auto
  • Applies to: all elements
  • Inherited: yes
  • Computed value: specified keyword
  • Animation type: discrete

Values

  • auto: This is the default value. It allows browsers to optimize text at different font sizes for legibility.
  • none: This prevents browsers from modifying text.

The property also accepts global keyword values, including inherit, initial and unset.

Demo

Browser support

IEEdgeFirefoxChromeSafariOpera
No17+62+79+11+66+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+81+11+All
Source: caniuse

Further reading