Typography | CSS: Presentation Layer

Standards Based Development

Typography exists to honor content.

Robert Bringhurst

We should welcome typographic variety as the natural consequence of human creativity.

Sebastian Carter

Six Categories of Type

  1. Old English: also called Fraktur or Black Letter Fonts; represented by characters containing multiple strokes.
  2. Serif type is defined by an extra horizontal stroke on each letter. Three subcategories:
    1. Old Style
    2. Modern
    3. Transitional
  3. Serifs are commonly combined with sans-serifs, where the Serif type is much larger, over running the text (sans-serif)
    1. Old Style Serifs have a sloping, rounded shape, where each letter stroke has the same weight, providing each letter with a uniform look. Old Style Serifs are commonly used in book publishing.
    2. Modern Serifs have contrasting thin/thick letter strokes which are more thick vertically than horizontally. Modern Serif letters have a much heavier weight than old style typefaces.
    3. Transitional Serifs combine Old Style and Modern typefaces. Each letter contains the sharp horizontal stroke from each letter as well as varying stroke widths.
    4. Slab Serifs, also known as square serifs, are characterized by a uniform stroke with solid, square-edged serifs. Slab Serif letters tend to be thick and as such typically work best when only a few letters are used.
    5. Sans Serif typefaces have no serifs and have uniform stroke widths.
  4. Script typefaces are designed to imitate handwriting. In true script fonts, each of the letters is connected. In the cursive variant (which is commonly classified as script), the letters have long tails but do not actually touch.
  5. Novelty typefaces are the rest of the typefaces grouped into a single category, identified by their lack of other characteristics. Novelty typefaces are typically named Decorative, Grunge, Artistic and Ornamental.

Typeface Classifications

Blackletter

A script style of calligraphy made with a broad-nibbed pen using vertical, curved and angled strokes. Popular from the Middle Ages through the Renaissance (and up to the 20th Century mainly in Germany). Styles are often associated with certain countries or regions.

Subclasses

  • Fraktur
  • Old English
  • Rotunda
  • Schwabacher
  • Textura

Calligraphic

Typefaces based on letters made with a broad-nibbed pen.

Subclasses

  • Chancery
  • Etruscan

Gaelic

TK.

Subclasses

  • Angular
  • Uncial

Inscriptional

Typefaces modeled after or inspired by letters carved in stone. Classic example: Albertus.

Subclasses

  • Roman Inscriptional

Non-Alphanumeric

Typefaces which contain pictures or symbols rather than letters and numbers.

Subclasses

  • Dingbats
  • Ornaments
  • Pictorial

Ornamented, Novelty

Typefaces with an ornate or whimsical appearance, or which simulate non-typographical forms. Classic examples: Rustic, Moore Liberty.

Subclasses

  • Art Deco
  • Art Nouveau
  • Comic Strip Lettering
  • Dot Matrix
  • Futuristic
  • Machine Readable
  • Pixel
  • Pseudo Foreign Script
  • Victorian

Sans-Serif

A typeface without serifs.

Subclasses

  • Gothic
  • Grotesque
  • Geometric Sans (Futura)
  • Grotesk
  • Humanist Sans (Gill Sans)
  • Monoline (Akzidenz Grotesk)
  • Neo Grotesque (Helvetica)
  • Rounded (Frankfurter)
  • Square Gothic
  • Swiss Gothic

Script

Typefaces based on letters made with a flexible pen or brush, or derivative forms.

Subclasses

  • Brush Script
  • Casual Script
  • English Roundhand
  • French Roundhand
  • Handwriting
  • Rationalized Script

Serif

A typeface with serifs; there are two types:

unilateral serifs
break from the stem in only one direction
bilateral serifs
break from the stem in two directions. most common.

Subclasses

  • Grecian
  • Latin
  • Modern
  • Didone
  • Scotch Modern
  • Old Style
  • Antique
  • Dutch Old Style
  • French Old Style
  • Spanish Old Style
  • Venetian Old Style
  • Slab Serif
  • Clarendon
  • Egyptian
  • French Clarendon
  • Geometric Serif
  • Spur Serif
  • Transitional
  • Scotch Roman
  • Tuscan

Typeface Classifications

Monospace

