MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Compare Revisions

font-size

Change Revisions

Revision 19446:

Revision 19446 by jswisher on

Revision 19447:

Revision 19447 by jswisher on

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

Revision 19446
Revision 19447
n37</pre>n37</pre><br>
38    <h2>
39      Values
38    <h2>40    </h2>
39      Value types41    <dl>
42      <dt>
43        <code>xx-small</code>, <code>x-small</code>, <code>small<
 >/code>, <code>medium</code>, <code>large</code>, <code>x-large</c
 >ode>, <code>xx-large</code>&nbsp;
44      </dt>
45      <dd>
46        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>.
47      </dd>
48      <dt>
49        <code>larger</code>, <code>smaller</code>&nbsp;
50      </dt>
51      <dd>
52        Larger or smaller than the parent element's font size, by
 > roughly the ratio used to separate the absolute size keywords ab
 >ove.
53      </dd>
54      <dt>
55        <em><a href="/en/CSS/length" title="en/CSS/length">length
 ></a></em>
56      </dt>
57      <dd>
58        A positive <a href="/en/CSS/length" title="en/CSS/length"
 >>length</a>. When the units are specified in <code>em</code> or <
 >code>ex</code>,&nbsp; the size is defined relative to the size of
 > the font on the parent element of the element in question. For e
 >xample, 0.5em is half the font size of the parent of the current 
 >element.
59      </dd>
60      <dt>
61        <em>percentage</em>
62      </dt>
63      <dd>
64        A positive percentage of the parent element's font size.
65      </dd>
66    </dl>
67    <p>
68      It is best to avoid using values that are not relative to t
 >he user's default font size, such as lengths with units other tha
 >n <code>em</code> or <code>ex</code>. However, if such values mus
 >t be used, <code>px</code> are preferred over other units because
 > their meaning does not vary depending on what the operating syst
 >em thinks (generally incorrectly) the resolution of the monitor i
 >s.
69    </p>
70    <h2>
71      Possible approaches
n54      Setting the font size in pixel values (<code>px</code>) is n86      Setting the font size in pixel values (<code>px</code>) is 
>a good choice when you need pixel accuracy. A px value is static.>a good choice when you need pixel accuracy. A px value is static.
> This is an OS-independent and cross-browser way of literally tel> This is an OS-independent and cross-browser way of literally tel
>ling the browsers to render the letters at exactly the number of >ling the browsers to render the letters at exactly the number of 
>pixels in height as you specified. The results may vary slightly >pixels in height that you specified. The results may vary slightl
>across browsers, as they may use different algorithms to achieve >y across browsers, as they may use different algorithms to achiev
>a similar effect.>e a similar effect.
55    </p>
56    <p>87    </p>
57      Font sizing settings can also be used in combination. For e
>xample, if a parent element is set to 16px and its child element  
>is set to "larger", the child element displays larger than the pa 
>rent element in the page. 
58    </p>88    <p>
89      Font sizing settings can also be used in combination. For e
 >xample, if a parent element is set to <code>16px</code> and its c
 >hild element is set to <code>larger</code>, the child element dis
 >plays larger than the parent element in the page.
90    </p>
91    <div class="note">
92      <strong>Note:</strong>&nbsp;Defining font sizes in pixel is
 > <em>not accessible</em>, because the user cannot change the font
 > size from the browser. (For example, users with limited vision m
 >ay wish to set the font size much larger than the size chosen by 
 >a web designer.) Therefore, avoid using pixels for font sizes if 
 >you wish to create an inclusive design.
93    </div>
n63      Another way of setting the font size is with <code>em</coden98      Another way of setting the font size is with <code>em</code
>> values. An em value is dynamic. The definition of the em size i>> values. The size of an <code>em</code> value is dynamic. When d
>s quite abstract, but simple to use: 1em is equal to the current >efining the <code>font-size</code> property, an em is equal to th
>font-size of the element in question. If you haven't set the font>e size of the font that applies to the parent of the element in q
> size anywhere on the page, then it is the browser default, which>uestion. If you haven't set the font size anywhere on the page, t
> is probably 16px. So, by default 1em = 16px, and 2em = 32px. If >hen it is the browser default, which is probably 16px. So, by def
>you then set a font-size of 20px on the body element, then 1em = >ault 1em = 16px, and 2em = 32px. If you set a <code>font-size</co
>20px and 2em = 40px. Note that "2" is essentially a multiplier of>de> of 20px on the body element, then 1em = 20px and 2em = 40px. 
> the current em value.>Note that the value 2 is essentially a multiplier of the current 
 >em size.
