font-size-adjust

  • Revision slug: CSS/font-size-adjust
  • Revision title: font-size-adjust
  • Revision id: 19527
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Added pt locale (we have it!); 13 words added

Revision Content

{{ CSSRef() }}

Summary

The font-size-adjust CSS 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 {{ 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 font-size-adjust, it is specified as a number that the {{ 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: 14px;  font-size-adjust: 0.5;

is really specifying that the lowercase letters of the font should be 8px high (0.5 × 16px).

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

font-size-adjust:  <number> | none | {{ cssxref("inherit") }}

Values

none
Choose the size of the font based only on the {{ Cssxref("font-size") }} property.
<number>

Choose the size of the font so that its lowercase letters (as determined by the x-height metric of the font) are the specified number times the {{ Cssxref("font-size") }}.

The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice {{ Cssxref("font-family") }}. This will mean that the first choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust.

Examples

{{ CSSRefExampleLink("font-size-adjust") }}

p {
   font: 12px Verdana, "DejaVu Sans", sans-serif;
   font-size-adjust: 0.58;
} 

Specifications

This property was specified in CSS 2, but removed from CSS 2.1. It may come back in CSS 3.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }}  1.0 (1.0)
Windows only
{{ CompatNo() }}  {{ CompatNo() }}  {{ CompatNo() }} 
{{ CompatGeckoDesktop("1.9") }}
All platforms
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ languages( { "es": "es/CSS/font-size-adjust", "fr": "fr/CSS/font-size-adjust", "pl": "pl/CSS/font-size-adjust", "pt":"pt/CSS/font-size-adjust" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The<code> font-size-adjust </code>CSS 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 {{ 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<code> font-size-adjust</code>, it is specified as a number that the {{ 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</p>
<pre>font-size: 14px;  font-size-adjust: 0.5;
</pre>
<p>is really specifying that the lowercase letters of the font should be<code> 8px </code>high (0.5 × 16px).</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}


]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("none") }}</li> <li><dfn>Applies to:</dfn> all elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
</nobr>
<h2>Syntax</h2>
<pre class="eval">font-size-adjust:  &lt;number&gt; | none | {{ cssxref("inherit") }}</pre>
<h3>Values</h3>
<dl> <dt>none</dt> <dd>Choose the size of the font based only on the {{ Cssxref("font-size") }} property.</dd> <dt>&lt;number&gt;</dt> <dd> <p>Choose the size of the font so that its lowercase letters (as determined by the x-height metric of the font) are the specified number times the {{ Cssxref("font-size") }}.</p> <p>The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice {{ Cssxref("font-family") }}. This will mean that the first choice font, when available, will appear the same size in browsers, whether or not they<code> support font-size-adjust</code>.</p> </dd>
</dl>
<h2>Examples</h2>
<p>{{ CSSRefExampleLink("font-size-adjust") }}</p>
<pre class="brush: css">p {
   font: 12px Verdana, "DejaVu Sans", sans-serif;
   font-size-adjust: 0.58;
} </pre>
<h2>Specifications</h2>
<p>This property was specified in CSS 2, but removed from CSS 2.1. It may come back in CSS 3.</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust">CSS 2 Fonts #font-size-adjust</a> May 1998, obsolete</li> <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro" title="http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro">CSS 3 Fonts #font-size-adjust</a> Working draft</li>
</ul>
<h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td rowspan="2">Basic support</td> <td rowspan="2">{{ CompatNo() }} </td> <td>1.0 (1.0)<br> Windows only</td> <td rowspan="2">{{ CompatNo() }} </td> <td rowspan="2">{{ CompatNo() }} </td> <td rowspan="2">{{ CompatNo() }} </td> </tr> <tr> <td>{{ CompatGeckoDesktop("1.9") }}<br> All platforms</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a class="external" href="http://dbaron.org/log/20080613-firefox3-css#font-size-adjust" title="http://dbaron.org/log/20080613-firefox3-css#font-size-adjust">David Baron about font-size-adjust</a></li> <li>{{ CSS_Reference:Fonts() }}</li>
</ul>
<p>{{ languages( { "es": "es/CSS/font-size-adjust", "fr": "fr/CSS/font-size-adjust", "pl": "pl/CSS/font-size-adjust", "pt":"pt/CSS/font-size-adjust" } ) }}</p>
Revert to this revision