CSS font stacks, media style sheets & web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
Top Canadian Hotels no booking fees from Victoria BC to Nova Scotia
This is a glossary of terms used in the Web font sampler subsection. If you cannot find the term you are seeking here, please use the feedback form below to request a definition.
The upper part of a lowercase letter that extends above the ex height, as with b, d, f, h, k, l, and t.
See also, descender.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The apparent line between the thinnest points on the upper and lower parts of a font that has contrast; strongly indicated on the letter o.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
See Transitional.
Bracketed serifs have a curved fill between the main strokes of a letter and the serif. Examples include Times New Roman.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A form of Slab Serif with brackets whose main strokes are heavy, with slightly finer serifs.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
Font variants which are narrower than standard forms and typically set closer together.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The degree of difference in the thickness of strokes in a font, especially on a curved stroke. Sans serif fonts typically have little or no contrast, serif and cursive fonts usually have higher contrast.
See also axis and transition.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
cursive
Cursive font styles emulate handwritten letter forms and typically have strong contrast, as if written with a broad nib pen, and are usually inclined to the right.
In CSS terms, cursive is also a generic font-family category that includes cursive or script style fonts and should be used as a "fall back" after a series of named fonts:
p.Signature{
font-family: "Comic Sans MS"
"Brush Script MT"
cursive;
}
See the Code Style cursive font sampler for a guide to common fonts in this category by platform.
Cursive class fonts are not recommended for extended body text.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The lower part of a lowercase letter that extends beneath the base line of a font, as with g, j, p, q and y.
See also, ascender.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A heavy style of Slab Serif where the serifs are as thick as the main strokes.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A type measure that is half the width of an em unit, nominally based on the width of the letter n.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A unit of measure that is synonymous with the font size, the default font size in a Web browser. When the default font size in a Web browser is 16 pixels, one em equals 16px. Most Web browsers allow users to adjust the standard font size, so the length of the em unit scales accordingly and is regarded as a proportional length unit.
Conceptually, the em represents a box overlaid on a single font character or glyph, but it is not a bounding box. By convention the em square contains the main body of a glyph, but some strokes may extend beyond, especially those with swashes for example.
In digital type the em square is like an empty picture frame viewed at arm's length in front of a glyph; the main body of the glyph is seen inside the frame, but some of it may show outside the frame.
Within a digital font the em frame is composed of a 2048 unit square of FUnits, which is standard to all fonts. The area that a font outline occupies relative to that grid deterimines the fineness with which the strokes are defined and the relative scale of the font. Thus two font faces set at the same font size may have different glyph height, on equivalent character glyphs.
The em is the unit by which rendering devices such as Web browsers adjust the scale of a font. If a browser's default font size is 16 pixels, the 2048 FUnits in a font are scaled to that size, if the font size is 100 pixels the 2048 FUnits are distributed accordingly.
The em size is used to measure the vertical proportion of a font in relation to its ex height, strongly indicated on the lower case letters b, d, h and k.
p {
line-height: 2em;
}
Thanks to Richard Mason for his feedback on this definition, see The em square.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A unit of measure for fonts that is the length between the top and bottom of the lower case letter x. This measure is independent of the scale at which the font is reproduced and may be used to describe the vertical proportion of a font in relation to its em height, strongly indicated on the lower case letters b, d, h and k.
Ex can be used as a proportional unit of length in CSS, but this is not reliably implemented in some Web browsers and generally percentage or em units are more advisable:
p {
margin-left: 1ex;
}
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A font variant whose letters are wider and more broadly spaced than the standard font, cf. condensed.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
fantasy
In CSS terms, a generic font-family category that includes decorative or display fonts and should be used as a "fall back" after a series of named fonts:
h1.PosterHead{
font-family: Algerian
"Lucida Grande"
fantasy;
}
See the Code Style fantasy font sampler for a guide to common fonts in this category by platform.
Fantasy class fonts are not recommended for low scale body text.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An historical classification of old style fonts that have wedge serifs on minuscules, bracket serifs on the main strokes, a left-inclined axis but greater contrast than Venetian style fonts. Examples include Garamond and Palatino.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An alternative term for sans serif type faces, which were considered ugly when first used from the 1850s. The American term "Gothic" is also used to describe Grotesque faces.
The term gothic suggests a geometric design like Avant Garde, Futura or Century Gothic, where the rounded strokes on o, b, d, p and q are almost perfect circles and all strokes are constant width.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
Hair serifs have a very fine, "hairline" stroke weight.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The small letters or minuscules of a font.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An alternative term for capitals, upper case letters or "caps".
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The lower case form of a letter.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An historical classification of 17th and 18th century font styles that are characterised by horizontal non-bracketed hair serifs, a precise upright style with no inclination to the axis (i.e. vertical stress), relatively strong contrast with short transitions. Examples include Didot, Bodoni, Bell, Century.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
Arabic style numerals that have the same vertical height and position as the capitals in a font, as opposed to old style or non-lining numerals that descend beneath the base line of the font.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A cursive font style or variant that is usually inclined to the right and often used for emphasis or to stress specific words. A font style specified by the CSS declaration font-style: italic and commonly attached to the HTML elements <em> and <i> by default.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
monospace
In CSS terms, monospace is a generic font-family category that includes fixed width or typewriter style fonts and should be used as a "fall back" after a series of named fonts:
pre {
font-family: "Courier New"
Courier
monospace;
}
Monospace class fonts are typically used to represent code samples, but are quite readable as body text.
See the Code Style monospace font sampler for a guide to common fonts in this category by platform.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An historical classification of Renaissance period "Romanesque" font styles that includes sub-classes Venetian and Garalde. These fonts are characterised by wedge serifs on minuscules, bracket serifs on the main strokes and a left-inclined, or oblique, axis. Old style fonts have lower contrast between the thick and thin strokes than modern faces. Examples include Bembo, Janson and Garamond.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
In traditional typesetting terms, the "normal", "regular", non-bold form of a font, but also a generic term for "Romanesque" type faces.
In CSS terms the Roman style is declared by font-weight: normal;, which is the standard vertical form of a font, in contrast to a bold or italic variant.
Roman weight is also known as Book, Regular or Medium.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
sans-serif, Grotesque, Gothic, Lineale
Sans serif font styles have no serifs and generally have minimal contrast, their strokes are very even and sometimes heavy. Sans serif have a "clean", minimalist appearance and include variant sub-types:
For CSS, sans-serif is also a generic font-family value and should be used as a "fall back" after a series of named fonts:
h1 {
font-family: sans-serif;
}
blockquote {
font-family: "Avant Garde",
"Century Gothic",
sans-serif;
}
See the Code Style sans serif font sampler for a guide to common fonts in this category by platform.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A form of cursive font that is typically inclined to the right, giving the appearance of flowing, hand written lettering with flourishes.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
serif, Serif font
Serif font styles are named after the small decorative strokes that cross the ends of the main letter strokes, called serifs. There are several historic classifications for serif fonts, which are distinguished by their stroke weight, shape and attachment to the main strokes of a letter. See Old Style, Venetian, Garalde, Transitional, Modern and Slab Serif.
Serif types are also characterised by the form of the serif they take, which fall into four broad categories: bracketed, hairline, wedge and slab serifs.
In CSS terms, serif is also a generic font-family value and should be used as a "fall back" after a series of named fonts:
h1 {
font-family: serif;
}
blockquote {
font-family: Times,
"Times New Roman",
serif;
}
See the Code Style serif font sampler for a guide to common fonts in this category by platform.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A term used by Hermann Zapf to describe fonts with strokes which widen towards the end without distinct serifs.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
Slab serifs, or Egyptian serifs, have visually square serifs such that the thickness of the serif is about equal to its extension from the main stroke. Slab serif fonts generally have regular geometric shapes with no brackets, but include variant sub-types: Clarendons, which have brackets; and Typewriter, which also have an even weight to their main strokes and whose characters are fixed width. Examples of the latter include Courier New and Typewriter.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The direction and degree of incline in the axis of a font with contrast.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
Extended strokes that extend far beyond the normal vertical and horizontal extent of a character, common amongst cursive and fantasy fonts.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
The "gradient" between the thin and thick part of the curved strokes of a font that has contrast, i.e. how sharply the strokes cut away from thick to thin. The gradient is not the same as the axis of a font, but is obviously affected by the degree of contrast.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An historic classification of post-Renaissance period font styles characterised by a sloping top and horizontal bottom to serifs on minuscules, flat non-bracketed serifs on main strokes, little or no inclination to the axis and greater contrast than Garalde faces. Examples include Baskerville and Times.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
A form of slab serif font that has a fixed width and an even weight to the strokes and serifs.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
An historic classification of old style fonts that have wedge serifs on minuscule, bracket serifs on the main letter strokes, a left-inclined axis, minimal contrast, and upwards sloping cross-strokes on the letter e.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
Wedge serifs have a straight angular fill between the main stroke and the serif.
Actions: Follow-up, clarify or correct this definition. Submit a new term.
font-weight, font weight
Font faces may be produced with a range of font weights which are distinguished by the relative width of their strokes. Normal, book or Roman weight is the standard medium weight used for standard copy. Bold weight fonts have thicker strokes and are typically used to highlight or emphasise phrases or important blocks of copy. Bold may also be combined with italic for a bold italic style.
Professional font families are produced in a range of font weights from light faces that have finer strokes than normal through to heavy weights that have wider strokes. The weight of a font face therby affects the apparent colour of the type such that bold faces are called black.
CSS font weights are declared with the font-weight property using a set of keywords or numeric weight values. The bold keyword represents the standard bold weight, there is not an inverse "light" keyword. The numeric values are set in increments of 100 where 400 is equivalent to normal weight and 700 is bold. The bolder and lighter keywords adjust the inherited font weight value on this incremental scale.
Most Web browsers set HTML headings, b and strong markup in bold by default. Most consumer font faces lack lighter and intermediate font weights so incremental values are likely to be adjusted to the nearest approximate weight.
p.Important {
font-weight: bold;
}
blockquote {
font-weight: 900;
}
h1 code {
font-weight: lighter;
}
Actions: Follow-up, clarify or correct this definition. Submit a new term.
See ex.
This glossary is partly derived from History of Typeface by Matthias Neuber and Morten K. Pedersen, The Thames and Hudson Dictionary of Graphic Design and Designers, and other sources.
