CSS font-optical-sizing Property


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
Applies to
all elements. It also applies to ::first-letter and ::first-line.
Computed value
as specified
JavaScript syntax

Interactive Demo

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.


font-optical-sizing: none | auto


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


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

<p class="no-optical-sizing">
This paragraph is not optically sized. You should see a difference in
supporting browsers.
@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;

Browser Support

The following table will show you the current browser support for the CSS font-optical-sizing property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024