mozilla

Compare Revisions

font-size

Change Revisions

Revision 233526:

Revision 233526 by Mezzanine on

Revision 233527:

Revision 233527 by ethertank on

Title:
font-size
font-size
Slug:
CSS/font-size
CSS/font-size
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 233526
Revision 233527
n18    </p><nobr>&lt;style type="text/css"&gt;<!--[CDATA[.cssprop {n18    </p>
19  display:table;
20  padding: 0.4em;
21  border-left:0.15em solid;
22  background-color:#eeeeff
23}
24.cssprop li {
25 display:table-row;
26 padding: 3px;
27 margin:0;
28}
29.cssprop li dfn {
30  display:table-cell;
31  padding: 0 5px;
32  border-bottom: none;
33  cursor:inherit;
34}
35 
36 
37 
38 
39]]-->&lt;/style&gt;</nobr>
n42        <nobr><dfn>{{ Xref_cssinitial() }}:</dfn> <code>medium</cn21        <dfn>{{ Xref_cssinitial() }}:</dfn> <code>medium</code>
>ode></nobr> 
43      </li>
44      <li>22      </li>
45        <nobr><dfn>Applies to:</dfn> all elements</nobr>
46      </li>23      <li>
24        <dfn>Applies to:</dfn> all elements
47      <li>25      </li>
48        <nobr><dfn>{{ Xref_cssinherited() }}:</dfn> Yes</nobr>
49      </li>26      <li>
27        <dfn>{{ Xref_cssinherited() }}:</dfn> Yes
50      <li>28      </li>
51        <nobr><dfn>Percentages:</dfn> relative to parent element'
>s font size</nobr> 
52      </li>29      <li>
30        <dfn>Percentages:</dfn> relative to parent element's font
 > size
53      <li>31      </li>
54        <nobr><dfn>Media:</dfn> {{ Xref_cssvisual() }}</nobr>
55      </li>32      <li>
33        <dfn>Media:</dfn> {{ Xref_cssvisual() }}
56      <li>34      </li>
35      <li>
57        <nobr><dfn>{{ Xref_csscomputed() }}:</dfn> absolute lengt36        <dfn>{{ Xref_csscomputed() }}:</dfn> absolute length
>h</nobr> 
n61      <nobr>Syntax</nobr>n40      Syntax
n64<nobr>font-size: xx-small | x-small | small |n43font-size: xx-small | x-small | small |
n67</nobr>n
n70      <nobr>Values</nobr>n48      Values
n74        <nobr><code>xx-small</code>, <code>x-small</code>, <code>n52        <code>xx-small</code>, <code>x-small</code>, <code>small<
>small</code>, <code>medium</code>, <code>large</code>, <code>x-la>/code>, <code>medium</code>, <code>large</code>, <code>x-large</c
>rge</code>, <code>xx-large</code></nobr>>ode>, <code>xx-large</code>
75      </dt>
76      <dd>
77        <nobr>A set of absolute size keywords based on the user's
> default font size (which is <code>medium</code>). Similar to pre 
>sentational HTML's <code>&lt;font size="1"&gt;</code> through <co 
>de>&lt;font size="7"&gt;</code> where the user's default font siz 
>e is <code>&lt;font size="3"&gt;</code>.</nobr> 
78      </dd>
79      <dt>53      </dt>
80        <nobr><code>larger</code>, <code>smaller</code></nobr>
81      </dt>54      <dd>
55        A set of absolute size keywords based on the user's defau
 >lt font size (which is <code>medium</code>). Similar to presentat
 >ional 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>.
82      <dd>56      </dd>
57      <dt>
58        <code>larger</code>, <code>smaller</code>
59      </dt>
60      <dd>
83        <nobr>Larger or smaller than the parent element's font si61        Larger or smaller than the parent element's font size, by
>ze, by roughly the ratio used to separate the absolute size keywo> roughly the ratio used to separate the absolute size keywords ab
>rds above.</nobr>>ove.
84      </dd>
85      <dt>
86        <nobr><em><a href="/en/CSS/length" title="en/CSS/length">
>length</a></em></nobr> 
87      </dt>
88      <dd>62      </dd>
63      <dt>
64        <em><a href="/en/CSS/length" title="en/CSS/length">length
 ></a></em>
