• 15.1 Introduction
• 15.2 specification
  • 15.2.1 specification properties
  • 15.2.2 Font family: the font-family property
  • 15.2.3 styling: the font-style, font-variant, font-weight and font-stretch properties
  • 15.2.4 Font size: the font-size and font-size-adjust properties
  • 15.2.5 Shorthand font property: the font property
  • 15.2.6 Generic font families

15.1 Introduction

When a document's text is to be displayed visually, characters

A visual user agent must address the following issues before actually rendering a character:

• Is there, directly or by inheritance, a font specified for this character?
• Does the user agent have this font available?
• If so, what glyph(s) does this character or sequence of characters map to?
• If not, what should be done? Should a different font be substituted? Can the font be synthesized? Can it be retrieved from the Web?

In both CSS1 and CSS2, authors specify font characteristics via a series of font properties.

How the user agent handles these properties, when there is no matching font on the client has expanded between CSS1 and CSS2. In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Alternate fonts could be specified through the properties, but beyond that, user agents had no way to propose other fonts to the user (even stylistically similar fonts that the user agent had available) other than generic default fonts.

CSS2 changes all that, and allows much greater liberty for:

• style sheet authors, to describe the fonts they want to be used
• user agents, in selecting a font when an author's requested font is not immediately available.

CSS2 improves client-side font matching, enables font synthesis and progressive rendering, and enables fonts to be downloaded over the Web. These enhanced capabilities are referred to as 'WebFonts'

In the CSS2 font model, as in CSS1, each user agent has a "font database" at its disposition. CSS1 referred to this database but gave no details about what was in it. CSS2 defines the information in that database and allows style sheet authors to contribute to it. When asked to display a character with a particular font, the user agent first identifies the font in the database that "best fits" the specified font (according to the font matching algorithm) Once it has identified a font, it retrieves the font data locally or from the Web, and may display the character using those glyphs.

In light of this model, we have organized the specification into two sections. The first concerns the font specification mechanism, whereby authors specify which fonts they would like to have used. The second concerns the font selection mechanism, whereby the client's user agent identifies and loads a font that best fits the author's specification.

How the user agent constructs the font database lies outside the scope of this specification since the database's implementation depends on such factors as the operating system, the windowing system, and the client.

15.2 Font specification

The first phase of the CSS font mechanism concerns how style sheet authors specify which fonts should be used by a user agent. At first, it seem that the obvious way to specify a font is by it's name, a single string - which appears to be separated into distinct parts; for example "BT Swiss 721 Heavy Italic".

Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts based on their names, and terms that apply to one font family name may not be appropriate for others. For example, the term 'italic' is commonly used to label slanted text, but slanted text may also be labeled Oblique, Slanted, Incline, Cursive, or Kursiv. Similarly, font names typically contain terms that describe the "weight" of a font. The primary role of these names is to distinguish faces of differing darkness within a single font family. There is no accepted, universal meaning to these weight names and usage varies widely. For example a font that you might think of as being bold might be described as being Regular, Roman, Book, Medium, Semi- or Demi-Bold, Bold, or Black, depending on how black the "normal" face of the font is within the design.

This lack of systematic naming makes it impossible, in the general case, to generate a modified font face name that differs in a particular way, such as being bolder.

Because of this, CSS uses a different model. Fonts are requested not through a single font name but through setting a series of font properties. These property values form the basis of the user agent's font selection mechanism. The font properties can be individually modified, for example to increase the boldness, and the new set of font property values will then be used to select from the font database again. The result is an increase in regularity for style sheet authors and implementors, and an increase in robustness.

15.2.1 Font specification properties

CSS2 specifies fonts according to these characteristics:

font-family

specifies a group of fonts, designed to be used in combination and exhibiting similarities in design. One member of the family may be italic, another bold, another condensed or using small caps includes "Helvetica", "New Century Schoolbook", and "Kyokasho ICA L", are not restricted to Latin characters, may be grouped into different categories: those with or without serifs, those whose characters are or are not proportionally spaced, those that resemble handwriting, those that are fantasy fonts, etc.

font-style

specifies whether the text is to be rendered using a normal, italic, or oblique face.
italic is a more cursive companion face to the normal face, but not so cursive as to make it a script face.
oblique is a slanted form of the normal face, and is more commonly used as a companion face to sans-serif. This definition avoids having to label slightly slanted normal faces as oblique, or normal Greek faces as italic.

font-variant

indicates whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs . A particular font may contain only normal, only small-caps, or both.

font-weight

Refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

font-stretch

Indicates the desired amount of condensing or expansion in the glyphs used to render the text, relative to other fonts in the same font family.

font-size

Refers to the size of the font from baseline to baseline, when set solid (in CSS terms, this is when the font-size and 'line-height' properties have the same value).

On all properties except font-size, 'em' and 'ex' length values refer to the font size of the current element. For font-size, these length units refer to the font size of the parent element. See length units.

properties are used to describe the desired appearance of text in the document.

descriptors, in contrast, are used to describe the characteristics of fonts, so that a suitable font can be chosen to create the desired appearance. See font descriptors.

15.2.2 The font-family property

This property specifies a prioritized list of font family names and/or generic family names. To deal with the problem that a single font may not contain glyphs to display all the characters in a document, or that not all fonts are available on all systems, this property allows authors to specify a list of fonts, all of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. This list is called a font set .

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

