Compare Revisions

font-size

Revision 233518:

Revision 233518 by Sheppy on

Revision 233526:

Revision 233526 by Mezzanine on

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

Revision 233518
Revision 233526
n4 n
5    <style type="text/css">
6![CDATA[.cssprop {
7    display:table;
8    padding: 0.4em;
9    border-left:0.15em solid;
10    background-color:#eeeeff
11    }
12    .cssprop li {
13    display:table-row;
14    padding: 3px;
15    margin:0;
16    }
17    .cssprop li dfn {
18    display:table-cell;
19    padding: 0 5px;
20    border-bottom: none;
21    cursor:inherit;
22    }
23 
24 
25 
26    ]]>
27    </style>
nn10    <p>
11      {{ CSSRef() }}
12    </p>
n39    </p>n18    </p><nobr>&lt;style type="text/css"&gt;<!--[CDATA[.cssprop {
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>
tt60    <h2>
61      <nobr>Syntax</nobr>
62    </h2>
63    <pre class="eval">
64<nobr>font-size: xx-small | x-small | small |
65font-size: smaller |
66font-size: &lt;length&gt; | &lt;percentage&gt; | {{ Cssxref("inhe
 >rit") }}
67</nobr>
68</pre>
69    <h2>
70      <nobr>Values</nobr>
71    </h2>
72    <dl>
73      <dt>
74        <nobr><code>xx-small</code>, <code>x-small</code>, <code>
 >small</code>, <code>medium</code>, <code>large</code>, <code>x-la
 >rge</code>, <code>xx-large</code></nobr>
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>
80        <nobr><code>larger</code>, <code>smaller</code></nobr>
81      </dt>
82      <dd>
83        <nobr>Larger or smaller than the parent element's font si
 >ze, by roughly the ratio used to separate the absolute size keywo
 >rds above.</nobr>
84      </dd>
85      <dt>
86        <nobr><em><a href="/en/CSS/length" title="en/CSS/length">
 >length</a></em></nobr>
87      </dt>
88      <dd>
89        <nobr>A positive <a href="/en/CSS/length" title="en/CSS/l
 >ength">length</a>. When the units are specified in <code>em</code
 >> or <code>ex</code>,&nbsp; the size is defined relative to the s
 >ize of the font on the parent element of the element in question.
 > For example, 0.5em is half the font size of the parent of the cu
 >rrent element.</nobr>
90      </dd>
91      <dt>
92        <nobr><em>percentage</em></nobr>
93      </dt>
94      <dd>
95        <nobr>A positive percentage of the parent element's font 
 >size.</nobr>
96      </dd>
97    </dl>
98    <p>
99      <nobr>It is best to avoid using values that are not relativ
 >e to the user's default font size, such as lengths with units oth
 >er than <code>em</code> or <code>ex</code>. However, if such valu
 >es must be used, <code>px</code> are preferred over other units b
 >ecause their meaning does not vary depending on what the operatin
 >g system thinks (generally incorrectly) the resolution of the mon
 >itor is.</nobr>
100    </p>
101    <h2>
102      <nobr>Possible approaches</nobr>
103    </h2>
104    <p>
105      <nobr>There are several ways to specify the font size, with
 > keywords or numerical values for pixels or ems. Choose the appro
 >priate method based on the needs for the particular web page.</no
 >br>
106    </p>
107    <h3>
108      <nobr>Keywords</nobr>
109    </h3>
110    <p>
111      <nobr>Keywords are a good way to set the size of fonts on t
 >he web. By setting a keyword font size on the body element, you c
 >an set relative font-sizing everywhere else on the page, giving y
 >ou the ability to easily scale the font up or down on the entire 
 >page accordingly.</nobr>
112    </p>
113    <h3>
114      <nobr>Pixels</nobr>
115    </h3>
116    <p>
117      <nobr>Setting the font size in pixel values (<code>px</code
 >>) is a good choice when you need pixel accuracy. A px value is s
 >tatic. This is an OS-independent and cross-browser way of literal
 >ly telling the browsers to render the letters at exactly the numb
 >er of pixels in height that you specified. The results may vary s
 >lightly across browsers, as they may use different algorithms to 
 >achieve a similar effect.</nobr>
118    </p>
119    <p>
120      <nobr>Font sizing settings can also be used in combination.
 > For example, if a parent element is set to <code>16px</code> and
 > its child element is set to <code>larger</code>, the child eleme
 >nt displays larger than the parent element in the page.</nobr>
121    </p>
122    <div class="note">
123      <nobr><strong>Note:</strong>&nbsp;Defining font sizes in pi
 >xel is <em>not accessible</em>, because the user cannot change th
 >e font size from the browser. (For example, users with limited vi
 >sion may wish to set the font size much larger than the size chos
 >en by a web designer.) Therefore, avoid using pixels for font siz
 >es if you wish to create an inclusive design.</nobr>
124    </div>
125    <h3>
126      <nobr>Ems</nobr>
127    </h3>
128    <p>
129      <nobr>Another way of setting the font size is with <code>em
 ></code> values. The size of an <code>em</code> value is dynamic. 
 >When defining the <code>font-size</code> property, an em is equal
 > to the size of the font that applies to the parent of the elemen
 >t in question. If you haven't set the font size anywhere on the p
 >age, then it is the browser default, which is probably 16px. So, 
 >by default 1em = 16px, and 2em = 32px. If you set a <code>font-si
 >ze</code> of 20px on the body element, then 1em = 20px and 2em = 
 >40px. Note that the value 2 is essentially a multiplier of the cu
 >rrent em size.</nobr>
130    </p>
131    <p>
132      <nobr>In order to calculate the em equivalent for any pixel
 > value required, you can use this formula:</nobr>
133    </p>
134    <pre>
135<nobr>em = desired element pixel value / parent element font-size
 > in pixels</nobr>
136</pre>
137    <p>
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>
140    <p>
141      <nobr>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.625em. Now you 
 >can set the font-size for any elements using em units, with an ea
 >sy-to-remember conversion, by dividing the px value by 10. This w
 >ay 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1
 >.6em. For example:</nobr>
142    </p>
143    <pre class="deki-transform">
144<nobr>body {
145  font-size: 62.5%;ze 1em = 10px */
146}
147p {
148  font-size: 1.6em; /* 1.6em = 16px */
149}
150</nobr>
151</pre>
152    <p>
153      <nobr>&nbsp;The em is a very useful unit in CSS, since it c
 >an adapt automatically to the font that the reader chooses to use
 >.</nobr>
154    </p>
155    <h2>
156      <nobr>Examples</nobr>
157    </h2>
158    <p>
159      <nobr>{{ CSSRefExampleLink("font-size") }}</nobr>
160    </p>
161    <pre class="brush: css">
162<nobr>/* Set paragraph text to be very large. */
163p { font-size: xx-large }
164 
165/* Set h1 (level 1 heading) text to be 2.5 times the size
166 * of the text around it. */
167h1 { font-size: 250% }
168 
169/* Sets text enclosed within span tag to be 16px */
170span { font-size: 15px; }
171</nobr>
172</pre>
173    <h2>
174      <nobr>Notes</nobr>
175    </h2>
176    <p>
177      <nobr><code>em</code> and <code>ex</code> units on the {{ C
 >ssxref("font-size") }} property are relative to the parent elemen
 >t's font size (unlike all other properties, where they're relativ
 >e to the font size on the element). This means <code>em</code> un
 >its and percentages do the same thing for {{ Cssxref("font-size")
 > }}.</nobr>
178    </p>
179    <h2>
180      <nobr>Specifications</nobr>
181    </h2>
182    <ul>
183      <li>
184        <nobr><a class="external" href="http://www.w3.org/TR/CSS2
 >1/fonts.html#font-size-props" title="http://www.w3.org/TR/CSS21/f
 >onts.html#font-size-props"><strong>CSS</strong> Level <strong>2.1
 ></strong> Fonts #font-size-props</a> Recommendation, June 7 2011<
 >/nobr>
185      </li>
186      <li>
187        <nobr><a class="external" href="http://www.w3.org/TR/css3
 >-fonts/#font-size-prop"><strong>CSS</strong> Fonts Module Level <
 >strong>3</strong> #font-size-prop</a> Working Draft, October 4 20
 >11</nobr>
188      </li>
189    </ul>
190    <h2>
191      <nobr>Browser compatibility</nobr>
192    </h2>
193    <p>
194      <nobr>{{ CompatibilityTable() }}</nobr>
195    </p>
196    <div id="compat-desktop">
197      <table class="compat-table">
198        <tbody>
199          <tr>
200            <th>
201              Feature
202            </th>
203            <th>
204              Chrome
205            </th>
206            <th>
207              Firefox (Gecko)
208            </th>
209            <th>
210              Internet Explorer
211            </th>
212            <th>
213              Opera
214            </th>
215            <th>
216              Safari
217            </th>
218          </tr>
219          <tr>
220            <td>
221              Basic support
222            </td>
223            <td>
224              1.0
225            </td>
226            <td>
227              {{ CompatGeckoDesktop("1") }}
228            </td>
229            <td>
230              5.5
231            </td>
232            <td>
233              7.0
234            </td>
235            <td>
236              1.0
237            </td>
238          </tr>
239        </tbody>
240      </table>
241    </div>
242    <div id="compat-mobile">
243      <table class="compat-table">
244        <tbody>
245          <tr>
246            <th>
247              Feature
248            </th>
249            <th>
250              Android
251            </th>
252            <th>
253              Firefox Mobile (Gecko)
254            </th>
255            <th>
256              IE Phone
257            </th>
258            <th>
259              Opera Mobile
260            </th>
261            <th>
262              Safari Mobile
263            </th>
264          </tr>
265          <tr>
266            <td>
267              Basic support
268            </td>
269            <td>
270              1.0
271            </td>
272            <td>
273              {{ CompatGeckoMobile("1") }}
274            </td>
275            <td>
276              6.0
277            </td>
278            <td>
279              6.0
280            </td>
281            <td>
282              1.0
283            </td>
284          </tr>
285        </tbody>
286      </table>
287    </div>
288    <h2>
289      <nobr>See also</nobr>
290    </h2>
291    <p>
292      <nobr>{{ CSS_Reference:Fonts() }}</nobr>
293    </p>
294    <p>
295      <nobr>{{ languages( { "es": "es/CSS/font-size", "fr": "fr/C
 >SS/font-size", "pl": "pl/CSS/font-size", "pt": "pt/CSS/font-size"
 > } ) }}</nobr>
296    </p>

Back to History