font-optical-sizing
Definition
The font-optical-sizing property in CSS is used to enable or disable the optical sizing feature of a font. Optical sizing is a feature that adjusts the letterforms of a font based on the font size and resolution to improve legibility and aesthetics. The property takes a value that enables or disables the feature.
Examples
Enable optical sizing for headings:
h1, h2, h3, h4, h5, h6 {
font-optical-sizing: auto;
}
Disable optical sizing for all text:
body {
font-optical-sizing: none;
}
Enable optical sizing for a specific element with a specific font size:
blockquote {
font-size: 1.5em;
font-optical-sizing: 100%;
}
Values
| Value | Description |
|---|---|
auto | The default value. The font's default optical sizing is used. |
none | Disables the optical sizing feature for the text element. |
<percentage> | Sets the optical sizing to a specific percentage value. The value determines the amount of optical adjustment applied to the font. |
Best Practices
- Use the font-optical-sizing property with caution, as excessive optical adjustment can reduce the legibility of text, particularly at small font sizes.
- Test your optical sizing settings on different devices and browsers to ensure that they are supported and display correctly.
- Consider using optical sizing in conjunction with other font properties, such as font-size, to achieve the desired text appearance.
- Be aware that not all fonts support optical sizing, and that the level of support may vary between fonts and browsers.
- Choose the level of optical sizing carefully based on the font and content, and consider the intended audience when applying the feature.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |