Contents
Setting font properties will be among the most common uses of style
sheets. Unfortunately, there exists no well-defined and universally
accepted taxonomy for classifying fonts, and terms that apply to one
font family may not be appropriate for others. E.g., 'italic' is
commonly used to label slanted text, but slanted text may also be
labeled as being <em="">Oblique, Slanted, Incline, Cursive</em> or
<em="">Kursiv</em>. Therefore it is not a simple problem to map typical
font selection properties to a specific font.

Because there is no accepted, universal taxonomy of font
properties, matching of properties to font faces must be done
carefully. The properties are matched in a well-defined order to
insure that the results of this matching process are as consistent as
possible across UAs (assuming that the same library of font faces is
presented to each of them).

(The above algorithm can be optimized to avoid having to revisit
the CSS ;2.1 properties for each character.)

The per-property matching rules from (2) above are as follows:

<em="">Value:</em> ; ; | [[ <a href="fonts.html#value-def-family-name" class="noxref"=""><span class="value-inst-family-name"=""><;family-name>;</span></a> | <a href="fonts.html#value-def-generic-family" class="noxref"=""><span class="value-inst-generic-family"=""><;generic-family>;</span></a> ] [, <a href="fonts.html#value-def-family-name" class="noxref"=""><span class="value-inst-family-name"=""><;family-name>;</span></a>| <a href="fonts.html#value-def-generic-family" class="noxref"=""><span class="value-inst-generic-family"=""><;generic-family>;</span></a>]* ] | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | depends on user agent
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | yes
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | as specified
 |
The property value is a prioritized list of font family names
and/or <a href="#generic-font-families"="">generic family names.</a>
Unlike most other CSS properties, component values are separated
by a comma to indicate that they are alternatives:


body { font-family: Gill, Helvetica, sans-serif }

Although many fonts provide the "missing character" glyph,
 typically an open box, as its name implies this should not be
 considered a match
 for characters that cannot be found in the font. (It should,
however, be considered a match for U+FFFD, the "missing character"
character's code point).

There are two types of font family names:

Style sheet designers are encouraged to offer a generic font family
as a last alternative. Generic font family names are keywords and must NOT be quoted.

Font family names must either be given quoted as <a href="syndata.html#strings"="">strings,</a> or unquoted as a sequence of
one or more <a href="syndata.html#value-def-identifier"="">identifiers.</a> This means
most punctuation characters and digits at the start of each token must
be escaped in unquoted font family names.


For example, the following declarations are invalid:



font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

If a sequence of identifiers is given as a font family name, the
computed value is the name converted to a string by joining all the
identifiers in the sequence by single spaces.


To avoid mistakes in escaping, it is recommended to quote font
family names that contain white space, digits, or punctuation
characters other than hyphens:



body { font-family: "New Century Schoolbook", serif }

<;BODY STYLE="font-family: '21st Century', fantasy">

Font family <em="">names</em> that happen to be the same as a keyword
value ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', and
'cursive') must be quoted to prevent confusion with the keywords with
the same names. The keywords 'initial' and 'default' are reserved for
future use and must also be quoted when used as font names. UAs must
not consider these keywords as matching the '<;family-name>;'
type.

Generic font families are a fallback mechanism, a means of
preserving some of the style sheet author's intent in the worst case
when none of the specified fonts can be selected. For optimum
typographic control, particular named fonts should be used in
style sheets.



<a name="defined-to-exist"="">All five generic font families are defined to exist</a> in all
CSS implementations (they need not necessarily map to five distinct
actual fonts). User agents should provide reasonable
default choices for the generic font families, which express the
characteristics of each family as well as possible within the limits
allowed by the underlying technology.


User agents are encouraged to allow users to select alternative
choices for the generic fonts.


Glyphs of serif fonts, as the term is used in CSS, tend to have finishing
strokes, flared or tapering ends, or have actual serifed endings
(including slab serifs). Serif fonts are typically
proportionately-spaced. They often display a greater variation between
thick and thin strokes than fonts from the 'sans-serif' generic font
family. CSS uses the term 'serif' to apply to a font for any script,
although other names may be more familiar for particular scripts, such
as Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean).
Any font that is so described may be used to represent the
generic 'serif' family.


