fonts.html

CSS lets learn this step by step...

</table>
</dl>
</div>


<P> The <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a>
property specifies the <span>weight</span> of the font. Values have the following
meanings:</p>

<dl>
<dt><strong>100 to 900</strong>
<dd>These values
form an ordered sequence, where each number indicates a weight that is
at least as dark as its predecessor.
<dt><strong>normal</strong>
<dd>Same as '400'.
<dt><strong>bold</strong>
<dd>Same as '700'.
<dt><strong>bolder</strong>
<dd>Specifies the next weight that is assigned to a font that is darker
than the inherited one. If there is no such weight, it simply results
in the next darker numerical value (and the font remains unchanged),
unless the inherited value was '900', in which case the resulting
weight is also '900'.
<dt><strong>lighter</strong>
<dd>Specifies the next weight that is assigned to a font that is lighter
than the inherited one. If there is no such weight, it simply results
in the next lighter numerical value (and the font remains unchanged),
unless the inherited value was '100', in which case the resulting
weight is also '100'.
</dl>

<div class="example"><P style="display:none">Example(s):</P>
<PRE>
P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */
</PRE>
</div>

<P>Child elements inherit the <a href="cascade.html#computed-value">
computed value</a> of the weight.


<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-stretch'"><a name="propdef-font-stretch" class="propdef-title"><strong>'font-stretch'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | wider | narrower | ultra-condensed | extra-condensed |
condensed | semi-condensed  | semi-expanded | expanded | extra-expanded | 
   ultra-expanded | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>normal
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P> The <a href="fonts.html#propdef-font-stretch" class="noxref"><span class="propinst-font-stretch">'font-stretch'</span></a>
property selects a normal, condensed, or extended face from a font
family. Absolute keyword values have the following ordering, from
narrowest to widest :</p>

<ol>
	<li>ultra-condensed
	<li>extra-condensed
	<li>condensed
	<li>semi-condensed
	<li>normal
	<li>semi-expanded
	<li>expanded
	<li>extra-expanded
	<li>ultra-expanded
</ol>

<p>The relative keyword 'wider' sets the value to the next expanded
value above the inherited value (while not increasing it above
'ultra-expanded'); the relative keyword 'narrower' sets the value to
the next condensed value below the inherited value (while not
decreasing it below 'ultra-condensed').  

<H3>15.2.4 <a name="font-size-props">Font size</a>: the <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a>
and <a href="fonts.html#propdef-font-size-adjust" class="noxref"><span class="propinst-font-size-adjust">'font-size-adjust'</span></a>
properties</H3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-size'"><a name="propdef-font-size" class="propdef-title"><strong>'font-size'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="fonts.html#value-def-absolute-size" class="noxref"><span class="value-inst-absolute-size">&lt;absolute-size&gt;</span></a> | <a href="fonts.html#value-def-relative-size" class="noxref"><span class="value-inst-relative-size">&lt;relative-size&gt;</span></a> | <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>medium
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes, the computed value is inherited
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to parent element's font size
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>



<P>This property describes the size of the font when set solid.
Values have the following meanings:</p>

<DL>
    <DT><a name="x18"><span class="index-def" title="&lt;absolute-size&gt;::definition of">
           <strong>&lt;absolute-size&gt;</strong></span></a>
    <DD> An <a name="value-def-absolute-size"
class="value-def">&lt;absolute-size&gt;</a> keyword refers to an entry
in a table of font sizes computed and kept by the user agent. Possible values
are:

    <P> [ xx-small | x-small | small | medium | large | x-large | xx-large ]

    <P>On a computer screen a scaling factor of 1.2  is
    suggested between adjacent indexes; if the 'medium' font is 12pt,
    the 'large' font could be 14.4pt. Different media may need different
    scaling factors. Also, the user agent should take the quality and
    availability of fonts into account when computing the table. The
    table may be different from one font family to another.


