How to use the font-optical-sizing property in CSS
How to Use the CSS font-optical-sizing Property
Before learning how to use the font-optical-sizing property, let’s first look at the font-property in CSS and why it’s necessary to have a separate property for it.
The styling of text on a web page is controlled by the font-property in CSS, which is a shorthand for many other properties. It can be used to apply the system’s font to an element or set different values for other CSS properties.
Font Property
This property applies to all elements and is inheritable in nature, meaning that the font of a child element will be the same as the parent element’s font unless otherwise specified.
The properties that make up the font shorthand properties are as follows
- Font-family – This specifies the font family that will be applied to the text. You can optionally give a list of families with priority from left to right.
-
Font-size – This is used to control the size of the font or text.
-
Font-stretch – You can use this property to set the face of the characters, which can be narrower or wider than normal.
-
Font-style – This property specifies whether the font should be displayed as bold, italic, underlined, or strikethrough text.
-
Font-variant – Controls font variants and sets different values for hyphens.
-
Font-weight – This property sets the thickness of the displayed text.
-
Line-height – Used to set the distance between lines of text.
All of these properties have an initial value, whether used as part of a font shorthand property or on their own. For most of them, the initial value is “normal,” the default value for font-size is “medium,” and the default value for font-family depends on the user’s system.
Example
Below is an example of styling text using the font properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Various font styles</title>
</head>
<body> <p style="font:caption">This text will be displayed as a caption.</p>
<p style="font:icon">This text will be displayed as an icon.</p>
<p style="font:menu">This text will be displayed as a menu.</p>
<p style="font:message-box">This text will be displayed as message-box</p>
<p style="font:small-caption">This text will be displayed as a smaller form of caption.</p>
<p style="font:status-bar">This text will be displayed as status bar.</p>
<p style="font: bold;">This will be bold</p>
<p style="font-size: large;">This will have larger font size.</p>
</body>
</html>
What is font-optical-sizing
CSS has a font-optical-sizing This property determines whether the generated text is optimized for various screen sizes. Browsers can alter the outlines of font glyphs to make them more legible at various sizes.
It’s very advantageous for us if a font supports optical sizing. This way, we can ensure that the text always adjusts to the user’s screen. Most variable font families support this property. When a font has an optical size variation axis, optical sizing is automatically enabled. We use the value apsz in the font-variation-settings to represent the optical size variation axis.
When using optical zoom, smaller fonts often appear with thicker strokes and larger serifs, while larger text often uses a contrast between thicker and thinner strokes to create more refinement.
When specifying this property, the following values can be used: −
- None — This value is used when we don’t need optically modified text.
-
Auto — This value is used by the browser when we must adjust the font size based on the screen size.
In addition, we can use the global values (inherited, initial, and unset) as the value of this property.
The default initial value of this property is auto. It applies to all elements and also includes the ::first_letter and ::first_line properties. This is an inherited value, and the browser-specified value is used as its computed value. It has discrete animation types.
Example
The following example uses the auto value for this property.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes.</p>
</body>
</html>
Example
This example uses inherit as the value for this property, one of the three global properties available in CSS.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: inherit;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes using inherit as its value.</p>
</body>
</html>
Conclusion
In summary, the font-optical-sizing property in CSS is a great way to make text look better on different devices and resolutions. It allows you to adjust the size of a font based on its intended purpose, which can help improve readability and create a more consistent design across different screens. By leveraging this feature, designers can ensure their typography looks good on any device without having to manually adjust settings for each screen size.