Examples of fonts that fit this description include:
Latin fonts
 | Times New Roman, Bodoni,
Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
 |
Greek fonts
 | Bitstream Cyberbit
 |
Cyrillic fonts
 | Adobe Minion Cyrillic, Excelsior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinist
 |
Hebrew fonts
 | New Peninim, Raanana, Bitstream Cyberbit
 |
Japanese fonts
 | Ryumin Light-KL, Kyokasho ICA, Futo Min A101
 |
Arabic fonts
 | Bitstream Cyberbit
 |
Cherokee fonts
 | Lo Cicero Cherokee
 |
Glyphs in sans-serif fonts, as the term is used in CSS, tend to have stroke
endings that are plain -- with little or no flaring, cross stroke, or other
ornamentation. Sans-serif fonts are typically
proportionately-spaced. They often have little variation between thick
and thin strokes, compared to fonts from the 'serif' family. CSS uses
the term 'sans-serif' to apply to a font for any script, although
other names may be more familiar for particular scripts, such as
Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font that
is so described may be used to represent the generic 'sans-serif'
family.


Examples of fonts that fit this description include:
Latin fonts
 | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
 |
Greek fonts
 | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
 |
Cyrillic fonts
 | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
 |
Hebrew fonts
 | Arial Hebrew, MS Tahoma
 |
Japanese fonts
 | Shin Go, Heisei Kaku Gothic W5
 |
Arabic fonts
 | MS Tahoma
 |
Glyphs in cursive fonts, as the term is used in CSS, generally have
either joining strokes or other cursive characteristics beyond those
of italic typefaces. The glyphs are partially or completely
connected, and the result looks more like handwritten pen or brush
writing than printed letterwork. Fonts for some scripts, such as
Arabic, are almost always cursive. CSS uses the term 'cursive' to
apply to a font for any script, although other names such as Chancery,
Brush, Swing and Script are also used in font names.


Examples of fonts that fit this description include:
Latin fonts
 | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
 |
Cyrillic fonts
 | ER Architekt
 |
Hebrew fonts
 | Corsiva
 |
Arabic fonts
 | DecoType Naskh, Monotype Urdu 507
 |
Fantasy fonts, as used in CSS, are primarily decorative while
still containing representations of characters (as opposed to Pi or
Picture fonts, which do not represent characters). Examples include:
Latin fonts
 | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
 |
The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts,
such as Arabic, look most peculiar.) The effect is similar to a manual
typewriter, and is often used to set samples of computer code.


Examples of fonts which fit this description include:


Latin fonts
 | Courier, MS Courier New, Prestige, Everson Mono
 |
Greek Fonts
 | MS Courier New, Everson Mono
 |
Cyrillic fonts
 | ER Kurier, Everson Mono
 |
Japanese fonts
 | Osaka Monospaced
 |
Cherokee fonts
 | Everson Mono
 |
<em="">Value:</em> ; ; | normal | italic | oblique | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | normal
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | yes
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | as specified
 |
The 'font-style' property selects between normal (sometimes
referred to as "roman" or "upright"), italic and oblique faces within
a font family.

A value of 'normal' selects a font that is classified as 'normal'
in the UA's font database, while 'oblique' selects a font that is
labeled 'oblique'. A value of 'italic' selects a font that is labeled
'italic', or, if that is not available, one labeled 'oblique'.

The font that is labeled 'oblique' in the UA's font database may
actually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names will
typically be labeled 'oblique' in the UA's font database. Fonts with
<em="">Italic, Cursive</em> or <em="">Kursiv</em> in their names will
typically be labeled 'italic'.


h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }

In the example above, emphasized text within 'H1' will appear in a
normal face.

<em="">Value:</em> ; ; | normal | small-caps | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | normal
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | yes
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | as specified
 |
