CSS font-optical-sizing Property

Description

The font-optical-sizing CSS property is a relatively new addition to the CSS specification that allows web designers to control how fonts are rendered at various sizes to optimize legibility and aesthetics. When applied to a font, it enables the browser to select the most appropriate glyph shapes and spacing for a given text size, ensuring that text remains clear and visually pleasing. This property is particularly useful for responsive web design, where text sizes can vary significantly across different devices and screen resolutions, as it helps maintain consistent readability and typographic quality across the board.

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.fontOpticalSizing

Interactive Demo

font-optical-sizing: auto;

font-optical-sizing: none;

Chapter 3

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.

Syntax

font-optical-sizing: none | auto

Values

noneThe browser will not modify the shape of glyphs for optimal viewing.
autoThe browser will modify the shape of glyphs for optimal viewing.

Example

HTML

<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>

CSS

@font-face {
  src: url("images/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

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

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

Result

Editor