CSS - font-optical-sizing Property

The font-optical-sizing property of CSS is used to set whether rendering of text should be optimized to view at different sizes.

Possible Values

  • none: Shape of glyphs not modified for optimal viewing by the browser.

  • auto: Shape of glyphs modified for optimal viewing by the browser.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontOpticalSizing = "none | auto";

CSS font-optical-sizing - Basic Example

Here is an example:

<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
    p {
        margin-bottom: 5px;
        border: 2px solid red;
    }
    .eng {
        font-family: "Montserrat", sans-serif;

    }
    .opt-no {
        font-optical-sizing: none;
    }
    .opt-yes {
        font-optical-sizing: auto;
    }
</style>
</head>
<body>
    <h3>Optical sizing -none</h3>
    <p class="eng opt-no">Check the optical sizing</p>

    <h3>Optical sizing -auto</h3>
    <p class="eng opt-yes">Check the optical sizing</p>
</body>
</html>
Advertisements