n68    <p>n103    <pre>
69      em = required element pixel value ? parent font size in pix104em = desired element pixel value / parent element font-size in pi
>els>xels
105</pre>
70    </p>106    <p>
107      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
 >).
71    <p>108    </p>
72      For example, if the body of the page is set to 1em, with br
>owser standard of 1em = 16px, and the font-size you would want is 
> 12px that would be 0.75em. Accordingly, 10px required value conv 
>erts to 0.625em, and 22px converts to 1.375em. 
73    </p>109    <p>
110      A popular technique to use throughout the document is to se
 >t the the font-size of the body to 62.5% (that is 62.5% of the de
 >fault of 16px), which equates to 10px, or 0.625em. Now you can se
 >t the font-size for any elements using em units, with an easy-to-
 >remember conversion, by dividing the px value by 10. This way 6px
 > = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. 
 >For example:
74    <p>111    </p>
75      A popular technique to use throughout the document is to se112    <pre class="deki-transform">
>t the the font-size of the body to 62.5% (that is 62.5% of the de 
>fault of 16px), which equates to 10px, or 0.625EMs. Now you can s 
>et 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: 
76    </p>113body {
77    <p>
78      body {<br>
79      &nbsp; font-size: 62.5%; /* font-size 1em = 10px */<br>114  font-size: 62.5%; /* font-size 1em = 10px */
80      }<br>115}
81      p {<br>116p {
82      &nbsp; font-size: 1.6em; /* 1.6em = 16px */<br>117  font-size: 1.6em; /* 1.6em = 16px */
83      }118}
84    </p>119</pre>
n88    <p>n123    <h2>
89      Values
90    </p>
91    <dl>
92      <dt>
93        <code>xx-small</code>, <code>x-small</code>, <code>small<
>/code>, <code>medium</code>, <code>large</code>, <code>x-large</c 
>ode>, <code>xx-large</code>&nbsp; 
94      </dt>
95      <dd>
96        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>. 
97      </dd>
98      <dt>
99        <code>larger</code>, <code>smaller</code>&nbsp;
100      </dt>
101      <dd>
102        Larger or smaller than the parent element's font size, by
> roughly the ratio used to separate the absolute size keywords ab 
>ove. 
103      </dd>
104      <dt>
105        <em><a href="/en/CSS/length" title="en/CSS/length">length
></a></em> 
106      </dt>
107      <dd>
108        A positive <a href="/en/CSS/length" title="en/CSS/length"
>>length</a>. 
109      </dd>
110      <dt>
111        <em>percentage</em>
112      </dt>
113      <dd>
114        A positive percentage of the parent element's font size.
115      </dd>
116    </dl>
117    <p>
118      It is best to avoid using values that are not relative to t
>he user's default font size, such as lengths with units other tha 
>n <code>em</code> or <code>ex</code>. However, if such values mus 
>t be used, <code>px</code> are preferred over other units because 
> their meaning does not vary depending on what the operating syst 
>em thinks (generally incorrectly) the resolution of the monitor i 
>s. 
119    </p>
120    <p>
121      &nbsp;
122    </p>
123    <h3 name="Examples">
n125    </h3>n125    </h2>
n140    <h3 name="Notes">n140    <h2>
n142    </h3>n142    </h2>
n146    <h3 name="Specifications">n146    <h2>
n148    </h3>n148    </h2>
n157    <h3 name="Browser_Compatibility">n157    <h2>
n159    </h3>n159    </h2>
n255    <h3 name="See_also">n255    <h2>
t257    </h3>t257    </h2>

Back to History