font-optical-sizing
Quick Summary for font-optical-sizing
The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
Code Usage for font-optical-sizing
/* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */  /* Global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: revert; font-optical-sizing: unset; 
More Details for font-optical-sizing

font-optical-sizing

The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.

Syntax

/* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */  /* Global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: revert; font-optical-sizing: unset; 

Values

none

The browser will not modify the shape of glyphs for optimal viewing.

auto

The browser will modify the shape of glyphs for optimal viewing.

Description

Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by opsz in font-variation-settings.

When optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.

Formal definition

Initial valueauto
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

auto | none

Examples

Disabling optical sizing

<p class="optical-sizing">This paragraph is optically sized.  This is the default across browsers.</p>  <p class="no-optical-sizing">This paragraph is not optically sized.  You should see a difference in supporting browsers.</p> 
@font-face {     src: url('AmstelvarAlpha-VF.ttf');     font-family:'Amstelvar';     font-style: normal; }  p {   font-size: 36px;   font-family: Amstelvar; }  .no-optical-sizing {   font-optical-sizing: none; } 

Note: The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can download it on GitHub.

Specifications

Specification
CSS Fonts Module Level 4 # font-optical-sizing-def

See also

font-size font-size-adjust Fundamental text and font styling

Last modified: Aug 12, 2021, by MDN contributors

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
The problem with hoarding is you end up living off your reserves. Eventually, you’ll become stale. If you give away everything you have, you are left with nothing. This forces you to look, to be aware, to replenish. . . . Somehow the more you give away, the more comes back to you.
Paul Arden
Random CSS Property

z-index

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
z-index css reference