mozilla

Revision 19446 of font-size

  • Revision slug: CSS/font-size
  • Revision title: font-size
  • Revision id: 19446
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment WIP suggestions from Tsalaportas; 576 words added, 8 words removed

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 items, 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") }}

Value types

There are several ways to specify the font size, with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

Keywords

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

Pixels

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height as you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to "larger", the child element displays larger than the parent element in the page.

Ems

Another way of setting the font size is with em values. An em value is dynamic. The definition of the em size is quite abstract, but simple to use: 1em is equal to the current font-size of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you then set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that "2" is essentially a multiplier of the current em value.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = required element pixel value ? parent font size in pixels

For example, if the body of the page is set to 1em, with browser standard of 1em = 16px, and the font-size you would want is 12px that would be 0.75em. Accordingly, 10px required value converts to 0.625em, and 22px converts to 1.375em.

A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size for any elements in em with an easy to remember conversion, by dividing the px by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. ie:

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}

 The em is a very useful unit in CSS, since it can adapt automatically to the font that the reader chooses to use.

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>
<h2>Summary</h2>
<p>The font-size property specifies the size of the font. The font size may, in turn, change the size of other items, 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>
<h2>Syntax</h2>
<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>
<h2>Value types</h2>
<p>There are several ways to specify the font size, with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p>
<h3>Keywords</h3>
<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p>
<h3>Pixels</h3>
<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height as you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p>
<p>Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to "larger", the child element displays larger than the parent element in the page.</p>
<h3>Ems</h3>
<p>Another way of setting the font size is with <code>em</code> values. An em value is dynamic. The definition of the em size is quite abstract, but simple to use: 1em is equal to the current font-size of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you then set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that "2" is essentially a multiplier of the current em value.</p>
<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p>
<p>em = required element pixel value ? parent font size in pixels</p>
<p>For example, if the body of the page is set to 1em, with browser standard of 1em = 16px, and the font-size you would want is 12px that would be 0.75em. Accordingly, 10px required value converts to 0.625em, and 22px converts to 1.375em.</p>
<p>A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size for any elements in em with an easy to remember conversion, by dividing the px by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. ie:</p>
<p>body {<br>
  font-size: 62.5%; /* font-size 1em = 10px */<br>
}<br>
p {<br>
  font-size: 1.6em; /* 1.6em = 16px */<br>
}</p>
<p> The em is a very useful unit in CSS, since it can adapt automatically to the font that the reader chooses to use.</p>
<p>Values</p>
<dl> <dt><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code> </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><code>larger</code>, <code>smaller</code> </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><em><a href="/en/CSS/length" title="en/CSS/length">length</a> </em></dt> <dd>A positive <a href="/en/CSS/length" title="en/CSS/length">length</a>.</dd> <dt><em>percentage</em> </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 lengths 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>
<p> </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