Another type of variation within a font family is the small-caps.
In a small-caps font the lower case letters look similar to the
uppercase ones, but in a smaller size and with slightly different
proportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font that is not a small-caps font,
'small-caps' selects a small-caps font. It is acceptable (but not
required) in CSS ;2.1 if the small-caps font is a created by taking a
normal font and replacing the lower case letters by scaled uppercase
characters. As a last resort, uppercase letters will be used as
replacement for a small-caps font.

The following example results in an 'H3' element in small-caps,
with any emphasized words in oblique, and any emphasized words within
an 'H3' oblique small-caps:


h3 { font-variant: small-caps }
em { font-style: oblique }

There may be other variants in the font family as well, such as
fonts with old-style numerals, small-caps numerals, condensed or
expanded letters, etc. CSS ;2.1 has no properties that select those.

<em="">Note:</em> insofar as this property causes text to be
transformed to uppercase, the same considerations as for <a href="text.html#propdef-text-transform" class="noxref"=""><span class="propinst-text-transform"="">'text-transform'</span></a> apply.

<em="">Value:</em> ; ; | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | normal
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | yes
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see text
 |
The 'font-weight' property selects the weight of the font. The
values '100' to '900' form an ordered sequence, where each number
indicates a weight that is at least as dark as its predecessor. The
keyword 'normal' is synonymous with '400', and 'bold' is synonymous
with '700'. Keywords other than 'normal' and 'bold' have been shown to
be often confused with font names and a numerical scale was therefore
chosen for the 9-value list.


p { font-weight: normal } /* 400 */
h1 { font-weight: 700 } /* bold */

The 'bolder' and 'lighter' values select font weights that are
relative to the weight inherited from the parent:


strong { font-weight: bolder }

Fonts (the font data) typically have one or more properties whose
values are names that are descriptive of the "weight" of a font. There
is no accepted, universal meaning to these weight names. Their primary
role is to distinguish faces of differing darkness within a single
font family. Usage across font families is quite variant; for example,
a font that one might think of as being bold might be described as
being <em="">Regular, Roman, Book, Medium, Semi-</em> or <em="">DemiBold,
Bold,</em> or <em="">Black,</em> depending on how black the "normal" face
of the font is within the design. Because there is no standard usage
of names, the weight property values in CSS ;2.1 are given on a numerical
scale in which the value '400' (or 'normal') corresponds to the
"normal" text face for that family. The weight name associated with
that face will typically be <em="">Book, Regular, Roman, Normal</em> or
sometimes <em="">Medium</em>.

The association of other weights within a family to the numerical
weight values is intended only to preserve the ordering of darkness
within that family. However, the following heuristics tell how the
assignment is done in this case:


Once the font family's weights are mapped onto the CSS scale,
missing weights are selected as follows:


The following two examples show typical mappings.
Assume four weights in the "Rattlesnake" family, from lightest to
darkest: <em="">Regular, Medium, Bold, Heavy.</em>
Available faces | Assignments | Filling the holes |
---|---|---|
"Rattlesnake Regular" | 400 | 100, 200, 300 |
"Rattlesnake Medium" | 500 | |
"Rattlesnake Bold" | 700 | 600 |
"Rattlesnake Heavy" | 800 | 900 |
Assume six weights in the
"Ice Prawn" family: <em="">Book, Medium, Bold, Heavy, Black,
ExtraBlack.</em> Note that in this instance the user agent
has decided <em="">not</em> to assign a numeric
value to "Ice Prawn ExtraBlack".
Available faces | Assignments | Filling the holes |
---|---|---|
"Ice Prawn Book" | 400 | 100, 200, 300 |
"Ice Prawn Medium" | 500 | |
"Ice Prawn Bold" | 700 | 600 |
"Ice Prawn Heavy" | 800 | |
"Ice Prawn Black" | 900 | |
"Ice Prawn ExtraBlack" | (none) |
Values of 'bolder' and 'lighter' indicate values relative to the
weight of the parent element. Based on the inherited weight value,
the weight used is calculated using the chart below. Child elements
inherit the calculated weight, not a value of 'bolder' or 'lighter'.


