mozilla

Revision 19445 of font-size

  • Revision slug: CSS/font-size
  • Revision title: font-size
  • Revision id: 19445
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

Summary

The font-size property specifies the size of the font. The font size may, in turn, change the size of other things, since it is used to compute the value of em and ex length units.

  • {{ Xref_cssinitial() }}: {{ Cssxref("medium") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: Yes
  • Percentages: relative to parent element's font size
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: absolute length

Syntax

font-size: xx-small | x-small | small | medium | large | x-large | xx-large
font-size: smaller | larger
font-size: <length> | <percentage> | {{ Cssxref("inherit") }}

Values

xx-small, x-small, small, medium, large, x-large, xx-large 
A set of absolute size keywords based on the user's default font size (which is medium). Similar to presentational HTML's <font size="1"> through <font size="7"> where the user's default font size is <font size="3">.
larger, smaller 
Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.
<length> 
A positive length.
<percentage> 
A positive percentage of the parent element's font size.

It is best to avoid using values that are not relative to the user's default font size, such as <lengths> with units other than em or ex. However, if such values must be used, px are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.

Examples

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

/* Set paragraph text to be very large. */
p { font-size: xx-large }

/* Set h1 (level 1 heading) text to be 2.5 times the size
 * of the text around it. */
h1 { font-size: 250% }

/* Sets text enclosed within span tag to be 16px */
span { font-size: 16px; }

Notes

em and ex units on the {{ Cssxref("font-size") }} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for {{ Cssxref("font-size") }}.

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 5.5 9.2 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ CSS_Reference:Fonts() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The font-size property specifies the size of the font. The font size may, in turn, change the size of other things, since it is used to compute the value of <code>em</code> and <code>ex</code> length units.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("medium") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: Yes</li> <li>Percentages: relative to parent element's font size</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: absolute length</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">font-size: xx-small | x-small | small | medium | large | x-large | xx-large
font-size: smaller | larger
font-size: &lt;length&gt; | &lt;percentage&gt; | {{ Cssxref("inherit") }}</pre>
<h3 name="Values">Values</h3>
<dl> <dt>xx-small, x-small, small, medium, large, x-large, xx-large </dt> <dd>A set of absolute size keywords based on the user's default font size (which is <code>medium</code>). Similar to presentational HTML's <code>&lt;font size="1"&gt;</code> through <code>&lt;font size="7"&gt;</code> where the user's default font size is <code>&lt;font size="3"&gt;</code>.</dd> <dt>larger, smaller </dt> <dd>Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.</dd> <dt><a href="/en/CSS/length" title="en/CSS/length">&lt;length&gt;</a> </dt> <dd>A positive <a href="/en/CSS/length" title="en/CSS/length">length</a>.</dd> <dt>&lt;percentage&gt; </dt> <dd>A positive percentage of the parent element's font size.</dd>
</dl>
<p>It is best to avoid using values that are not relative to the user's default font size, such as &lt;lengths&gt; with units other than <code>em</code> or <code>ex</code>. However, if such values must be used, <code>px</code> are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.</p>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("font-size") }}</p>
<pre class="brush: css">/* Set paragraph text to be very large. */
p { font-size: xx-large }

/* Set h1 (level 1 heading) text to be 2.5 times the size
 * of the text around it. */
h1 { font-size: 250% }

/* Sets text enclosed within span tag to be 16px */
span { font-size: 16px; }
</pre>
<h3 name="Notes">Notes</h3>
<p><code>em</code> and <code>ex</code> units on the {{ Cssxref("font-size") }} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{ Cssxref("font-size") }}.</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size-prop">CSS3 Fonts</a></li>
</ul>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>2.0</td> <td>1.0</td> <td>5.5</td> <td>9.2</td> <td>1.3</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>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Fonts() }}</p>
<p>{{ languages( { "es": "es/CSS/font-size", "fr": "fr/CSS/font-size", "pl": "pl/CSS/font-size" } ) }}</p>
Revert to this revision