font-size-adjust

  • Revision slug: CSS/font-size-adjust
  • Revision title: font-size-adjust
  • Revision id: 19500
  • Created:
  • Creator: NjgZ0g
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSRef()}}

Summary

The {{template.Cssxref("font-size-adjust")}} property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters.

This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. This can cause problems when the first-choice {{template.Cssxref("font-family")}} is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

To do this in a way that is compatible with browsers that do not support {{template.Cssxref("font-size-adjust")}}, it is specified as a number that the {{template.Cssxref("font-size")}} property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies font-size: 16px; font-size-adjust: 0.5 is really specifying that the lowercase letters of the font should be 8px high (16px times 0.5).

Syntax

font-size-adjust:

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The {{template.Cssxref("font-size-adjust")}} property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
</p><p>This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.  This can cause problems when the first-choice {{template.Cssxref("font-family")}} is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).
</p><p>To do this in a way that is compatible with browsers that do not support {{template.Cssxref("font-size-adjust")}}, it is specified as a number that the {{template.Cssxref("font-size")}} property is multiplied by.  This means the value specified for the property should generally be the aspect ratio of the first choice font.  For example, a style sheet that specifies <code><a href="en/CSS/font-size">font-size</a>: 16px; <a href="en/CSS/font-size-adjust">font-size-adjust</a>: 0.5</code> is really specifying that the lowercase letters of the font should be <code>8px</code> high (16px times 0.5).
</p>
<ul><li> <a href="en/CSS/initial_value">Initial value</a>: <code>none</code>
</li><li> Applies to: all elements
</li><li> <a href="en/CSS/inheritance">Inherited</a>: yes
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li><li> <a href="en/CSS/computed_value">Computed value</a>: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<p><code>font-size-adjust:</code>
</p>
Revert to this revision