Inherited value | bolder | lighter
 |
---|---|---|
100 | 400 | 100
 |
200 | 400 | 100
 |
300 | 400 | 100
 |
400 | 700 | 100
 |
500 | 700 | 100
 |
600 | 900 | 400
 |
700 | 900 | 400
 |
800 | 900 | 700
 |
900 | 900 | 700
 |
The table above is equivalent to selecting the next relative bolder
or lighter face, given a font family containing normal and bold faces
along with a thin and a heavy face. Authors who desire finer control
over the exact weight values used for a given element should use
numerical values instead of relative weights.


There is no guarantee that there will be a darker face for each of
the 'font-weight' values; for example, some fonts may have only a
normal and a bold face, while others may have eight face weights.
There is no guarantee on how a UA will map font faces within a family
to weight values. The only guarantee is that a face of a given value
will be no less dark than the faces of lighter values.

<em="">Value:</em> ; ; | <a href="fonts.html#value-def-absolute-size" class="noxref"=""><span class="value-inst-absolute-size"=""><;absolute-size>;</span></a> | <a href="fonts.html#value-def-relative-size" class="noxref"=""><span class="value-inst-relative-size"=""><;relative-size>;</span></a> | <a href="syndata.html#value-def-length" class="noxref"=""><span class="value-inst-length"=""><;length>;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"=""><span class="value-inst-percentage"=""><;percentage>;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | medium
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | yes
 |
<em="">Percentages:</em> ; ; | refer to inherited font size
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | absolute length
 |
The font size corresponds to the em square, a concept used in typography.
Note that certain glyphs may bleed outside their em squares. Values
have the following meanings:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
The following table provides user agent guidelines for the absolute-size
 mapping to HTML heading and absolute font-sizes. The 'medium' value is
 the user's preferred font size and is used as the reference middle value.
CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | |
---|---|---|---|---|---|---|---|---|
HTML font sizes | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Implementors should build a table of scaling factors for absolute-size keywords relative to the 'medium' font size and the particular device and its characteristics (e.g., the resolution of the device).


Different media may need different scaling factors. Also, the UA
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.

<strong="">Note 1.</strong> To preserve readability, a UA applying
these guidelines should nevertheless avoid creating font-size resulting
 in less than 9 pixels per EM unit on a computer display.
<strong="">Note 2.</strong> In CSS1, the suggested
scaling factor between adjacent indexes was 1.5, which user experience
proved to be too large. In CSS2, the suggested scaling factor for a
computer screen between adjacent indexes was 1.2, which still created
issues for the small sizes. Implementation experience has demonstrated
that a fixed ratio between adjacent absolute-size keywords is
problematic, and this specification does <em="">not</em> recommend such a
fixed ratio.
Length and percentage values should not take the font size table
into account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, 'em' and 'ex' length values refer to the
computed font size of the current element. On the 'font-size' property, these
length units refer to the computed font size of the parent element.

Note that an application may reinterpret an explicit size,
depending on the context. E.g., inside a VR scene a font may get a
different size because of perspective distortion.

Examples:


