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 19445:

Revision 19445 by Sheppy on

Revision 19446:

Revision 19446 by jswisher on

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

Revision 19445
Revision 19446
n10    <h3 name="Summary">n10    <h2>
n12    </h3>n12    </h2>
n14      The font-size property specifies the size of the font. The n14      The font-size property specifies the size of the font. The 
>font size may, in turn, change the size of other things, since it>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</co>is used to compute the value of <code>em</code> and <code>ex</cod
>de> length units.>e> length units.
n30    <h3 name="Syntax">n30    <h2>
n32    </h3>n32    </h2>
n38    <h3 name="Values">n38    <h2>
39      Value types
40    </h2>
41    <p>
42      There are several ways to specify the font size, with keywo
 >rds or numerical values for pixels or ems. Choose the appropriate
 > method based on the needs for the particular web page.
43    </p>
44    <h3>
45      Keywords
46    </h3>
47    <p>
48      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 a
 >ccordingly.
49    </p>
50    <h3>
51      Pixels
52    </h3>
53    <p>
54      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 tel
 >ling 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.
55    </p>
56    <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>
59    <h3>
60      Ems
61    </h3>
62    <p>
63      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
 >s 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.
64    </p>
65    <p>
66      In order to calculate the em equivalent for any pixel value
 > required, you can use this formula:
67    </p>
68    <p>
69      em = required element pixel value ? parent font size in pix
 >els
70    </p>
71    <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>
74    <p>
75      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.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>
77    <p>
78      body {<br>
79      &nbsp; font-size: 62.5%; /* font-size 1em = 10px */<br>
80      }<br>
81      p {<br>
82      &nbsp; font-size: 1.6em; /* 1.6em = 16px */<br>
83      }
84    </p>
85    <p>
86      &nbsp;The em is a very useful unit in CSS, since it can ada
 >pt automatically to the font that the reader chooses to use.
87    </p>
88    <p>
n40    </h3>n90    </p>
n43        xx-small, x-small, small, medium, large, x-large, xx-largn93        <code>xx-small</code>, <code>x-small</code>, <code>small<
>e&nbsp;>/code>, <code>medium</code>, <code>large</code>, <code>x-large</c
 >ode>, <code>xx-large</code>&nbsp;
n49        larger, smaller&nbsp;n99        <code>larger</code>, <code>smaller</code>&nbsp;
n55        <a href="/en/CSS/length" title="en/CSS/length">&lt;lengthn105        <em><a href="/en/CSS/length" title="en/CSS/length">length
>&gt;</a>&nbsp;></a></em>
n61        &lt;percentage&gt;&nbsp;n111        <em>percentage</em>
t68      It is best to avoid using values that are not relative to tt118      It is best to avoid using values that are not relative to t
>he user's default font size, such as &lt;lengths&gt; with units o>he user's default font size, such as lengths with units other tha
>ther than <code>em</code> or <code>ex</code>. However, if such va>n <code>em</code> or <code>ex</code>. However, if such values mus
>lues must be used, <code>px</code> are preferred over other units>t be used, <code>px</code> are preferred over other units because
> because their meaning does not vary depending on what the operat> their meaning does not vary depending on what the operating syst
>ing system thinks (generally incorrectly) the resolution of the m>em thinks (generally incorrectly) the resolution of the monitor i
>onitor is.>s.
119    </p>
120    <p>
121      &nbsp;

Back to History