Monospace fonts (like Courier or LetterGothic), or "fixed pitch" fonts, contain characters that all have the same character width, producing text that can be used to create forms, tabular material or documents that require exact text line lengths. An example of a fixed pitch font is Courier 12 pitch, which is a 10 point font that will print at exactly 12 characters per inch.

Monospaced fonts are used primarily because the text aligns more readily.

Monospace/Fixed Width Programmer's Fonts

Adobe Garamond Pro Font Example

Five Core Typeface Font Groups

Geometric Sans

Humanist Sans

Old Style

Transitional and Modern

Slab Serifs

Typeface or Font?

A typeface is the design of the letterforms; a font is the delivery mechanism. In digital systems, the typeface is the visual design, while the font is the software that allows you to install, access, and output the design. A single typeface might be available in several font formats.

A typeface means a style of lettering that can be used in many different typesetting systems. A font (today) means a digital implementation of a typeface.

Character or Glyph?

Characters are distinguished from glyphs for Unicode compliance; only a symbol with a unique function is considered a character, and thus assigned a code point in Unicode. A single character, such as a lowercase a, can be embodied by several different glyphs (a, a, a), where each glyph is a specific expression of a given character.

Type Anatomy

Terminal Types

The most sensible terminal is the tail.

The part of a "C" before it hits the arm is a terminal.

The part of a "S" after the spine and before it hits an arm is a terminal.

The ear on a "g" is a terminal.

A swash is a terminal.

A loop, as that which wraps round the counter of a Baskerville "g", is a terminal.

A link, as that which joins the two parts of a "g", is sometimes a terminal.

The curved bit at the bottom of letters like "y" and "j", or the top of an "a", is a terminal. In Times, and other serif faces, all three of these tend to end in what is called a tail dot, so lets look at the curved bit at the bottom of the "y" and "j", as well as the top of "a" again.

The curved bit leading into and out of an italic letter, like "n", is called a pothook, or a hooked foot and is also a terminal.

Dashes

The em dash is also used to end a sentence mid-thought without usual punctuation, in dialogue, a similar effect as an ellipsis, although again it implies a stronger break in thought. When citing the author of a quote, use the em dash between the quote and the name of the author. It is also occasionally used in lieu of quotation marks to mark the beginning of quoted text, but this is an archaic method.

en dash is used more broadly: for a range of values (or similiar) use en dash (instead of a hyphen) to connect the two. Good for range of dates, series of pages, etc.> En dash should also be used for showing relationships (mother–daughter), as well as in demonstrating contrast in a (range) showing a game score, like 2–nil, or 122-109, etc.

figure dash: correct usage is in a series of numbers, like a phone number.

Hyphen

Hyphens are not true dashes; dashes are completely horizontal, while hyphens typically have a slight angle, mimicing the stroke of a pen by a right-handed writer. Use hyphens for compound words, like "Wife-Beater"; Hyphens are also used to connect words for clarity, like "The Purple People-Eaters" instead of "The Purple People Eaters". Hyphens should also be used when words split at the end of a line.

Minus Sign

Minus signs are not true dashes either; a minus sign is used only in mathematics; it's longer than a hyphen, closer in length to the en dash. Minus signs have to inserted from the character set manually, so most often a hyphen or en dash is used to substitute.

Quotes

Quotes should always point inwards;

One common method of introducing a quote is utilizing a padded en dash, or if you're feeling really crazy, occasionally an em dash, at the beginning of a line.

Apostrophe is essentially a closing single quote that always points to the left.

Ligatures

Most ligatures are intended to improve legibility by combining not ideal character combinations into a single glyph (e.g. fi, ffl, or Th), and actually improving the flow of the text. But there are some that do not fall under this definition because they do not have a place in body text; these are called discretionary ligatures (e.g. ct and st). These disrupt reading flow and are more of a distraction than an aid.

Discretionary Ligatures are best used for headers (like serif, duh), where they will disrupt the reader's flow, in the sense that you want it to...to catch their eye(s)/appeal/interest/etc. and draw them in, to read your article.

A few characters may appear to be ligatures but are actually a unique character, like æ or œ; these deceptive characters most likely originated as a ligature.

Note: the Latin "W" was born into this world as a ligature, as a combinations of two Vs, but today we recognize it as a unique character and would not use it to replace two Vs or two Us occuring together in a word.

Dashes, Quotes, and Ligatures: Typographic Best Practices

References and Resources