Typography 101

Introduction

This is my first article touching on the basics of typography.  I recently read the book “Thinking with Type” by Ellen Lupton.  This critical guide walks through all aspects of type layout and structure and is an excellent resource for anyone wishing to know more about type.

In the Beginning…

(Johannes ) Gutenberg, a goldsmith by profession, developed a complete printing system in approximately 1436, which perfected the printing process through all its stages by adapting existing technologies to printing purposes, as well as making ground-breaking inventions of his own.

Gutenberg’s printing press is a mechanical device for applying pressure to an inked surface resting upon a print medium (such as paper or cloth), thereby transferring an image, typically a text. The invention and spread of the printing press is widely regarded as the most influential event in the second millennium.

Typesetting

Typesetting is the retrieval of the stored letters (called sorts in mechanical systems and glyphs in digital systems) and the ordering of them according to a language’s orthography for visual display.  The traditional storage of fonts in two cases, one for majuscules and one for minuscules, yielded the terms “uppercase” and “lowercase” still used today.

Terms

TYPEFACE is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. A typeface usually comprises an alphabet  of letters, numerals, and punctuation  marks.

FONT is traditionally defined as a complete character set of a single size and style of a particular typeface. For example, the set of all characters for 9-point Bulmer italic  is a font, and the 10-point size would be a separate font, as would the 9-point upright.  After the introduction of computer fonts based on fully scalable outlines, a broader definition evolved. Font is no longer size-specific, but still refers to a single style. Bulmer regular, Bulmer italic, Bulmer bold and Bulmer bold italic are four fonts, but one typeface.

GLYPH is a property of a typeface. It is a particular graphical representation, in a particular typeface, of an element of written language.

LIGATURE occurs where two or more graphemes  are joined as a single glyph.  They are usually used to head off the unattractive collision of adjoining characters.

A WIDOW is a paragraph-ending line that falls at the beginning of the following page/column, thus separated from the remainder of the text.

An ORPHAN is a paragraph-opening line that appears by itself at the bottom of a page/column.
A word, part of a word, or very short line that appears by itself at the end of a paragraph. Orphans result in too much white space between paragraphs or at the bottom of a page.

Anatomy

The CAP HEIGHT is the distance from the top of the capital letter to its bottom. Some vertical elements (ascenders) may extend slightly above the cap height.

The X-HEIGHT is the height of the main body of the lowercase letter (or the height of a lowercase x ), excluding its ascenders and descenders. The bigger the x-height is in relation to the cap height, the bigger the letters will look.

The BASELINE is the most stable axis along a line of text. The curves at the bottom of letters such as a or c hang slightly below the baseline. Commas and semicolons also cross the baseline. If a typeface were not positioned this way, it would appear to teeter precariously, lacking a sense of physical grounding.
Layout

KERNING refers to adjusting the space between two letters. If letters in a typeface are spaced too uniformly, they make a pattern that doesn’t look uniform enough. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L).

TRACKING is adjusting the spacing across a word, line, or column of text is called tracking, also known as letterspacing.

LEADING is the vertical space of an individual line of text.  It is the space between two consecutive text or, in other words, the distance between the baselines of two lines of text.  To prevent descenders on one line from overlapping the ascenders on the next, giving generous leading is often necessary.
Size

HEIGHT – The point system is used to measure the height of a letter as well as the space between lines (leading).  It is the standard measurement for type.

WIDTH – The horizontal dimension of a letter is its set width. The set width is the body of the letter plus a sliver of space that protects it from other letters.

EM – Web designers can specify type sizes in percentages of an em. An em is the width of the cap height. Ems can be used in CSS to create typographic systems that enable users to adjust overall type size while retaining the relationships within the system.

X-HEIGHT – When two typefaces are set in the same point size, one often looks bigger than the other.  Differences in x-height, line weight, and character width affect the letters’ apparent scale.

Classification

A basic system for classifying typefaces was devised in the nineteenth century, when printers sought to identify a heritage for their own craft analogous to that of art history.
HUMANIST letterforms are closely connected to calligraphy and the movement of the hand. TRANSITIONAL AND MODERN typefaces are more abstract and less organic.
These three main groups correspond roughly to the Renaissance, Baroque, and Enlightenment periods in art and literature. Designers in the twentieth and twenty-first centuries have continued to create new typefaces based on historic characteristics.

Serif Fonts

HUMANIST OR OLD STYLE – The roman typefaces of the fifteenth and sixteenth centuries emulated classical calligraphy.  TRANSITIONAL – These typefaces have sharper serifs and a more vertical axis than humanist letters.  MODERN – The typefaces designed by Giambattista Bodoni in the late eighteenth and early nineteenth centuries are radically abstract. Note the thin, straight serifs; vertical axis; and sharp contrast from thick to thin strokes.   EGYPTIAN OR SLAB SERIF – Numerous bold and decorative typefaces were introduced in the nineteenth century for use in advertising.

Sans-serif Fonts

HUMANIST SANS SERIF – Sans-serif typefaces became common in the twentieth century. Note the small, lilting counter in the letter a , and the calligraphic variations in line weight.  TRANSITIONAL OR ANONYMOUS SANS SERIF – Uniform, upright characters makes it similar to transitional serif letters. These fonts are also referred to as “anonymous sans serif.”   GEOMETRIC SANS SERIF – Some sans-serif types are built around geometric forms.

Print vs. Screen Fonts

A computer screen displays fonts in pixels.  Type on the Web can be specified in numerous different units of measurement, including points, pixels, or ems.
While the Mac OS displays 72 pixels per inch, the default for PCs is 96.  To guarantee uniform presentation across platforms, some Mac web browsers such as Safari, Firefox, Mozilla and Internet Explorer assume the display is 96 pixels per inch.  They differ, however, in how they round off fractions when converting point values to pixels.

ANTIALIASING is a technique for making the edges of letters look smooth on screen by rendering some pixels in shades of gray. Antialiasing is generally helpful for presenting text on screen at large sizes (12 pixels and higher), but it can make small text difficult to read. Some designers prefer to use bitmap fonts, which are designed to be displayed without antialiasing, for small text on screen.

BITMAP FONTS are built out of the pixels (picture elements) that structure a screen display. Whereas a PostScript letter consists of a vectorized outline, a bitmap character contains a fixed number of rectilinear units. A bitmap font is designed to be used on screen at a specific size, such as 8 pixels, because its body is precisely constructed out of screen units