65      </dt>
66      <dd>
89        <nobr>A positive <a href="/en/CSS/length" title="en/CSS/l67        A positive <a href="/en/CSS/length" title="en/CSS/length"
>ength">length</a>. When the units are specified in <code>em</code>>length</a>. When the units are specified in <code>em</code> or <
>> or <code>ex</code>,&nbsp; the size is defined relative to the s>code>ex</code>,&nbsp; the size is defined relative to the size of
>ize of the font on the parent element of the element in question.> the font on the parent element of the element in question. For e
> For example, 0.5em is half the font size of the parent of the cu>xample, 0.5em is half the font size of the parent of the current 
>rrent element.</nobr>>element.
90      </dd>
91      <dt>
92        <nobr><em>percentage</em></nobr>
93      </dt>
94      <dd>68      </dd>
69      <dt>
70        <em>percentage</em>
71      </dt>
72      <dd>
95        <nobr>A positive percentage of the parent element's font 73        A positive percentage of the parent element's font size.
>size.</nobr> 
n99      <nobr>It is best to avoid using values that are not relativn77      It is best to avoid using values that are not relative to t
>e to the user's default font size, such as lengths with units oth>he user's default font size, such as lengths with units other tha
>er than <code>em</code> or <code>ex</code>. However, if such valu>n <code>em</code> or <code>ex</code>. However, if such values mus
>es must be used, <code>px</code> are preferred over other units b>t be used, <code>px</code> are preferred over other units because
>ecause their meaning does not vary depending on what the operatin> their meaning does not vary depending on what the operating syst
>g system thinks (generally incorrectly) the resolution of the mon>em thinks (generally incorrectly) the resolution of the monitor i
>itor is.</nobr>>s.
100    </p>
101    <h2>78    </p>
102      <nobr>Possible approaches</nobr>
103    </h2>79    <h2>
80      Possible approaches
104    <p>81    </h2>
82    <p>
105      <nobr>There are several ways to specify the font size, with83      There are several ways to specify the font size, with keywo
> keywords or numerical values for pixels or ems. Choose the appro>rds or numerical values for pixels or ems. Choose the appropriate
>priate method based on the needs for the particular web page.</no> method based on the needs for the particular web page.
>br> 
n108      <nobr>Keywords</nobr>n86      Keywords
n111      <nobr>Keywords are a good way to set the size of fonts on tn89      Keywords are a good way to set the size of fonts on the web
>he web. By setting a keyword font size on the body element, you c>. By setting a keyword font size on the body element, you can set
>an set relative font-sizing everywhere else on the page, giving y> relative font-sizing everywhere else on the page, giving you the
>ou the ability to easily scale the font up or down on the entire > ability to easily scale the font up or down on the entire page a
>page accordingly.</nobr>>ccordingly.
n114      <nobr>Pixels</nobr>n92      Pixels
n117      <nobr>Setting the font size in pixel values (<code>px</coden95      Setting the font size in pixel values (<code>px</code>) is 
>>) is a good choice when you need pixel accuracy. A px value is s>a good choice when you need pixel accuracy. A px value is static.
>tatic. This is an OS-independent and cross-browser way of literal> This is an OS-independent and cross-browser way of literally tel
>ly telling the browsers to render the letters at exactly the numb>ling the browsers to render the letters at exactly the number of 
>er of pixels in height that you specified. The results may vary s>pixels in height that you specified. The results may vary slightl
>lightly across browsers, as they may use different algorithms to >y across browsers, as they may use different algorithms to achiev
>achieve a similar effect.</nobr>>e a similar effect.
118    </p>
119    <p>96    </p>
97    <p>
120      <nobr>Font sizing settings can also be used in combination.98      Font sizing settings can also be used in combination. For e
> For example, if a parent element is set to <code>16px</code> and>xample, if a parent element is set to <code>16px</code> and its c
> its child element is set to <code>larger</code>, the child eleme>hild element is set to <code>larger</code>, the child element dis
>nt displays larger than the parent element in the page.</nobr>>plays larger than the parent element in the page.
n123      <nobr><strong>Note:</strong>&nbsp;Defining font sizes in pin101      <strong>Note:</strong>&nbsp;Defining font sizes in pixel is
>xel is <em>not accessible</em>, because the user cannot change th> <em>not accessible</em>, because the user cannot change the font
>e font size from the browser. (For example, users with limited vi> size from the browser. (For example, users with limited vision m
>sion may wish to set the font size much larger than the size chos>ay wish to set the font size much larger than the size chosen by 
>en by a web designer.) Therefore, avoid using pixels for font siz>a web designer.) Therefore, avoid using pixels for font sizes if 
>es if you wish to create an inclusive design.</nobr>>you wish to create an inclusive design.
n126      <nobr>Ems</nobr>n104      Ems
n129      <nobr>Another way of setting the font size is with <code>emn107      Another way of setting the font size is with <code>em</code
></code> values. The size of an <code>em</code> value is dynamic. >> values. The size of an <code>em</code> value is dynamic. When d
>When defining the <code>font-size</code> property, an em is equal>efining the <code>font-size</code> property, an em is equal to th
> to the size of the font that applies to the parent of the elemen>e size of the font that applies to the parent of the element in q
>t in question. If you haven't set the font size anywhere on the p>uestion. If you haven't set the font size anywhere on the page, t
>age, then it is the browser default, which is probably 16px. So, >hen it is the browser default, which is probably 16px. So, by def
>by default 1em = 16px, and 2em = 32px. If you set a <code>font-si>ault 1em = 16px, and 2em = 32px. If you set a <code>font-size</co
>ze</code> of 20px on the body element, then 1em = 20px and 2em = >de> of 20px on the body element, then 1em = 20px and 2em = 40px. 
>40px. Note that the value 2 is essentially a multiplier of the cu>Note that the value 2 is essentially a multiplier of the current 
>rrent em size.</nobr>>em size.
130    </p>
131    <p>108    </p>
109    <p>
132      <nobr>In order to calculate the em equivalent for any pixel110      In order to calculate the em equivalent for any pixel value
> value required, you can use this formula:</nobr>> required, you can use this formula:
n135<nobr>em = desired element pixel value / parent element font-sizen113em = desired element pixel value / parent element font-size in pi
> in pixels</nobr>>xels
n137    <p>n
138      <nobr>For example, suppose the font-size of the body of the
> page is set to 1em, with the browser standard of 1em = 16px; if  
>the font-size you want is 12px, then you should specify 0.75em (b 
>ecause 12/16 = 0.75). Similarly, if you want a font size of 10px, 
> then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em  
>(22/16).</nobr> 
139    </p>115    <p>
116      For example, suppose the font-size of the body of the page 
 >is set to 1em, with the browser standard of 1em = 16px; if the fo
 >nt-size you want is 12px, then you should specify 0.75em (because
 > 12/16 = 0.75). Similarly, if you want a font size of 10px, then 
 >specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16
 >).
