Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1128831 of font-size-adjust

  • Revision slug: Web/CSS/font-size-adjust
  • Revision title: font-size-adjust
  • Revision id: 1128831
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Technical review completed.

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.

Legibility can become an issue 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 use this property 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 7px high (0.5 × 14px).

{{cssinfo}}

Syntax

/* Use the specified font size */
font-size-adjust: none;

/* Use a font size that makes lowercase
letters half the specified font size */
font-size-adjust: 0.5;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

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 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 means that the first choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust.

0 yields text of zero height (hidden text). Note that some old browsers, like Firefox prior version 40, treated 0 as none.

Formal syntax

{{csssyntax}}

Examples

HTML

<p> CSS Examples: font-size-adjust</p>
<br>
<div class="times"> This is the Times font (10px) which is hard to read in small sizes</div>
<p>
<div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font.</div>
<br>
<p> Now we 'll do an adjustment:</p>
<p>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

CSS

.times {
    font-family: Times, serif;
    font-size: 10px;
}

.verdana {
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

.adjtimes {
    font-family: Times, sans-serif; 
    font-size-adjust: 0.58;
    font-size: 10px;
}

Results

{{ EmbedLiveSample('Examples', '500', '300', '', 'Web/CSS/font-size-adjust') }}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }} {{ Spec2('CSS3 Fonts') }} Initial definition

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

44.0

{{CompatGeckoDesktop("1.0")}}[1]
{{ CompatGeckoDesktop("1.9") }}
{{ CompatNo() }}  {{ CompatNo() }}  {{ CompatNo() }} 
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{CompatChrome(42.0)}}

[1] Gecko 1.0 only supported this feature on Windows. Since Gecko 1.9 it has support for all platforms. There was a bug in versions prior to Gecko 40.0, which caused font-size-adjust: 0 to be interpreted as font-size-adjust: none. See {{bug("1144885")}}.

See also

Revision Source

<p>{{CSSRef}}</p>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>font-size-adjust</code></strong> 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.</p>

<p>Legibility can become an issue when the <span style="line-height: 19.0909080505371px;">first-choice {{ Cssxref("font-family") }} </span>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 use this property 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 class="brush: css">font-size: 14px;  
font-size-adjust: 0.5;
</pre>

<p>is really specifying that the lowercase letters of the font should be <code>7px</code> high (0.5 × 14px).</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">/* Use the specified font size */
font-size-adjust: none;

/* Use a font size that makes lowercase
letters half the specified font size */
font-size-adjust: 0.5;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Choose the size of the font based only on the {{ Cssxref("font-size") }} property.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>
 <p>Choose the size of the font so that its lowercase letters (as determined by the x-height 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 means that the first choice font, when available, will appear the same size in browsers, whether or not they support <code>font-size-adjust</code>.</p>

 <p><code>0</code> yields text of zero height (hidden text). Note that some old browsers, like Firefox prior version 40, treated <code>0</code> as <code>none</code>.</p>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt; CSS Examples: font-size-adjust&lt;/p&gt;
&lt;br&gt;
&lt;div class="times"&gt; This is the Times font (10px) which is hard to read in small sizes&lt;/div&gt;
&lt;p&gt;
&lt;div class="verdana"&gt; This is the Verdana font (10px) which does much better, since it is a sans - serif font.&lt;/div&gt;
&lt;br&gt;
&lt;p&gt; Now we 'll do an adjustment:&lt;/p&gt;
&lt;p&gt;
&lt;div class="adjtimes"&gt; and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.times {
    font-family: Times, serif;
<code class="language-html">    font-size: 10px;</code>
}

.verdana {
    font-family: Verdana, sans-serif;
<code class="language-html">    font-size: 10px;</code>
}

.adjtimes {
    font-family: Times, sans-serif; 
<code class="language-html">    </code>font-size-adjust: 0.58;
    font-size: 10px;
}
</pre>

<h3 id="Results">Results</h3>

<p>{{ EmbedLiveSample('Examples', '500', '300', '', 'Web/CSS/font-size-adjust') }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}</td>
   <td>{{ Spec2('CSS3 Fonts') }}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>The CSS property <code>font-size-adjust</code> was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.</p>

<h2 id="Browser_compatibility" 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>Basic support</td>
   <td>
    <p>44.0</p>
   </td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup><br>
    {{ CompatGeckoDesktop("1.9") }}</td>
   <td>{{ CompatNo() }} </td>
   <td>{{ CompatNo() }} </td>
   <td>{{ CompatNo() }} </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>
   <th>Chrome for Android</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>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko 1.0 only supported this feature on Windows. Since Gecko 1.9 it has support for all platforms. There was a bug in versions prior to Gecko 40.0, which caused <code>font-size-adjust: 0</code> to be interpreted as <code>font-size-adjust: none</code>. See {{bug("1144885")}}.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885" title="Link to Bugzilla bug 1144885">David Baron about font-size-adjust </a></li>
</ul>
Revert to this revision