Compare Revisions

font-size

Change Revisions

Revision 19456:

Revision 19456 by teoli on

Revision 19457:

Revision 19457 by teoli on

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

Revision 19456
Revision 19457
nn24 
n43        <nobr><dfn>&gt;Applies to:</dfn> all elements</nobr>n44        <nobr><dfn>Applies to:</dfn> all elements</nobr>
n59      Syntaxn60      <nobr>Syntax</nobr>
n62font-size: xx-small | x-small | small | medium | large | x-large n63<nobr>font-size: xx-small | x-small | small | medium | large | x-
>| xx-large>large | xx-large
n64font-size: &lt;length&gt; | &lt;percentage&gt; | {{ Cssxref("inhen65font-size: &lt;length&gt; | &lt;percentage&gt; | {{ Cssxref("inhe
>rit") }}>rit") }}</nobr>
65</pre><br>66</pre><nobr><br></nobr>
n67      Valuesn68      <nobr>Values</nobr>
n71        <code>xx-small</code>, <code>x-small</code>, <code>small<n72        <nobr><code>xx-small</code>, <code>x-small</code>, <code>
>/code>, <code>medium</code>, <code>large</code>, <code>x-large</c>small</code>, <code>medium</code>, <code>large</code>, <code>x-la
>ode>, <code>xx-large</code>>rge</code>, <code>xx-large</code></nobr>
72      </dt>
73      <dd>73      </dt>
74      <dd>
74        A set of absolute size keywords based on the user's defau75        <nobr>A set of absolute size keywords based on the user's
>lt font size (which is <code>medium</code>). Similar to presentat> default font size (which is <code>medium</code>). Similar to pre
>ional HTML's <code>&lt;font size="1"&gt;</code> through <code>&lt>sentational HTML's <code>&lt;font size="1"&gt;</code> through <co
>;font size="7"&gt;</code> where the user's default font size is <>de>&lt;font size="7"&gt;</code> where the user's default font siz
>code>&lt;font size="3"&gt;</code>.>e is <code>&lt;font size="3"&gt;</code>.</nobr>
75      </dd>
76      <dt>
77        <code>larger</code>, <code>smaller</code>
78      </dt>
79      <dd>76      </dd>
77      <dt>
78        <nobr><code>larger</code>, <code>smaller</code></nobr>
79      </dt>
80      <dd>
80        Larger or smaller than the parent element's font size, by81        <nobr>Larger or smaller than the parent element's font si
> roughly the ratio used to separate the absolute size keywords ab>ze, by roughly the ratio used to separate the absolute size keywo
>ove.>rds above.</nobr>
81      </dd>
82      <dt>
83        <em><a href="/en/CSS/length" title="en/CSS/length">length
></a></em> 
84      </dt>
85      <dd>82      </dd>
83      <dt>
84        <nobr><em><a href="/en/CSS/length" title="en/CSS/length">
 >length</a></em></nobr>
85      </dt>
86      <dd>
86        A positive <a href="/en/CSS/length" title="en/CSS/length"87        <nobr>A positive <a href="/en/CSS/length" title="en/CSS/l
>>length</a>. When the units are specified in <code>em</code> or <>ength">length</a>. When the units are specified in <code>em</code
>code>ex</code>,&nbsp; the size is defined relative to the size of>> or <code>ex</code>,&nbsp; the size is defined relative to the s
> the font on the parent element of the element in question. For e>ize of the font on the parent element of the element in question.
>xample, 0.5em is half the font size of the parent of the current > For example, 0.5em is half the font size of the parent of the cu
>element.>rrent element.</nobr>
87      </dd>
88      <dt>
89        <em>percentage</em>
90      </dt>
91      <dd>88      </dd>
89      <dt>
90        <nobr><em>percentage</em></nobr>
91      </dt>
92      <dd>
92        A positive percentage of the parent element's font size.93        <nobr>A positive percentage of the parent element's font 
 >size.</nobr>
n96      It is best to avoid using values that are not relative to tn97      <nobr>It is best to avoid using values that are not relativ
>he user's default font size, such as lengths with units other tha>e to the user's default font size, such as lengths with units oth
>n <code>em</code> or <code>ex</code>. However, if such values mus>er than <code>em</code> or <code>ex</code>. However, if such valu
>t be used, <code>px</code> are preferred over other units because>es must be used, <code>px</code> are preferred over other units b
> their meaning does not vary depending on what the operating syst>ecause their meaning does not vary depending on what the operatin
>em thinks (generally incorrectly) the resolution of the monitor i>g system thinks (generally incorrectly) the resolution of the mon
>s.>itor is.</nobr>
97    </p>
98    <h2>98    </p>
99      Possible approaches
100    </h2>99    <h2>
100      <nobr>Possible approaches</nobr>
101    <p>101    </h2>
102    <p>
102      There are several ways to specify the font size, with keywo103      <nobr>There are several ways to specify the font size, with
>rds or numerical values for pixels or ems. Choose the appropriate> keywords or numerical values for pixels or ems. Choose the appro
> method based on the needs for the particular web page.>priate method based on the needs for the particular web page.</no
 >br>