140    <p>117    </p>
118    <p>
141      <nobr>A popular technique to use throughout the document is119      A popular technique to use throughout the document is to se
> to set the the font-size of the body to 62.5% (that is 62.5% of >t the the font-size of the body to 62.5% (that is 62.5% of the de
>the default of 16px), which equates to 10px, or 0.625em. Now you >fault of 16px), which equates to 10px, or 0.625em. Now you can se
>can set the font-size for any elements using em units, with an ea>t the font-size for any elements using em units, with an easy-to-
>sy-to-remember conversion, by dividing the px value by 10. This w>remember conversion, by dividing the px value by 10. This way 6px
>ay 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1> = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. 
>.6em. For example:</nobr>>For example:
n144<nobr>body {n122body {
n150</nobr>n
n153      <nobr>&nbsp;The em is a very useful unit in CSS, since it cn130      &nbsp;The em is a very useful unit in CSS, since it can ada
>an adapt automatically to the font that the reader chooses to use>pt automatically to the font that the reader chooses to use.
>.</nobr> 
154    </p>
155    <h2>131    </p>
156      <nobr>Examples</nobr>
157    </h2>132    <h2>
133      Examples
158    <p>134    </h2>
135    <p>
159      <nobr>{{ CSSRefExampleLink("font-size") }}</nobr>136      {{ CSSRefExampleLink("font-size") }}
n162<nobr>/* Set paragraph text to be very large. */n139/* Set paragraph text to be very large. */
n171</nobr>n
n173    <h2>n
174      <nobr>Notes</nobr>
175    </h2>149    <h2>
150      Notes
176    <p>151    </h2>
152    <p>
177      <nobr><code>em</code> and <code>ex</code> units on the {{ C153      <code>em</code> and <code>ex</code> units on the {{ Cssxref
>ssxref("font-size") }} property are relative to the parent elemen>("font-size") }} property are relative to the parent element's fo
>t's font size (unlike all other properties, where they're relativ>nt size (unlike all other properties, where they're relative to t
>e to the font size on the element). This means <code>em</code> un>he font size on the element). This means <code>em</code> units an
>its and percentages do the same thing for {{ Cssxref("font-size")>d percentages do the same thing for {{ Cssxref("font-size") }}.
> }}.</nobr> 
178    </p>
179    <h2>154    </p>
155    <h2>
180      <nobr>Specifications</nobr>156      Specifications
n184        <nobr><a class="external" href="http://www.w3.org/TR/CSS2n160        <a class="external" href="http://www.w3.org/TR/CSS21/font
>1/fonts.html#font-size-props" title="http://www.w3.org/TR/CSS21/f>s.html#font-size-props" title="http://www.w3.org/TR/CSS21/fonts.h
>onts.html#font-size-props"><strong>CSS</strong> Level <strong>2.1>tml#font-size-props"><strong>CSS</strong> Level <strong>2.1</stro
></strong> Fonts #font-size-props</a> Recommendation, June 7 2011<>ng> Fonts #font-size-props</a> Recommendation, June 7 2011
>/nobr> 
185      </li>
186      <li>161      </li>
162      <li>
187        <nobr><a class="external" href="http://www.w3.org/TR/css3163        <a class="external" href="http://www.w3.org/TR/css3-fonts
>-fonts/#font-size-prop"><strong>CSS</strong> Fonts Module Level <>/#font-size-prop"><strong>CSS</strong> Fonts Module Level <strong
>strong>3</strong> #font-size-prop</a> Working Draft, October 4 20>>3</strong> #font-size-prop</a> Working Draft, October 4 2011
>11</nobr> 
n191      <nobr>Browser compatibility</nobr>n167      Browser compatibility
192    </h2>
193    <p>168    </h2>
169    <p>
194      <nobr>{{ CompatibilityTable() }}</nobr>170      {{ CompatibilityTable() }}
n289      <nobr>See also</nobr>n265      See also
290    </h2>
291    <p>266    </h2>
292      <nobr>{{ CSS_Reference:Fonts() }}</nobr>
293    </p>267    <p>
268      {{ CSS_Reference:Fonts() }}
294    <p>269    </p>
270    <p>
295      <nobr>{{ languages( { "es": "es/CSS/font-size", "fr": "fr/C271      {{ languages( { "es": "es/CSS/font-size", "fr": "fr/CSS/fon
>SS/font-size", "pl": "pl/CSS/font-size", "pt": "pt/CSS/font-size">t-size", "pl": "pl/CSS/font-size", "pt": "pt/CSS/font-size" } ) }
> } ) }}</nobr>>}
296    </p>
297    <h2>272    </p>
298      <nobr>Syntax</nobr>273    <h2>
274      Syntax
n301<nobr>font-size: xx-small | x-small | small | medium | large | x-n277font-size: xx-small | x-small | small | medium | large | x-large 
>large | xx-large>| xx-large
n303font-size: &lt;length&gt; | &lt;percentage&gt; | {{ Cssxref("inhen279font-size: &lt;length&gt; | &lt;percentage&gt; | {{ Cssxref("inhe
>rit") }}</nobr>>rit") }}
304</pre><nobr><br></nobr>280</pre><br>
n306      <nobr>Values</nobr>n282      Values
n310        <nobr><code>xx-small</code>, <code>x-small</code>, <code>n286        <code>xx-small</code>, <code>x-small</code>, <code>small<
>small</code>, <code>medium</code>, <code>large</code>, <code>x-la>/code>, <code>medium</code>, <code>large</code>, <code>x-large</c
>rge</code>, <code>xx-large</code></nobr>>ode>, <code>xx-large</code>
311      </dt>
312      <dd>
313        <nobr>A set of absolute size keywords based on the user's
> default font size (which is <code>medium</code>). Similar to pre 
>sentational HTML's <code>&lt;font size="1"&gt;</code> through <co 
>de>&lt;font size="7"&gt;</code> where the user's default font siz 
>e is <code>&lt;font size="3"&gt;</code>.</nobr> 
314      </dd>
315      <dt>287      </dt>
316        <nobr><code>larger</code>, <code>smaller</code></nobr>
317      </dt>288      <dd>
289        A set of absolute size keywords based on the user's defau
 >lt font size (which is <code>medium</code>). Similar to presentat
 >ional 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>.
