Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use font-optical-sizing property in CSS?
The CSS font-optical-sizing property controls whether the browser automatically adjusts the appearance of text glyphs to optimize readability at different font sizes. This property is particularly useful with variable fonts that support optical size variations.
Syntax
selector {
font-optical-sizing: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Browser automatically optimizes glyph shapes based on font size (default) |
none |
Disables optical sizing adjustments |
inherit |
Inherits the value from the parent element |
How Optical Sizing Works
When optical sizing is enabled, the browser adjusts glyph characteristics based on font size
- Small text Uses thicker strokes and larger serifs for better readability
- Large text Uses more delicate strokes with greater contrast for refined appearance
Example: Auto Optical Sizing
The following example demonstrates automatic optical sizing at different font sizes
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
font-family: 'Times New Roman', serif;
font-optical-sizing: auto;
margin: 20px 0;
}
.small-text {
font-size: 12px;
}
.medium-text {
font-size: 18px;
}
.large-text {
font-size: 36px;
}
</style>
</head>
<body>
<div class="text-container small-text">Small text with optical sizing enabled</div>
<div class="text-container medium-text">Medium text with optical sizing</div>
<div class="text-container large-text">Large text optimized</div>
</body>
</html>
Three lines of text appear at different sizes. The browser automatically adjusts the stroke thickness and character details for optimal readability at each size.
Example: Disabling Optical Sizing
This example shows how to disable optical sizing using the none value
<!DOCTYPE html>
<html>
<head>
<style>
.comparison {
font-family: 'Georgia', serif;
font-size: 14px;
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
}
.with-optical-sizing {
font-optical-sizing: auto;
background-color: #f0f8ff;
}
.without-optical-sizing {
font-optical-sizing: none;
background-color: #fff5f5;
}
</style>
</head>
<body>
<div class="comparison with-optical-sizing">
Text with optical sizing enabled (auto)
</div>
<div class="comparison without-optical-sizing">
Text with optical sizing disabled (none)
</div>
</body>
</html>
Two text boxes appear - one with light blue background showing optimized text, and one with light red background showing non-optimized text. The difference in stroke thickness and character details may be subtle depending on the font.
Browser Support
The font-optical-sizing property is supported in modern browsers and works best with variable fonts that include optical size variations. The property is automatically applied when a font supports the opsz variation axis.
Conclusion
The font-optical-sizing property enhances text readability by automatically optimizing glyph appearance at different sizes. Use auto for automatic optimization or none to disable this feature when precise control is needed.
467 Views