n105      Keywordsn106      <nobr>Keywords</nobr>
n108      Keywords are a good way to set the size of fonts on the webn109      <nobr>Keywords are a good way to set the size of fonts on t
>. By setting a keyword font size on the body element, you can set>he web. By setting a keyword font size on the body element, you c
> relative font-sizing everywhere else on the page, giving you the>an set relative font-sizing everywhere else on the page, giving y
> ability to easily scale the font up or down on the entire page a>ou the ability to easily scale the font up or down on the entire 
>ccordingly.>page accordingly.</nobr>
n111      Pixelsn112      <nobr>Pixels</nobr>
n114      Setting the font size in pixel values (<code>px</code>) is n115      <nobr>Setting the font size in pixel values (<code>px</code
>a good choice when you need pixel accuracy. A px value is static.>>) is a good choice when you need pixel accuracy. A px value is s
> This is an OS-independent and cross-browser way of literally tel>tatic. This is an OS-independent and cross-browser way of literal
>ling the browsers to render the letters at exactly the number of >ly telling the browsers to render the letters at exactly the numb
>pixels in height that you specified. The results may vary slightl>er of pixels in height that you specified. The results may vary s
>y across browsers, as they may use different algorithms to achiev>lightly across browsers, as they may use different algorithms to 
>e a similar effect.>achieve a similar effect.</nobr>
115    </p>
116    <p>116    </p>
117    <p>
117      Font sizing settings can also be used in combination. For e118      <nobr>Font sizing settings can also be used in combination.
>xample, if a parent element is set to <code>16px</code> and its c> For example, if a parent element is set to <code>16px</code> and
>hild element is set to <code>larger</code>, the child element dis> its child element is set to <code>larger</code>, the child eleme
>plays larger than the parent element in the page.>nt displays larger than the parent element in the page.</nobr>
n120      <strong>Note:</strong>&nbsp;Defining font sizes in pixel isn121      <nobr><strong>Note:</strong>&nbsp;Defining font sizes in pi
> <em>not accessible</em>, because the user cannot change the font>xel is <em>not accessible</em>, because the user cannot change th
> size from the browser. (For example, users with limited vision m>e font size from the browser. (For example, users with limited vi
>ay wish to set the font size much larger than the size chosen by >sion may wish to set the font size much larger than the size chos
>a web designer.) Therefore, avoid using pixels for font sizes if >en by a web designer.) Therefore, avoid using pixels for font siz
>you wish to create an inclusive design.>es if you wish to create an inclusive design.</nobr>
n123      Emsn124      <nobr>Ems</nobr>
n126      Another way of setting the font size is with <code>em</coden127      <nobr>Another way of setting the font size is with <code>em
>> values. The size of an <code>em</code> value is dynamic. When d></code> values. The size of an <code>em</code> value is dynamic. 
>efining the <code>font-size</code> property, an em is equal to th>When defining the <code>font-size</code> property, an em is equal
>e size of the font that applies to the parent of the element in q> to the size of the font that applies to the parent of the elemen
>uestion. If you haven't set the font size anywhere on the page, t>t in question. If you haven't set the font size anywhere on the p
>hen it is the browser default, which is probably 16px. So, by def>age, then it is the browser default, which is probably 16px. So, 
>ault 1em = 16px, and 2em = 32px. If you set a <code>font-size</co>by default 1em = 16px, and 2em = 32px. If you set a <code>font-si
>de> of 20px on the body element, then 1em = 20px and 2em = 40px. >ze</code> of 20px on the body element, then 1em = 20px and 2em = 
>Note that the value 2 is essentially a multiplier of the current >40px. Note that the value 2 is essentially a multiplier of the cu
>em size.>rrent em size.</nobr>
127    </p>
128    <p>128    </p>
129    <p>
129      In order to calculate the em equivalent for any pixel value130      <nobr>In order to calculate the em equivalent for any pixel
> required, you can use this formula:> value required, you can use this formula:</nobr>
n132em = desired element pixel value / parent element font-size in pin133<nobr>em = desired element pixel value / parent element font-size
>xels> in pixels</nobr>
n135      For example, suppose the font-size of the body of the page n136      <nobr>For example, suppose the font-size of the body of the
>is set to 1em, with the browser standard of 1em = 16px; if the fo> page is set to 1em, with the browser standard of 1em = 16px; if 
>nt-size you want is 12px, then you should specify 0.75em (because>the font-size you want is 12px, then you should specify 0.75em (b
> 12/16 = 0.75). Similarly, if you want a font size of 10px, then >ecause 12/16 = 0.75). Similarly, if you want a font size of 10px,
>specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16> then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em 
>).>(22/16).</nobr>
136    </p>
137    <p>137    </p>
138    <p>
138      A popular technique to use throughout the document is to se139      <nobr>A popular technique to use throughout the document is
>t the the font-size of the body to 62.5% (that is 62.5% of the de> to set the the font-size of the body to 62.5% (that is 62.5% of 
>fault of 16px), which equates to 10px, or 0.625em. Now you can se>the default of 16px), which equates to 10px, or 0.625em. Now you 
>t the font-size for any elements using em units, with an easy-to->can set the font-size for any elements using em units, with an ea
>remember conversion, by dividing the px value by 10. This way 6px>sy-to-remember conversion, by dividing the px value by 10. This w
> = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. >ay 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1
>For example:>.6em. For example:</nobr>
n141body {n142<nobr>body {
n146}n147}</nobr>
n149      &nbsp;The em is a very useful unit in CSS, since it can adan150      <nobr>&nbsp;The em is a very useful unit in CSS, since it c
>pt automatically to the font that the reader chooses to use.>an adapt automatically to the font that the reader chooses to use
 >.</nobr>
