W3C

CSS3 module: Fonts

W3C Working Draft 31-July-2001

This version:
http://www.w3.org/TR/2001/WD-css3-fonts-20010731
Latest version:
http://www.w3.org/TR/css3-fonts
Previous version:
NA.
Editors:
Michel Suignard (Microsoft)
Chris Lilley (W3C)
Authors:
Original CSS2 authors
Tantek Çelik (Microsoft)
Marcin Sawicki (former editor)
Michel Suignard (Microsoft)
Steve Zilles (Adobe)


Abstract

This document presents a set of properties allowing font specification by a user agent as well as additional font decoration properties like font effects, emphasis, smoothing, etc... The font specification is identical to the similar section in CSS 2 [CSS2]. The font decoration properties are new to CSS3.

Status of This Document

This document is a working draft of the CSS working group which is part of the Style activity. It contains a proposal for features to be included in CSS level 3.

Feedback is very much welcomed. Comments can be sent directly to the editor, but the mailing list www-style@w3.org (see instructions) is also open and is preferred for discussion of this and other drafts in the Style area.

This working draft may be updated, replaced or rendered obsolete by other W3C documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).

To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.

Contents


1 Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

It has non-normative (informative) references to the following other CSS3 modules:

2. Introduction

When a document's text is to be displayed visually, characters (abstract information elements) must be mapped to glyphs. One or more characters may be depicted by one or more abstract glyphs, following rules defined by fonts, by language adn by context. Abstract glyphs are then rendered into glyphs in the forms of outlines or bitmaps that may be drawn on the screen or paper. The transformation from characters to abstract glyphs is derived from the combination of the font properties, which are used to select a font-face, and the font data from that font-face.

A font-face consists of a collection of glyphs together with the information, the font tables, necessary to use those glyphs to present characters on some medium. The combination of the collection of glyphs and the font tables is called the font data. The font tables include the information necessary to map characters to glyphs, to determine the size of glyph areas and to position the glyph area. Each font table consists of one or more font characteristics, such as the font-weight and font-style.

The geometric font characteristics are expressed in a coordinate system based on the EM box. (The EM is a relative measure of the height of the glyphs in the font) The box 1 EM high and 1 EM wide is called the design space. This space is given a geometric coordinates by sub-dividing the EM into a number of units-per-em.

Note: Units-per-em is a font characteristic. A typical value for units-per-EM is 1000 or 2048.

The coordinate space of the EM box is called the design space coordinate system. For scalable fonts, the curves and lines that are used to draw a glyph are represented using this coordinate system.

Note: Most often, the (0,0) point in this coordinate system is positioned on the left edge of the EM box, but not at the bottom left corner. The Y coordinate of the bottom of a roman capital letter is usually zero. And the descenders on lower case roman letters have negative coordinate values.

Note: CSS also uses the 'em' length unit to represent the computed value of the 'font-size' property.

CSS assumes that the font tables will provide at least three font characteristics: an ascent, a descent and a set of baseline-tables. The ascent is the distance to the top of the EM box from the (0,0) point of the font; the descent is the distance to the bottom of the EM box from the (0.0) point of the font. The baseline-table is described in the CSS3 Text module.

In addition to the font characteristics required above, a font may also supply substitution and positioning tables that can be used by a formatter to re-order, combine and position a sequence of glyphs to make one or more composite glyphs. The combination may be as simple as a ligature, or as complex as an indic syllable which combines, usually with some re-ordering, multiple consonants and vowel glyphs.

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

This module only addresses the font specification part. All other considerations are covered by the Web Font module which addresses: font selection, font characteristics and font matching algorithm.

In addition, this modules specifies various font decoration effects that are glyph related like 3D effect, outline, smoothing and emphasis. These decoration effects are differentiated from the text-decoration through their closer relationship with fonts and their glyphs.

3 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 [link?]. 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 implementers, and an increase in robustness.

3.1 Font face selection: font properties

CSS specifies fonts according to these characteristics:

Font family
The font family specifies which font family is to be used to render the text. A font family is 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. Font family names include "Helvetica", "New Century Schoolbook", etc... Font family names are not restricted to Latin characters. Font families 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
The 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
The font variant indicates whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters. A particular font may contain only normal, only small-caps, or both types of glyph; this property is used to request an appropriate font and, if the font contains both variants, the appropriate glyphs.
Font weight
The 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
The 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
The 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. Please consult the section on length units [link to "values and units" module] for more information.

Each user agent constructs a font database from the fonts at its disposition. How the user agent constructs the font database lies outside the scope of this specification since the implementation of the database depends on such factors as the operating system, the windowing system, and the client. At a minimum, the database must contain an entry for each available font-face and columns for each of the font characteristics used in font selection. It must also contain a column for the 'unicode-range' characteristic, the range of Unicode code values for which the font-face has glyphs. If there are two or more font faces that have the same values for all of these characteristics, then all but one of these entries is eliminated from the data base.

