W3cubDocs

/CSS

font-optical-sizing

The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.

Syntax

/* keyword values */
font-optical-sizing: none; 
font-optical-sizing: auto; /* default */

/* Global values */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: unset;

Values

none
The browser will not modify the shape of glyphs for optimal viewing.
auto
The browser will modify the shape of glyphs for optimal viewing.

Description

Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by opsz in font-variation-settings.

When optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.

Formal definition

Initial value auto
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

auto | none

Examples

Disabling optical sizing

<p class="optical-sizing">This paragraph is optically sized.
 This is the default across browsers.</p>

<p class="no-optical-sizing">This paragraph is not optically sized.
 You should see a difference in supporting browsers.</p>
@font-face {
    src: url('AmstelvarAlpha-VF.ttf');
    font-family:'Amstelvar';
    font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

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

Note: The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can download it on GitHub.

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
font-optical-sizing 79 17 62
62
60 — 62
Disabled
Disabled From version 60 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 66 11
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
font-optical-sizing 79 79 62
62
60 — 62
Disabled
Disabled From version 60 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 11 12.0

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing