Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use font-optical-sizing property in CSS ?

  • Last Updated : 28 Jun, 2021

Whatever web applications or websites we make nowadays, we make sure that it is compatible with all screen sizes. So CSS comes with the font-optical-sizing property which sets whether the text being rendered is optimized for different screen sizes or not. It allows the browser to adjust the outline of font glyph to make them more eligible at different sizes.

If a font supports font-optical-sizing property then using this would be the most efficient way to optically size it. If we talk of the font that supports this property, then we can say that all the variable fonts support this property. For those fonts which have an optical size variation axis, the optical sizing gets enabled by default itself.

Syntax:

The syntax for the font-optical-sizing property is as follows.

font-optical-sizing: value;

 



Property values: This property accepts property values described below.

  • keyword_values:  Value of this property refers to the values defined by “auto”, “none”, etc.
  • global_values: Value of this property refers to the values defined by “inherit”, “initial”, “unset”.

Example 1: Below is the example that illustrates the use of font-optical-sizing property using property value “auto“. The webpage adjusts itself to maintain the shape of glyphs or characters for optimal viewing.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <style type="text/css">
    p { 
      color: green;
      padding: 5px;
      font-weight: bold;
      font-optical-sizing: auto;
     }
  </style>
</head>
<body>
  <p>Hello GeeksforGeeks!</p>
</body>
  
</html>

Output:

auto setting

Example 2: Below is the example that illustrates the font-optical-sizing property using the value “initial“.

HTML




<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    p { 
      color: green;
      padding: 6px;
      font-weight: bold;
      font-style: italic;
      font-optical-sizing: initial;
     }
    </style>
</head>
    
<body>
  <p>Welcome to this Computer Science portal</p>
</body>  
</html>

Output:

initial setting




My Personal Notes arrow_drop_up
Recommended Articles
Page :