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
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | All |
Further reading
- CSS Fonts Module Level 4 (Editor’s Draft)
- MDN documentation
- Variable fonts: Optical size, custom axes, and other curiosities (Responsive Web Typography)