318      <dd>290      </dd>
291      <dt>
292        <code>larger</code>, <code>smaller</code>
293      </dt>
294      <dd>
319        <nobr>Larger or smaller than the parent element's font si295        Larger or smaller than the parent element's font size, by
>ze, by roughly the ratio used to separate the absolute size keywo> roughly the ratio used to separate the absolute size keywords ab
>rds above.</nobr>>ove.
320      </dd>
321      <dt>
322        <nobr><em><a href="/en/CSS/length" title="en/CSS/length">
>length</a></em></nobr> 
323      </dt>
324      <dd>296      </dd>
297      <dt>
298        <em><a href="/en/CSS/length" title="en/CSS/length">length
 ></a></em>
299      </dt>
300      <dd>
325        <nobr>A positive <a href="/en/CSS/length" title="en/CSS/l301        A positive <a href="/en/CSS/length" title="en/CSS/length"
>ength">length</a>. When the units are specified in <code>em</code>>length</a>. When the units are specified in <code>em</code> or <
>> or <code>ex</code>,&nbsp; the size is defined relative to the s>code>ex</code>,&nbsp; the size is defined relative to the size of
>ize of the font on the parent element of the element in question.> the font on the parent element of the element in question. For e
> For example, 0.5em is half the font size of the parent of the cu>xample, 0.5em is half the font size of the parent of the current 
>rrent element.</nobr>>element.
326      </dd>
327      <dt>
328        <nobr><em>percentage</em></nobr>
329      </dt>
330      <dd>302      </dd>
303      <dt>
304        <em>percentage</em>
305      </dt>
306      <dd>
331        <nobr>A positive percentage of the parent element's font 307        A positive percentage of the parent element's font size.
>size.</nobr> 
n335      <nobr>It is best to avoid using values that are not relativn311      It is best to avoid using values that are not relative to t
>e to the user's default font size, such as lengths with units oth>he user's default font size, such as lengths with units other tha
>er than <code>em</code> or <code>ex</code>. However, if such valu>n <code>em</code> or <code>ex</code>. However, if such values mus
>es must be used, <code>px</code> are preferred over other units b>t be used, <code>px</code> are preferred over other units because
>ecause their meaning does not vary depending on what the operatin> their meaning does not vary depending on what the operating syst
>g system thinks (generally incorrectly) the resolution of the mon>em thinks (generally incorrectly) the resolution of the monitor i
>itor is.</nobr>>s.
336    </p>
337    <h2>312    </p>
338      <nobr>Possible approaches</nobr>
339    </h2>313    <h2>
314      Possible approaches
340    <p>315    </h2>
316    <p>
341      <nobr>There are several ways to specify the font size, with317      There are several ways to specify the font size, with keywo
> keywords or numerical values for pixels or ems. Choose the appro>rds or numerical values for pixels or ems. Choose the appropriate
>priate method based on the needs for the particular web page.</no> method based on the needs for the particular web page.
>br> 
n344      <nobr>Keywords</nobr>n320      Keywords
n347      <nobr>Keywords are a good way to set the size of fonts on tn323      Keywords are a good way to set the size of fonts on the web
>he web. By setting a keyword font size on the body element, you c>. By setting a keyword font size on the body element, you can set
>an set relative font-sizing everywhere else on the page, giving y> relative font-sizing everywhere else on the page, giving you the
>ou the ability to easily scale the font up or down on the entire > ability to easily scale the font up or down on the entire page a
>page accordingly.</nobr>>ccordingly.
n350      <nobr>Pixels</nobr>n326      Pixels
n353      <nobr>Setting the font size in pixel values (<code>px</coden329      Setting the font size in pixel values (<code>px</code>) is 
>>) is a good choice when you need pixel accuracy. A px value is s>a good choice when you need pixel accuracy. A px value is static.
>tatic. This is an OS-independent and cross-browser way of literal> This is an OS-independent and cross-browser way of literally tel
>ly telling the browsers to render the letters at exactly the numb>ling the browsers to render the letters at exactly the number of 
>er of pixels in height that you specified. The results may vary s>pixels in height that you specified. The results may vary slightl
>lightly across browsers, as they may use different algorithms to >y across browsers, as they may use different algorithms to achiev
>achieve a similar effect.</nobr>>e a similar effect.
354    </p>
355    <p>330    </p>
331    <p>
356      <nobr>Font sizing settings can also be used in combination.332      Font sizing settings can also be used in combination. For e
> For example, if a parent element is set to <code>16px</code> and>xample, if a parent element is set to <code>16px</code> and its c
> its child element is set to <code>larger</code>, the child eleme>hild element is set to <code>larger</code>, the child element dis
>nt displays larger than the parent element in the page.</nobr>>plays larger than the parent element in the page.
n359      <nobr><strong>Note:</strong>&nbsp;Defining font sizes in pin335      <strong>Note:</strong>&nbsp;Defining font sizes in pixel is
>xel is <em>not accessible</em>, because the user cannot change th> <em>not accessible</em>, because the user cannot change the font
>e font size from the browser. (For example, users with limited vi> size from the browser. (For example, users with limited vision m
>sion may wish to set the font size much larger than the size chos>ay wish to set the font size much larger than the size chosen by 
>en by a web designer.) Therefore, avoid using pixels for font siz>a web designer.) Therefore, avoid using pixels for font sizes if 
>es if you wish to create an inclusive design.</nobr>>you wish to create an inclusive design.
n362      <nobr>Ems</nobr>n338      Ems
n365      <nobr>Another way of setting the font size is with <code>emn341      Another way of setting the font size is with <code>em</code
></code> values. The size of an <code>em</code> value is dynamic. >> values. The size of an <code>em</code> value is dynamic. When d
>When defining the <code>font-size</code> property, an em is equal>efining the <code>font-size</code> property, an em is equal to th
> to the size of the font that applies to the parent of the elemen>e size of the font that applies to the parent of the element in q
>t in question. If you haven't set the font size anywhere on the p>uestion. If you haven't set the font size anywhere on the page, t
>age, then it is the browser default, which is probably 16px. So, >hen it is the browser default, which is probably 16px. So, by def
>by default 1em = 16px, and 2em = 32px. If you set a <code>font-si>ault 1em = 16px, and 2em = 32px. If you set a <code>font-size</co
>ze</code> of 20px on the body element, then 1em = 20px and 2em = >de> of 20px on the body element, then 1em = 20px and 2em = 40px. 
>40px. Note that the value 2 is essentially a multiplier of the cu>Note that the value 2 is essentially a multiplier of the current 
>rrent em size.</nobr>>em size.
366    </p>
367    <p>342    </p>
343    <p>
368      <nobr>In order to calculate the em equivalent for any pixel344      In order to calculate the em equivalent for any pixel value
> value required, you can use this formula:</nobr>> required, you can use this formula:
n371<nobr>em = desired element pixel value / parent element font-sizen347em = desired element pixel value / parent element font-size in pi
> in pixels</nobr>>xels
n373    <p>n
374      <nobr>For example, suppose the font-size of the body of the
> page is set to 1em, with the browser standard of 1em = 16px; if  
>the font-size you want is 12px, then you should specify 0.75em (b 
>ecause 12/16 = 0.75). Similarly, if you want a font size of 10px, 
> then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em  
>(22/16).</nobr> 
375    </p>349    <p>
350      For example, suppose the font-size of the body of the page 
 >is set to 1em, with the browser standard of 1em = 16px; if the fo
 >nt-size you want is 12px, then you should specify 0.75em (because
 > 12/16 = 0.75). Similarly, if you want a font size of 10px, then 
 >specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16
 >).