In addition, font descriptors are used to describe the characteristics of fonts, so that a suitable font can be chosen to create the desired appearance. These font descriptors are used new font information to the font database which is built on locally available resources. For information about the font descriptors and classification of fonts, please consult the section on font descriptors [link] in the CSS Web Fonts module.

Matching of font properties to the database entries for the font faces must be done carefully. The font properties are matched in a well-defined order to insure that the results of this matching process are as consistent as possible across User Agents (assuming that the same library of font faces and the same set of values of the font properties is presented to each of them). This algorithm may be optimized, provided that an implementation behaves as if the algorithm had been followed exactly.

  1. At each element, the UA assembles the font properties applicable to that element. Using the complete set of properties, the UA uses the computed value of the 'font-family' property, which is a font set, to choose a tentative font family. Thus, matching on a family name will succeed before matching on some other characteristic. The remaining properties are tested against the entries in the font database that have that font family name according to the matching criteria used for each characteristic. If there are matches for all the remaining properties, then that is the matching font face for the given element. The matching criteria used for each characteristic are as follows:

    1. 'font-style' is tried first. For example, 'italic' will be satisfied if there is either a face in the UA's font database labeled with the CSS keyword 'italic' (preferred) or 'oblique'. Otherwise the values must be matched exactly or font-style will fail.

    2. 'font-variant' is tried next. 'normal' matches a font not labeled as 'small-caps'; 'small-caps' matches (1) a font labeled as 'small-caps', (2) a font in which the small caps are synthesized, or (3) a font where all lowercase letters are replaced by uppercase letters. A small-caps font may be synthesized by electronically scaling uppercase letters from a normal font.

    3. 'font-weight' is matched next, it will never fail. (See 'font-weight' below.)

    4. 'font-size' must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by 'em' values in other properties, are based on the computed 'font-size' value.

  2. If step 1 fails, and if there is a next alternative in the font set that is the value of the 'font-family' property, then repeat step 1 with that next alternative as the tentative font family.

  3. If there is a matching font face, then:

    1. either it is a textual element, in which case it is necessary to determine if the matching font-face has glyphs corresponding to the textual content. If not, and there is a next alternative font-family in the font set, then repeat from step 2 with the next alternative as the tentative font-family. The 'unicode-range' characteristic may be used to rapidly eliminate from consideration those font faces that do not have the needed glyph. If the 'unicode-range' characteristic indicates that a font contains a glyph in the correct range, that font must be used. If there is a corresponding glyph, then the matching font-face is the nominal font for the textual element.

    2. or, it is not a textual element, in this case, the matching font becomes the nominal font for the formatting object.

    In either case, the font data of the nominal font is expressed in terms of the EM box and the design coordinate system. This is natural for scalable fonts and for bit mapped fonts, equivalent design space coordinates can be computed from the font data and the computed font-size. (Using the computed font-size means that some of the font characteristics coordinate values may lie outside the EM box.)

    Since the font-size is used in the selection, the font-face and its font characteristics are scaled to the requested font-size. (For scalable fonts, the design space coordinates are multiplied by the computed font-size; for binary fonts, the values of the characteristics stored with the font are used.)

  4. If steps 1-3 above do not produce a matching font face, then use the UA-dependent default 'font-family' value and repeat from step 1, using the best match that can be obtained within this font. If a particular character cannot be displayed using this font, the UA should indicate that a character is not being displayed (for example, using the 'missing character' glyph).

3.2 Font family: the 'font-family' property