150    </p>
151    <h2>151    </p>
152      Examples
153    </h2>152    <h2>
153      <nobr>Examples</nobr>
154    <p>154    </h2>
155    <p>
155      {{ CSSRefExampleLink("font-size") }}156      <nobr>{{ CSSRefExampleLink("font-size") }}</nobr>
n158/* Set paragraph text to be very large. */n159<nobr>/* Set paragraph text to be very large. */
nn168</nobr>
n169      Notesn171      <nobr>Notes</nobr>
170    </h2>
171    <p>172    </h2>
173    <p>
172      <code>em</code> and <code>ex</code> units on the {{ Cssxref174      <nobr><code>em</code> and <code>ex</code> units on the {{ C
>("font-size") }} property are relative to the parent element's fo>ssxref("font-size") }} property are relative to the parent elemen
>nt size (unlike all other properties, where they're relative to t>t's font size (unlike all other properties, where they're relativ
>he font size on the element). This means <code>em</code> units an>e to the font size on the element). This means <code>em</code> un
>d percentages do the same thing for {{ Cssxref("font-size") }}.>its and percentages do the same thing for {{ Cssxref("font-size")
 > }}.</nobr>
173    </p>
174    <h2>175    </p>
176    <h2>
175      Specifications177      <nobr>Specifications</nobr>
n179        <a class="external" href="http://www.w3.org/TR/CSS21/fontn181        <nobr><a class="external" href="http://www.w3.org/TR/CSS2
>s.html#propdef-font-size">CSS 2.1</a>>1/fonts.html#propdef-font-size">CSS 2.1</a></nobr>
180      </li>
181      <li>182      </li>
183      <li>
182        <a class="external" href="http://www.w3.org/TR/css3-fonts184        <nobr><a class="external" href="http://www.w3.org/TR/css3
>/#font-size-prop">CSS3 Fonts</a>>-fonts/#font-size-prop">CSS3 Fonts</a></nobr>
n186      Browser compatibilityn188      <nobr>Browser compatibility</nobr>
187    </h2>
188    <p>189    </h2>
190    <p>
189      {{ CompatibilityTable() }}191      <nobr>{{ CompatibilityTable() }}</nobr>
t284      See alsot286      <nobr>See also</nobr>
285    </h2>
286    <p>287    </h2>
287      {{ CSS_Reference:Fonts() }}
288    </p>288    <p>
289      <nobr>{{ CSS_Reference:Fonts() }}</nobr>
289    <p>290    </p>
291    <p>
290      {{ languages( { "es": "es/CSS/font-size", "fr": "fr/CSS/fon292      <nobr>{{ languages( { "es": "es/CSS/font-size", "fr": "fr/C
>t-size", "pl": "pl/CSS/font-size" } ) }}>SS/font-size", "pl": "pl/CSS/font-size" } ) }}</nobr>

Back to History