376    <p>351    </p>
352    <p>
377      <nobr>A popular technique to use throughout the document is353      A popular technique to use throughout the document is to se
> to set the the font-size of the body to 62.5% (that is 62.5% of >t the the font-size of the body to 62.5% (that is 62.5% of the de
>the default of 16px), which equates to 10px, or 0.625em. Now you >fault of 16px), which equates to 10px, or 0.625em. Now you can se
>can set the font-size for any elements using em units, with an ea>t the font-size for any elements using em units, with an easy-to-
>sy-to-remember conversion, by dividing the px value by 10. This w>remember conversion, by dividing the px value by 10. This way 6px
>ay 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1> = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. 
>.6em. For example:</nobr>>For example:
n380<nobr>body {n356body {
n385}</nobr>n361}
n388      <nobr>&nbsp;The em is a very useful unit in CSS, since it cn364      &nbsp;The em is a very useful unit in CSS, since it can ada
>an adapt automatically to the font that the reader chooses to use>pt automatically to the font that the reader chooses to use.
>.</nobr> 
389    </p>
390    <h2>365    </p>
391      <nobr>Examples</nobr>
392    </h2>366    <h2>
367      Examples
393    <p>368    </h2>
369    <p>
394      <nobr>{{ CSSRefExampleLink("font-size") }}</nobr>370      {{ CSSRefExampleLink("font-size") }}
n397<nobr>/* Set paragraph text to be very large. */n373/* Set paragraph text to be very large. */
n406</nobr>n
n408    <h2>n
409      <nobr>Notes</nobr>
410    </h2>383    <h2>
384      Notes
411    <p>385    </h2>
386    <p>
412      <nobr><code>em</code> and <code>ex</code> units on the {{ C387      <code>em</code> and <code>ex</code> units on the {{ Cssxref
>ssxref("font-size") }} property are relative to the parent elemen>("font-size") }} property are relative to the parent element's fo
>t's font size (unlike all other properties, where they're relativ>nt size (unlike all other properties, where they're relative to t
>e to the font size on the element). This means <code>em</code> un>he font size on the element). This means <code>em</code> units an
>its and percentages do the same thing for {{ Cssxref("font-size")>d percentages do the same thing for {{ Cssxref("font-size") }}.
> }}.</nobr> 
413    </p>
414    <h2>388    </p>
389    <h2>
415      <nobr>Specifications</nobr>390      Specifications
n419        <nobr><a class="external" href="http://www.w3.org/TR/CSS2n394        <a class="external" href="http://www.w3.org/TR/CSS21/font
>1/fonts.html#font-size-props" title="http://www.w3.org/TR/CSS21/f>s.html#font-size-props" title="http://www.w3.org/TR/CSS21/fonts.h
>onts.html#font-size-props"><strong>CSS</strong> Level <strong>2.1>tml#font-size-props"><strong>CSS</strong> Level <strong>2.1</stro
></strong> Fonts #font-size-props</a> Recommendation, June 7 2011<>ng> Fonts #font-size-props</a> Recommendation, June 7 2011
>/nobr> 
420      </li>
421      <li>395      </li>
396      <li>
422        <nobr><a class="external" href="http://www.w3.org/TR/css3397        <a class="external" href="http://www.w3.org/TR/css3-fonts
>-fonts/#font-size-prop"><strong>CSS</strong> Fonts Module Level <>/#font-size-prop"><strong>CSS</strong> Fonts Module Level <strong
>strong>3</strong> #font-size-prop</a> Working Draft, October 4 20>>3</strong> #font-size-prop</a> Working Draft, October 4 2011
>11</nobr> 
n426      <nobr>Browser compatibility</nobr>n401      Browser compatibility
427    </h2>
428    <p>402    </h2>
403    <p>
429      <nobr>{{ CompatibilityTable() }}</nobr>404      {{ CompatibilityTable() }}
t524      <nobr>See also</nobr>t499      See also
525    </h2>
526    <p>500    </h2>
527      <nobr>{{ CSS_Reference:Fonts() }}</nobr>
528    </p>501    <p>
502      {{ CSS_Reference:Fonts() }}
529    <p>503    </p>
504    <p>
530      <nobr>{{ languages( { "es": "es/CSS/font-size", "fr": "fr/C505      {{ languages( { "es": "es/CSS/font-size", "fr": "fr/CSS/fon
>SS/font-size", "pl": "pl/CSS/font-size", "pt": "pt/CSS/font-size">t-size", "pl": "pl/CSS/font-size", "pt": "pt/CSS/font-size" } ) }
> } ) }}</nobr>>}

Back to History