Copyright ©2002 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
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 very close to the similar section in CSS 2 [CSS2]. The font decoration properties are new to CSS3.
This document is a working draft of the CSS working group which is part of the Style activity (see summary). It contains a proposal for features to be included in CSS level 3.
The working group believes this draft is stable and it therefore issues a last call for comments, before requesting the status of Candidate Recommendation for the draft. The deadline for comments is 30 August 2002.
Comments can be sent directly to the editor, but the archived 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).
Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.
To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.
This CSS3 module depends on the following other CSS3 modules:
It has informative references to the following other CSS3 modules:
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 and 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.
Finally all properties, in addition to the noted values, take 'initial' and 'inherit'. These values are not repeated in each of the property value enumeration.
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 [to be added - link to Web Fonts module]. 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.
CSS specifies fonts according to these characteristics:
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.
At each element (or pseudo-element), the UA assembles the font properties applicable to that element (or pseudo-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:
'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.
'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.
'font-weight' is matched next, it will never fail. (See 'font-weight' below.)
'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%.) Outside the margin of tolerance the UA should use another font as listed in the font-family property (if available). Further computations, e.g., by 'em' values in other properties, are based on the computed 'font-size' value.
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.
If there is a matching font face, then:
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.
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.)
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, then the UA has no suitable font for that character. The UA should map each character for which it has no suitable font to a visible symbol chosen by the UA, preferably a "missing character" glyph from one of the font faces available to the UA.
Name: | 'font-family' |
---|---|
Value: | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family> | none] |
Initial: | depends on user agent |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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.
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", Arial Unicode MS, 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 "Arial Unicode MS". 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.
There are two types of font family names:
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?</p> </body> </html>
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.
Name: | 'font-style' |
---|---|
Value: | normal | italic | oblique |
Initial: | normal |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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:
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 }
Name: | 'font-variant' |
---|---|
Value: | normal | small-caps |
Initial: | normal |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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:
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.
Name: | 'font-weight' |
---|---|
Value: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Initial: | normal |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
The 'font-weight' property specifies the weight of the font. Values have the following meanings:
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.
Name: | 'font-stretch' |
---|---|
Value: | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |
Initial: | normal |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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').
Name: | 'font-size' |
---|---|
Value: | <absolute-size> | <relative-size> | <length> | <percentage> |
Initial: | medium |
Applies to: | all elements and generated content |
Inherited: | yes, the computed value is inherited |
Percentages: | refer to parent element's font size |
Media: | visual |
Computed value: | <absolute-size> or <length> |
This property indicates the desired height (and width) of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values. Values have the following meanings:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
[ 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.
The following table provides user agent's guideline for the absolute-size scaling factor and their mapping to XHTML heading and absolute font-sizes. The 'medium' value is used as the reference middle value. The user agent may fine tune these values for different fonts or different types of display devices.
CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | |
---|---|---|---|---|---|---|---|---|
scaling factor | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
XHTML headings | h6 | h5 | h4 | h3 | h2 | h1 | ||
XHTML font sizes | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Note 1. To preserve readability, an UA applying these guidelines should nevertheless avoid creating font-size resulting in less than 9 pixels per EM unit on a computer display .
Note 2. 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 computer screen between adjacent indexes was 1.2 which still created issues for the small sizes. The new scaling factor varies between each index to provide a better readability.
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).
p { font-size: 12pt; } blockquote { font-size: larger } em { font-size: 150% } em { font-size: 1.5em }
Name: | 'font-size-adjust' |
---|---|
Value: | <number> | none |
Initial: | none |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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 (x-height divided by font-size). 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:
y(a/a') = c
where:
y = 'font-size' actual value a = aspect value as specified by the font-size-adjust property value a' = aspect value of actual font c = 'font-size' to apply to font
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.
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.
Name: | 'font' |
---|---|
Value: | [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar |
Initial: | see individual properties |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | allowed on 'font-size' and 'line-height' |
Media: | visual |
Computed value: | see individual properties |
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.
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:
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 }
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 }
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.
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), Batang (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 |
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 Gulim (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 |
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 may vary upon the font on which it is applied.
Name: | 'font-effect' |
---|---|
Value: | none | emboss | engrave | outline |
Initial: | none |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
This property controls the special effect applied to glyphs. Possible values:
Figure 4.1: Example of engraved, embossed and outline text
Name: | 'font-smooth' |
---|---|
Value: | auto | never | always | <absolute-size> | length |
Initial: | auto |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
This property allows author control over applying anti-aliasing fonts when rendered.
Name: | 'font-emphasize-style' |
---|---|
Value: | none | accent | dot | circle | disc |
Initial: | none |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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:
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.
Name: | 'font-emphasize-position' |
---|---|
Value: | before | after |
Initial: | before |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value (except for initial and inherit) |
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':
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':
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
Name: | 'font-emphasize' |
---|---|
Value: | <'font-emphasize-style'> || <'font-emphasize-position'> |
Initial: | see individual properties |
Applies to: | all elements and generated content |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | see individual properties |
This is a shorthand property for setting the style and position of the font emphasis decoration.
In addition to the specified values, all properties take the 'inherit' and 'initial' values
Name | Values | Initial | Applies to | Inh. | Percentages | Media groups |
---|---|---|---|---|---|---|
'font' | [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | see individual properties | all elements and generated content | yes | allowed on 'font-size' and 'line-height' | visual |
'font-effect' | none | emboss | engrave | outline | none | all elements and generated content | yes | N/A | visual |
'font-emphasize' | <'font-emphasize-style'> || <'font-emphasize-position'> | see individual properties | all elements and generated content | yes | N/A | visual |
'font-emphasize-position' | before | after | before | all elements and generated content | yes | N/A | visual |
'font-emphasize-style' | none | accent | dot | circle | disc | none | all elements and generated content | yes | N/A | visual |
font-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family> | none] | depends on user agent | all elements and generated content | yes | N/A | visual |
'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | medium | all elements and generated content | yes, the computed value is inherited | refer to parent element's font size | visual |
'font-size-adjust' | <number> | none | none | all elements and generated content | yes | N/A | visual |
'font-smooth' | auto | never | always | <absolute-size> | length | auto | all elements and generated content | yes | N/A | visual |
'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | normal | all elements and generated content | yes | N/A | visual |
'font-style' | normal | italic | oblique | normal | all elements and generated content | yes | N/A | visual |
'font-variant' | normal | small-caps | normal | all elements and generated content | yes | N/A | visual |
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | all elements and generated content | yes | N/A | visual |
There are 3 modules defined by this chapter:
CSS1 fonts model:
CSS2 fonts model:
CSS3 fonts model:
The CSS1 fonts module is made of the following properties/values:
Name | Values | Initial | Applies to | Inherited | Percentages | Media groups |
---|---|---|---|---|---|---|
'font' | [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> | see individual properties | all elements | yes | N/A | N/A |
font-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | depends on user agent | all elements | yes | N/A | N/A |
'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | medium | all elements | yes, the computed value is inherited | refer to parent element's font size | N/A |
'font-style' | normal | italic | oblique | normal | all elements | yes | N/A | N/A |
'font-variant' | normal | small-caps | normal | all elements | yes | N/A | N/A |
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | all elements | yes | N/A | N/A |
The following table describes the CSS2 font module. Because all properties have added the 'inherit' value and have a media type, all CSS1 properties have been specified below as well. The properties added are: 'font-stretch' and 'font-size-adjust'. Properties that applies to all elements also applies to generated content. In addition, the 'font' property has new values: caption, icon, menu, message-box, small-caption and status-bar.
Name | Values | Initial | Applies to | Inherited | Percentages | 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 | all elements | yes | N/A | visual |
font-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family> ] | inherit | depends on user agent | all elements | yes | N/A | visual |
'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | all elements | yes, the computed value is inherited | refer to parent element's font size | visual |
'font-size-adjust' | <number> | none | none | all elements | yes | N/A | visual |
'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal | all elements | yes | N/A | visual |
'font-style' | normal | italic | oblique | inherit | normal | all elements | yes | N/A | visual |
'font-variant' | normal | small-caps | inherit | normal | all elements | yes | N/A | visual |
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | all elements | yes | N/A | visual |
The CSS3 fonts module add the following properties: 'font-effect', 'font-emphasize', 'font-emphasize-position','font-emphasize-style' and 'font-smooth'. It also adds the value 'none' to the font-family' property. And all properties take the value 'initial'.
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.
Section | Comments |
---|---|
3.1 Font face selection |
|
3.2 Font family |
|
3.4 Font size, .. |
|
References |
|