The Web Designer’s Typographic Glossary

Originally created by Joshua Clanton, spiced up and wiki-fied with cross-links by Fabian Wolf ;)


A symbol denoting the word “and,” whose form is derived from the Latin “et.” (Thus “&c.” for “etc.”) It is often considered the most interesting standard character in a typeface. In addition, typographers suggest using the best available ampersand rather than the default ampersand.


A technique for smoothly rendering graphics that don’t conform to the pixel grids of most computer monitors by using pixels (or sub-pixels) of varying shades to visually “smooth” the curves. In font anti-aliasing, the result is greater readability. See also Cleartype.

Baseline rhythm

The visual rhythm set by using a standard vertical measurement for type, margins, and other visual elements, thus consistently aligning the elements’ baselines. For instance, if one were to use a 16 point rhythm, one would ensure that all elements’ vertical measurements were a multiple of 16 points. See also Leading and line-height.

Blackletter gothic

A style of script used in western Europe from about 1150-1500. It is often (though erroneously) connected with Old English. Sometimes referred to simply as gothic (a synonym for “barbaric” during the Renaissance), it should not be confused with sans-serif typefaces, which are also called gothic. See also Blackletter, gothic and sans-serif.

Boldface (or bold)

A type weight “heavier” than standard. Boldness may exist in degrees such as “semi-bold” or “black.” See also weight and font-weight.


A form of sub-pixel anti-aliasing available in Microsoft Windows since Windows XP, but only set as the default anti-aliasing method since Windows Vista. It can be enabled or disabled under the Display Properties window. See also anti-aliasing.

Elastic Layout

A form of CSS layout whose dimensions are set in ems rather than percentages or fixed units like pixels. Because the size of an em is always relative to the size of the font, increasing the font size also increases the size of the layout by a corresponding amount. Elastic layouts should not be confused with fluid layouts, which are based on percentages, and thus resize according to the available size of the browser window. See also em.


A typographic measurement equal to the point size of the current font. The name appears to be derived from the fact that in early European typography, it was approximately the same size as the width of a capital “M.” It is also a valid CSS unit. See also Elastic Layout and en.

em dash

A dash whose width is one em. It often indicates a parenthetical thought or phrase and is used much like a colon or parenthesis. Usage in the English-speaking world is divided between those who prefer to use the em dash with a space between it and surrounding words, or unspaced. Usage is also mixed between those who prefer the traditional em dash and those who prefer to use the smaller and more modern en dash. The character entity “—” can be used to display an em dash in HTML. See also em, en and en dash.


A typographic measurement equal to half the point size of the current font, or half of an em.

en dash

A dash whose width is one en. Like the em dash, it indicates a parenthetical thought and is used as a substitute for a colon or parenthesis. Usage is mixed between those who prefer the traditional em dash and those who prefer to use the smaller and more modern en dash. The character entity “–” can be used to display an en dash in HTML. See also em, em dash, and en.


A CSS property which controls the font a body of text will be displayed in. Because not every computer has every font available, the values given to it should be a list of font names in order of preference, for instance:

font-family: Helvetica, Arial, Verdana;


A CSS property controlling the typographic weight of the font. In addition to the keywords “normal” and “bold,” it also accepts the lesser-known keywords “lighter” and “bolder.” Numeric values are also possible: 100, 200, 300, 400, 500, 600, 700, 800, 900. The number “400″ is equal to “normal,” and “700″ is equal to “bold.” The usefulness of these values depends on the weights available in the typeface specified as well as the web browser’s support of the additional weights.


A synonym for sans-serif, as well as another name for blackletter script. See also sans-serif and blackletter gothic.


The most common forms of indentation are normal (indented first line) and hanging (all lines indented except the first line). Indentation is often used in print to indicate a new paragraph, though this style is less common online. See text-indent.


A form of typeface based on calligraphic writing which usually slants to the right. Though the term is often used to refer to typefaces which are slanted but not based on calligraphy, these are more correctly referred to as oblique. Italic letterforms are often quite distinct from the corresponding Roman even if the slant is discounted. See also oblique and Roman type.


The alignment of a body of text to the sides of its measure. Text may be justified to both sides (”full justification”), or only to one side (”left justification” and “right justification”.) Full justification is achieved by adding space between words and characters, as well as using hyphenation to break words across multiple lines. See text-align.


The process of adjusting the spacing between a pair of letters to achieve an optimal appearance. Kerning is usually necessary because of the appearance of excessive space between two characters because of their shape. For instance, if a capital “A” and capital “W” were simply set next to each other, there would appear to be too much space between them. Most modern fonts and computer programs include some automatic kerning, but if one is working at sizes outside the typical range (for example, in large titles), manual kerning is often necessary. See also kerning pair.

