Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use font-optical-sizing property in CSS?
Before moving onto learning the way of using font-optical-sizing property, we will first be looking at the font-property in CSS and why is there a need for font-optical-sizing as a separate property.
The styling of the text on the 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 gets applied to all the elements and is inheritable by nature, meaning the font of the child element will be the same as the font of the parent element unless specified otherwise.
The properties which make up the font shorthand property is given below −
Font-family − It specifies the font family that will get applied to the text, optionally you can give a list of families which has the priority from left to right.
Font-size − It is used to control the size of the font or text.
Font-stretch − You can use this property to set character faces which could either be narrower or wider than the normal characters.
Font-style − This property specifies whether the font should be displayed as a bold, italic, underlined or strikethrough text
Font-variant − To control the font variant and set different values for ligatures.
Font-weight − This property set how bold a text is going to be displayed.
Line-height − This is used to set the distance between the lines of text.
All these properties have an initial value, when no matter whether they are being used as a part of font shorthand property or used individually. For most of them the initial value is “normal”, the font-size has the default value of “medium”, and the font-family’s default value is dependent on the user’s system.
Example
An example that uses the font property to style the text is given below.
<!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 property that determines whether or not the text being produced is optimized for various screen sizes. The typeface glyphs' outline can be changed by the browser to make them more legible at various sizes.
It is very advantageous for us, if a font supports font-optical-sizing. This way we can make sure that the text will always adjust to the screen, that is being used by the user. Most of the variable font families support this property. When a typeface has an optical size variation axis, the optical sizing is automatically enabled. We use the value opsz in the font-variation-settings to represent the optical size variation axis.
When using optical scaling, smaller font sizes are frequently displayed with thicker strokes and greater serifs, whereas larger text is frequently produced more delicately with more contrast between thicker and thinner strokes.
The following values can be used while specifying this property −
None − We use this value when we do not need optically modified text.
Auto − The browser uses this value when we have to adjust glyph’s shape to the screen size.
Apart from these we can also use the global values (inherit, initial, and unset) as values for this property.
The initial value for this property is auto by default. It gets applied to all elements, also including the ::first-letter and ::first-line properties. It is an inheritable value and the value specified by the browser is used as its computed value. It has discrete animation-type.
Example
An example of using the value auto as this property’s value is given below.
<!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 use inherit as the value for the property which is one of the three global properties that are available for us to use 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
To conclude, 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 the typeface based on its intended usage, which can help improve readability and create a more consistent design across different screens. By utilizing this feature, designers are able to ensure that their typography looks great no matter what device it’s being viewed on, without having to manually adjust settings for each individual screen size.
217 Views
To Continue Learning Please Login