<p class="note"><em><strong>Note.</strong> In CSS1, the suggested
scaling factor between adjacent indexes was 1.5 which user experience
proved to be too large.</em></P>

    <DT><a name="x19"><span class="index-def" title="&lt;relative-size&gt;::definition
of"><strong>&lt;relative-size&gt;</strong></span></a>

    <DD> A <a name="value-def-relative-size"
    class="value-def">&lt;relative-size&gt;</a> keyword is interpreted
    relative to the table of font sizes and the font size of the
    parent element. Possible values are:

    <P> [ larger | smaller ]

    <P> For example, if the parent element has a font size of
    'medium', a value of 'larger' will make the font size of the
    current element be 'large'.  If the parent element's size is not
    close to a table entry, the user agent is free to interpolate
    between table entries or round off to the closest one. The user
    agent may have to extrapolate table values if the numerical value
    goes beyond the keywords.

    <DT><span class="index-inst" title="&lt;length&gt;"><a name="x20" href="syndata.html#value-def-length" class="noxref"><span
    class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
    <DD>A length value specifies an absolute font size
        (that is independent of the user agent's font table).
        Negative lengths are illegal.
    <DT><span class="index-inst" title="&lt;percentage&gt;"><a name="x21" href="syndata.html#value-def-percentage" class="noxref"><span
    class="value-inst-percentage"><strong>&lt;percentage&gt;</strong>
    </span></a></span>
    <DD>A percentage value specifies an absolute font size relative
        to the parent element's font size. Use of percentage values, or 
	  values in 'em's, leads to more robust and cascadable style sheets.
  </DL>

<P>The <a href="cascade.html#actual-value">actual value</a> of
this property may differ from the <a
href="cascade.html#computed-value">computed value</a> 
due a numerical value on 'font-size-adjust' and the unavailability
  of certain font sizes.

  <p>Child elements inherit the computed <a href="fonts.html#propdef-font-size" class="noxref"><span
  class="propinst-font-size">'font-size'</span></a> value (otherwise, the
  effect of <a href="fonts.html#propdef-font-size-adjust" class="noxref"><span
  class="propinst-font-size-adjust">'font-size-adjust'</span></a> would
  compound).

<div class="example"><P style="display:none">Example(s):</P><P>

<PRE>
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-size-adjust'"><a name="propdef-font-size-adjust" class="propdef-title"><strong>'font-size-adjust'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a> | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>none
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>




<P>In <a name="x23"><span class="index-inst" title="bicameral">bicameral</span></a>
scripts, the subjective apparent size and legibility of a font are
less dependent on their <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a> value than on the value
of their <a href="fonts.html#descdef-x-height" class="noxref"><span class="descinst-x-height">'x-height'</span></a>, or, more
usefully, on the ratio of these two values, called the <a name="x24"><span
class="index-def" title="aspect value"><dfn>aspect value</dfn></span></a>
(font size divided by x-height). The higher the aspect value, the more
likely it is that a font at smaller sizes will be legible. Inversely,
faces with a lower aspect value will become illegible more rapidly
below a given threshold size than faces with a higher aspect
value. Straightforward font substitution that relies on font size
alone may lead to illegible characters.

<P>For example, the popular font Verdana has an aspect value of 0.58;
when Verdana's font size 100 units, its x-height is 58 units. For
comparison, Times New Roman has an aspect value of 0.46. Verdana will
therefore tend to remain legible at smaller sizes than Times New
Roman. Conversely, Verdana will often look 'too big' if substituted
for Times New Roman at a chosen size.

<P>This property allows authors to specify an aspect value for an
element that will preserve the x-height of the first choice font in
the substitute font. Values have the following meanings:

<dl>
<dt><strong>none</strong>
<dd>Do not preserve the font's x-height.

<dt><span class="index-inst" title="&lt;number&gt;"><a name="x25" href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number"><strong>&lt;number&gt;</strong></span></a></span>

<dd>Specifies the aspect value. The number refers to the aspect value
of the first choice font. The scaling factor for available fonts is
computed according to the following formula:

<pre>
  y(a/a') = c
</pre>

<P>where:</p>