Kerning Pair

A pair of characters to be kerned. Also the data regarding how to kern such a pair. See also Kerning.


The process of adding vertical space between lines of text, as well as the measurement of that space. The term is derived from the practice of inserting actual strips of lead between lines of type in printing presses. A good rule of thumb is to have at least 1/2 the font height added as leading. See also line-height.


A CSS property which controls the space between characters in the affected area. It is the equivalent of the typographic term “tracking.” See also tracking.


A special glyph which combines two letters into one symbol. Common ligatures are the pairs “Æ,” “æ,” “Œ,” etc. Design programs such as Photoshop and Illustrator have ligature controls built in.


A CSS property which controls the amount of space taken up by a line of text. In practical terms it is the CSS equivalent of leading, but with some important differences. Leading measures the space between lines, whereas line-height controls the height of an individual line as a whole. This means that to add leading of 0.5 ems to a line, one should specify a height of 1.5ems. A further consequence of this method is the fact that any height greater than the font height is added equally to the top and bottom of the line. Extending the previous example, the line would have 0.25 ems of space added both above and below. See also leading.


The width of a column of text. Measures that are either too narrow or too wide are hard to read. A good rule of thumb is to use 2-3 “alphabets” of width (or 52-78 characters). As the measure increases, it is often helpful to increase leading correspondingly. See also leading.

Monospaced font

A font whose characters all occupy the same amount of horizontal space, regardless of whether the character is a “W” or an “i.” While programmers find them helpful because of the ease with which monospaced fonts can display well organized code, they should generally be avoided for ordinary text. See also proportionally spaced font.


A typeface that is slanted to the right and often confused with italics, though it is not based in any other way on calligraphy. See also italic.


A common typographic measurement equal to 1/6 of an inch. See also point.


A common typographic measurement equal to 1/72 of an inch. See also pica.

Proportionally spaced font

A font whose characters occupy varying amounts of space depending on their optical width. For instance, in a proportionally spaced font, a “W” takes up more space than an “i.” See also monospaced font.

Roman type

most typographical usage, the “normal” counterpart of italic or oblique typefaces. Less commonly, a term indicating seriffed type. See also italic, oblique and serif.

Screen fonts

Fonts designed for use on computer screens or other screen displays. Because of the low resolution of most computer displays (72 or 92 dpi) compared to print (300+ dpi), many fonts which are excellent in print lose important details when displayed on-screen, often appearing blurry or otherwise more difficult to read. Screen fonts are designed to work with the comparatively smaller pixel grid available on-screen. See also anti-aliasing.


A typeface which does not make use of serifs. Well known sans-serif fonts include Helvetica, Arial and Verdana. See also serif.


The non-structural details often found on the end of strokes in the letters of some typefaces. It is commonly believed that serifs aid legibility by leading the eye from one letterform to another. However, because of the low resolution of most computer screens, this is not believed to be true of on-screen text. Well known serif fonts include Times New Roman, Garamond and Georgia. See also sans-serif, screen fonts.


A CSS property controlling the alignment or justification of text. Possible values include “left,” “right,” “center,” and “justify.” See also justification.


A CSS property controlling the indentation of text. Values may be given in any valid CSS unit. It also accepts negative values, and is often used as a way to hide text in CSS image replacement techniques.


The amount of horizontal space between characters in a body of text, as well as the process of adjusting that space. Should not be confused with kerning, which only affects pairs of letters; or leading, which is the vertical space between lines. Ideally, tracking should aid in the recognition of individual characters, but not leave so much space between them that identifying entire words becomes difficult. Additional tracking is often especially helpful in the case of all-caps or small-caps text.

Web fonts

The collection of fonts which are considered “safe” for web use. Because the display of fonts on the web largely depends on the viewer’s font collection, it is a best practice to use fonts which are already installed on a large percentage of viewer’s computers. Unfortunately, good statistics on font installation is hard to find. As a consequence of this, as well as the fact that designers disagree about the percentages that make a font “safe,” there is no definitive list of web safe fonts. However, Times/Times New Roman, Helvetica/Arial, and Verdana are generally considered among the safest. See also font-family.


Refers to the the “boldness” or “lightness” of any given typeface. For instance, semibold is a typographical weight.


A CSS property which controls the spacing between the words in a body of text. Accepts values in any valid CSS unit.


The distance between the baseline of a font and the meanline, which represents the height of a typical lowercase letter. Thus the x-height of a font is typically the same as the height of a lowercase x.

Other resources

dev/typographic_glossary.txt · Zuletzt geändert: 22.02.2010 03:46 (Externe Bearbeitung)