font-optical-sizing
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Thefont-optical-sizingCSS property sets whether text rendering is optimized for viewing at different sizes.
Try it
font-optical-sizing: auto;font-optical-sizing: none;<section> <div> <h2>Chapter 3</h2> <p> On this particular Thursday, something was moving quietly through the ionosphere many miles above the surface of the planet; several somethings in fact, several dozen huge yellow chunky slablike somethings, huge as office blocks, silent as birds. </p> </div></section>@font-face { src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); font-family: "Amstelvar"; font-style: normal;}#example-element { font-family: "Amstelvar", serif; text-align: left;}#example-element h2 { font-size: 36px;}#example-element p { font-size: 12px;}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: revert;font-optical-sizing: revert-layer;font-optical-sizing: unset;Values
Description
Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented byopsz infont-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 and text. It also applies to::first-letter and::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
font-optical-sizing =
auto|
none
Examples
Disabling optical sizing
<p> This paragraph is optically sized. This is the default across browsers.</p><p> 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", serif;}.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 candownload it on GitHub.
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-optical-sizing-def |