'font-family'
Value:  [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
Initial:  depends on user agent
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

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.

Example(s):

For example, text that contains English words mixed with mathematical symbols may need a font set of two fonts, one containing Latin letters and digits, the other containing mathematical symbols. Here is an example of a font set suitable for a text that is expected to contain text with Latin characters, Japanese characters, and mathematical symbols:

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

The glyphs available in the "Baskerville" font (a font that covers only Latin characters) will be taken from that font, Japanese glyphs will be taken from "Heisi Mincho W3", and the mathematical symbol glyphs will come from "Symbol". Any others will come from the generic font family '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. Font family names containing whitespace [link to syntax module] should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.
<generic-family>
The following generic families are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. Please see the section on generic font families for descriptions of these families. Generic font family names are keywords, and therefore must not be quoted.

Authors are encouraged to offer a generic font family as a last alternative, for improved robustness.

For example:

<!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>

Example(s):

The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages.

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

This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.

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

'font-style'
Value:  normal | italic | oblique | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

The 'font-style' property requests normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family. Values have the following meanings:

normal
Specifies a font that is classified as 'normal' in the UA's font database.
oblique
Specifies a font that is classified as 'oblique' in the UA's font database. 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
Specifies a font that is classified as 'italic' in the UA's font database, or, if that is not available, one labeled 'oblique'. Fonts with Italic, Cursive, or Kursiv in their names will typically be labeled 'italic'.

Example(s):

In this example, normal text in an H1, H2, or H3 element will be displayed with an italic font. However, emphasized text (EM) within an H1 will appear in a normal face.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
'font-variant'
Value:  normal | small-caps | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

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
Specifies a font that is not labeled as a small-caps font.
small-caps
Specifies 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.

Example(s):

The following example results in an H3 element in small-caps, with emphasized words (EM) in oblique small-caps:

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.

'font-weight'
Value:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

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

Example(s):

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 [link to Cascading module] of the weight.

The 'font-weight' property values 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 Book, Regular, Roman, Normal or sometimes Medium.

The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of weights within that family. User agents must map names to values in a way that preserves visual order; a face mapped to a value must not be lighter than faces mapped to lower values. There is no guarantee on how a user agent will map font faces within a family to weight values. However, the following heuristics tell how the assignment is done in typical cases: If the font family already uses a numerical scale with nine values (as e.g., OpenType does), the font weights should be mapped directly.

If there is both a face labeled Medium and one labeled Book, Regular, Roman or Normal, then the Medium is normally assigned to the '500'.

The font labeled "Bold" will often correspond to the weight value '700'.

If there are fewer then 9 weights in the family, the default algorithm for filling the "holes" is as follows. If '500' is unassigned, it will be assigned the same font as '400'. If any of the values '600', '700', '800', or '900' remains unassigned, they are assigned to the same face as the next darker assigned keyword, if any, or the next lighter one otherwise. If any of '300', '200', or '100' remains unassigned, it is assigned to the next lighter assigned keyword, if any, or the next darker otherwise.

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, others may have eight different face weights.

'font-stretch'
Value:  normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

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 :

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

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

3.4 Font size: the 'font-size' and 'font-size-adjust' properties

'font-size'
Value:  <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial:  medium
Applies to:  all elements
Inherited:  yes, the computed value is inherited
Percentages:  refer to parent element's font size
Media:  visual

This property describes the size of the font when set solid. Values have the following meanings:

<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:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

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.

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

<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:

[ larger | smaller ]

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.

<length>
A length value specifies an absolute font size (that is independent of the user agent's font table). Negative lengths are illegal.
<percentage>
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.

The actual value [link to Cascading module] 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).

Example(s):

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
'font-size-adjust'
Value:  <number> | none | inherit
Initial:  none
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

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, whether it is substituted or not. Values have the following meanings:

none
Do not preserve the font's x-height.
<number>
Specifies the aspect value. The number typically refers to the aspect value of the first choice font. The scaling factor for all fonts is computed according to the following formula:
  y(a/a') = c

where:

y = 'font-size' actual value
a  = font-size-adjust property value
a' = aspect value of font
c = 'font-size' to apply to font

Example(s):

For example, if 14px Verdana (with an aspect value of 0.58) was unavailable and an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px. If Verdana is available, no adjustment occurs, as long as its actual aspect value is the same as the hypothetical aspect value provided by the font-size-adjust property.

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. Font size adjustments are applied to all fonts used by child elements, substituted or not.

The first image below 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.

Comparison of 12 point fonts

The next 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.

Comparison of font-adjusted fonts

3.5 Shorthand font property: the 'font' property

'font'
Value:  [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial:  see individual properties
Applies to:  all elements
Inherited:  yes
Percentages:  allowed on 'font-size' and 'line-height'
Media:  visual

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.

Example(s):

P { font: 12pt/14pt 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 }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

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 ('110%') refers to the font size of the element itself.

The first three rules do not specify the 'font-variant' and 'font-weight' explicitly, so these properties receive their initial values ('normal'). Notice that the font family name "new century schoolbook", which contains spaces, is enclosed in quotes. 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 size), the 'line-height' (120% of 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 sixth rule sets the 'font-style', 'font-size', and 'font-family', the other font properties being set to their initial values. It then sets 'font-stretch' to 'condensed' since that property cannot be set to that value using the 'font' shorthand property.

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.

Example(s):

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 9pt Charcoal }

Because the 'font' shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

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

3.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 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, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Hebrew fonts New Peninim, Raanana, Bitstream Cyberbit
Japanese fonts Ryumin Light-KL, Futo Min A101
Arabic fonts Bitstream Cyberbit
Cherokee fonts Lo Cicero Cherokee

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:

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

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:

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

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

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:
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


4. Font decoration

Font decoration properties describes decoration that affect the rendering of fonts. Although similar in principle to the text-decoration properties, they differ by being close related to the font and glyphs they influence. For example, the shape of the font emphasis which is a decoration widely used in East Asian typography will vary upon the font on which it is applied. 

4.1 Font effect: the 'font-effect' property

'font-effect'
Value:  none | emboss | engrave | outline | inherit
Initial:  none
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property controls the special effect applied to glyphs. Possible values:

none
no font effect is applied
engrave
the glyphs appear as if they were engraved into the page. (This effect is also sometimes referred to as "sunken text")
emboss
the glyphs appear "embossed", or "raised" above the page surface.
outline
only the outlines of the glyphs are drawn.

Example of engraved, embossed and outline text

Figure 4.1: Example of engraved, embossed and outline text

4.2 Font smoothing: the 'font-smooth' property

'font-smooth'
Value:  auto | never | always | <absolute-size> | length | inherit
Initial:  auto
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property allows author control over applying anti-aliasing fonts when rendered.

auto
smooth text according to system defaults.
never
don't smooth text.
always
always smooth text at any size.
<absolute-size> <length>
If the actual value of the font-size property for the element is greater than or equal to the value specified, then apply font smoothing when rendering the text.

4.3 Font emphasis: the 'font-emphasize-style' 'font-emphasize-position' properties and the shorthand 'font-emphasize' property

'font-emphasize-style'
Value:  none | accent | dot | circle | disc | inherit
Initial:  none
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property sets the style for the emphasis formatting applied to text. East Asian documents use the following symbols on top of each glyph to emphasize a run of text: an 'accent' symbol, a 'dot', a hollow 'circle', or a solid 'disc'.

For example:

Example of emphasis in Japanese appearing above the text

Figure 4.3.1: Accent emphasis (shown in blue for clarity) applied to Japanese text

Note, that unlike 'text-decoration', this property can affect the line height. Furthermore the emphasis style should be distinguished from the text-decoration which is another method to 'emphasize' text content.

'font-emphasize-position'
Value:  before | after | inherit
Initial:  before
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property sets the position of the emphasis symbols. They can appear either 'before' or 'after' the emphasized run of horizontal text. The values 'before' and 'after' should be understood as relative to the line baseline. In an horizontal layout flow, 'before' means above the text. In a vertical layout flow, if the position is set to 'before' then the emphasis marks should appear on the right side of the vertical text column. If the position is set to 'after', then the emphasis should appear the the left side of the column. 

In Japanese for example, the preferred position is 'before':

Example of emphasis in Japanese appearing above the text

Figure 4.3.2: Emphasis (shown in blue for clarity) applied above a fragment of Japanese text

In Chinese used in the PRC, on the other hand, the preferred position is 'after':

Example of emphasis in simplified Chinese appearing below the text

Figure 4.3.3: Emphasis (shown in blue for clarity) applied below a fragment of Chinese text

The table below summarizes the preferred emphasis mark position depending on the language:

Language Preferred emphasis position
Japanese before
Chinese (Traditional) before
Chinese (Simplified) after

Figure 4.3.4: Emphasis and ruby position depending on the language

'font-emphasize'
Value:  <'font-emphasize-style'> || <'font-emphasize-position'> | inherit
Initial:  see individual properties
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This is a shorthand property for setting the style and position of the font emphasis decoration.


5 Properties index

NameValuesInitial valueApplies to
(Default: all)
Inherited?Percentages
(Default: N/A)
Media groups
'font' [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit see individual properties   yes allowed on 'font-size' and 'line-height' visual
'font-effect' none | emboss | engrave | outline | inherit none   yes   visual
'font-emphasize' <'font-emphasize-style'> || <'font-emphasize-position'> | inherit see individual properties   yes   visual
'font-emphasize-position' before | after | inherit before   yes   visual
'font-emphasize-style' none | accent | dot | circle | disc | inherit none   yes   visual
font-family' [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit depends on user agent   yes   visual
'font-size' <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium   yes, the computed value is inherited refer to parent element's font size visual
'font-size-adjust' <number> | none | inherit none   yes   visual
'font-smooth' auto | never | always | <absolute-size> | length | inherit auto   yes   visual
'font-stretch' normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal   yes   visual
'font-style' normal | italic | oblique | inherit normal   yes   visual
'font-variant' normal | small-caps | inherit normal   yes   visual
'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal   yes   visual

 


Acknowledgements

This specification would not have been possible without the help from the original contributors to CSS 2 [CSS2]  who wrote most of the text of this module.


References

[CSS2]
Cascading Stylesheets, level 2 (CSS2) Specification, W3C Recommendation
Bert Bos, Håkon Wium Lie, Chris Lilley and Ian Jacobs, 12 May 1998
Available at: http://www.w3.org/TR/REC-CSS2
[HTML4]
HTML 4.0 Specification, W3C Recommendation
Dave Raggett, Arnaud Le Hors and Ian Jacobs, 18 December 1997, revised 24 April 1998
Available at: http://www.w3.org/TR/REC-html40