p { font-size: 16px; }
@media print {
	p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

<em="">Value:</em> ; ; | [ [ <a href="fonts.html#propdef-font-style" class="noxref"=""><span class="propinst-font-style"=""><;'font-style'>;</span></a> || <a href="fonts.html#propdef-font-variant" class="noxref"=""><span class="propinst-font-variant"=""><;'font-variant'>;</span></a> || <a href="fonts.html#propdef-font-weight" class="noxref"=""><span class="propinst-font-weight"=""><;'font-weight'>;</span></a> ]?
<a href="fonts.html#propdef-font-size" class="noxref"=""><span class="propinst-font-size"=""><;'font-size'>;</span></a> [ / <a href="visudet.html#propdef-line-height" class="noxref"=""><span class="propinst-line-height"=""><;'line-height'>;</span></a> ]? <a href="fonts.html#propdef-font-family" class="noxref"=""><span class="propinst-font-family"=""><;'font-family'>;</span></a> ] | caption | icon | menu | message-box | small-caption | status-bar | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | yes
 |
<em="">Percentages:</em> ; ; | see individual properties
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |

The <a href="fonts.html#propdef-font" class="noxref"=""><span class="propinst-font"="">'font'</span></a> property is,
except as described <a href="#almost"="">below</a>, a shorthand property for
setting
<a href="fonts.html#propdef-font-style" class="noxref"=""><span class="propinst-font-style"="">'font-style'</span></a>,
<a href="fonts.html#propdef-font-variant" class="noxref"=""><span class="propinst-font-variant"="">'font-variant'</span></a>,
<a href="fonts.html#propdef-font-weight" class="noxref"=""><span class="propinst-font-weight"="">'font-weight'</span></a>,
<a href="fonts.html#propdef-font-size" class="noxref"=""><span class="propinst-font-size"="">'font-size'</span></a>,
<a href="visudet.html#propdef-line-height" class="noxref"=""><span class="propinst-line-height"="">'line-height'</span></a> and
<a href="fonts.html#propdef-font-family" class="noxref"=""><span class="propinst-font-family"="">'font-family'</span></a> at the same
place in the style
sheet. The syntax of this property is based on a traditional
typographical shorthand notation to set multiple properties related to
fonts.

All font-related properties are first reset to their initial values,
including those listed in the preceding paragraph.
Then, those properties that are given explicit values in the
<a href="fonts.html#propdef-font" class="noxref"=""><span class="propinst-font"="">'font'</span></a> shorthand are set to those values.
For a definition of allowed and initial values, see the previously defined properties.


p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

In the second rule, the font size percentage value ('80%') refers
to the font size of the parent element. In the third rule, the line
height percentage refers to the font size of the element itself.

In the first three rules above, the 'font-style', 'font-variant'
and 'font-weight' are not explicitly mentioned, which means they are
all three set to their initial value ('normal'). The fourth rule sets
the 'font-weight' to 'bold', the 'font-style' to 'italic' and
implicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the
'font-size' (120% of the parent's font), the 'line-height' (120% times
the font size) and the 'font-family' ('fantasy'). It follows that the
keyword 'normal' applies to the two remaining properties: 'font-style'
and 'font-weight'.

The following values refer to <a name="x11"=""><span class="index-def" title="system
fonts"="">system fonts</span></a>:
System fonts may only be set as a whole; that is, the font
family, size, weight, style, etc. are all set at the same time.
These values may then be altered individually if desired. If no
font with the indicated characteristics exists on a given platform,
the user agent should either intelligently substitute (e.g., a smaller
version of the 'caption' font might be used for the 'small-caption'
font), or substitute a user agent default font. As for regular fonts,
if, for a system font, any of the individual properties are not part
of the operating system's available user preferences, those properties
should be set to their initial values.

That is why this property is "almost" a shorthand property: system
fonts can only be specified with this property, not with <a href="fonts.html#propdef-font-family" class="noxref"=""><span class="propinst-font-family"="">'font-family'</span></a> itself, so <a href="fonts.html#propdef-font" class="noxref"=""><span class="propinst-font"="">'font'</span></a> allows authors to do more than the
sum of its subproperties. However, the individual properties such as <a href="fonts.html#propdef-font-weight" class="noxref"=""><span class="propinst-font-weight"="">'font-weight'</span></a> are still given values taken from the system font, which can be independently varied.

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

If the font used for dropdown menus on a particular system
happened to be, for example, 9-point Charcoal, with a weight of 600, then P
elements that were descendants of BUTTON would be displayed as if
this rule were in effect:


button p { font: 600 9px Charcoal }

Because the <a href="fonts.html#propdef-font" class="noxref"=""><span class="propinst-font"="">'font'</span></a> shorthand
property resets any property not explicitly given a value
to its initial value, this has the same effect as this declaration:


button p {
 font-family: Charcoal;
 font-style: normal;
 font-variant: normal;
 font-weight: 600;
 font-size: 9px;
 line-height: normal;
}