The generic font family will be used if one or more of the other fonts in a font set is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set.

There are two types of font family names:

<family-name>

The name of a font family of choice. In the previous example,
"Baskerville", "Heisi Mincho W3", and "Symbol" are font families.
Names containing whitespace must be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and whitespace characters inside the name are converted to a single space.

< generic-family>

serif, sans-serif, cursive, fantasy, monospace. ^*
Generic font family names are keywords, and therefore must not be quoted. Offer a generic font family as a last alternative.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
    </STYLE>
  </HEAD>
  <BODY>
   <H1 style="font-family: 'My own font', fantasy">Test</H1>
    <P>What's up, Doc?
  </BODY>
</HTML>

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

15.2.3 Font styling : the font- style , font- variant , font- weight and font- stretch properties

font-style property requests normal (sometimes referred to as "roman" or "upright"), italic , and oblique faces within a font family.

normal

classified as 'normal' in the UA^*'s font database.

oblique

classified as 'oblique'. Fonts with Oblique, Slanted, or Incline in their names will typically be labeled 'oblique' in the font database. A font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.

italic

classified as 'italic', or, if that is not available, one labeled 'oblique'. Fonts with Italic, Cursive, or Kursiv in their names will typically be labeled 'italic'.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

In a small-caps font, the glyphs for lowercase letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The font-variant property requests such a font for bicameral (having two cases, as with Latin script). This property has no visible effect for scripts that are unicameral (having only one case, as with most of the world's writing systems). Values have the following meanings:

normal not labeled as a small-caps

small-caps

a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font, for example by taking a normal font and replacing the lowercase letters by scaled uppercase characters. As a last resort, unscaled uppercase letter glyphs in a normal font may replace glyphs in a small-caps font so that the text appears in all uppercase letters.

H3 { font-variant: small-caps }
EM { font-style: oblique }

Insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.

The font-weight property specifies the weight of the font. Values have the following meanings:

100 to 900

These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor.

normal

Same as '400'.

bold

Same as '700'.

bolder

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'.

lighter

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'. *^{doesn't seem to be implemented in any browsers}

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */
        
 

Child elements inherit the computed value of the weight.

The font-stretch property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest :

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').

15.2.4 Font-size: the font-size and font-size-adjust properties

<absolute-size>

An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the user agent.
Possible values are:

On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes; ex: 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.

Note. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large.

^* Editor's note: Absolute is based on the brower's setting of text-size. This is VERY different then specifing the size using the nnpt, nnem, or nnpx format. You can see the difference by clicking on View; Text size; larger menu option in Internet explorer.

Notice that text specified by the absolute property value CHANGES whereas text specified by the numeric property does not.
Using absolute property or percent permits the user to change the presentation of the text in the browser is a very important feature and (IMHO) numeric specifications should be avoided.

The actual value of this property may differ from the computed value due a numerical value on font-size-adjust and the unavailability of certain font sizes.

Child elements inherit the computed font-size value (otherwise, the effect of font-size-adjust would compound).

P { font-size: 12pt }

BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

In bicameral scripts, the subjective apparent size and legibility of a font are less dependent on their font-size value than on the value of their 'x-height', or,more usefully, on the ratio of these two values, called the aspect value (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.

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.

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:

none

Do not preserve the font's x-height.

<number>

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:

  y(a/a') = c

where:

y = font-size of first-choice font
a' = aspect value of available font
c = font-size to apply to available font

Font size adjustments take place when computing the actual value of font-size. Since inheritance is based on the computed value, child elements will inherit unadjusted values.

This image shows several typefaces rasterized at a common font size (11pt. at 72 ppi), together with their aspect values. Note that faces with higher aspect values appear larger than those with lower. Faces with very low aspect values are illegible at the size shown.	This image shows the results of font-size-adjust where Verdana has been taken as the"first choice", together with the scaling factor applied. As adjusted, the apparent sizes are nearly linear across faces, though the actual (em) sizes vary by more than 100%. Note that font-size-adjust tends to stabilize the horizontal metrics of lines, as well.

15.2.5 Shorthand font property

The 'font' property is, except as described below, a shorthand property for setting font-style, font-variant, font-weight, font-size, 'line-height', and 'font-family', 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 plus 'font-stretch' and font-size-adjust. Then, those properties that are given explicit values in the 'font' shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set 'font-stretch' and font-size-adjust to other than their initial values using the 'font' shorthand property; instead, set the individual properties.

The following values refer to system fonts:

caption

The font used for captioned controls (e.g., buttons, drop-downs, etc.).

icon

The font used to label icons.

menu

The font used in menus (e.g., dropdown menus and menu lists).

message-box

The font used in dialog boxes.

small-caption

The font used for labeling small controls.

status-bar

The font used in window status bars.

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 'smallcaption' 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 'font-family' itself, so 'font' allows authors to do more than the sum of its subproperties. However, the individual properties such as font-weight 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 }

BUTTON P { font: 600 9pt Charcoal }

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
} 

15.2.6 Generic font families

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.

All five generic font families are defined to exist 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.

serif

Glyphs of serif fonts, as the term is used in CSS, 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, shown below in their displayed glyphs for YOUR User Agent (if available) that fit this description include:

sans-serif

Glyphs in sans-serif fonts, as the term is used in CSS, have stroke endings that are plain -- without any 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:

cursive

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:

fantasy

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:

monospace

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: