The Elements of Typography

The Anatomy of Type

The Anatomy of Type

• Baseline: The invisible line where letters sit

The Anatomy of Type

• X-height: the height of the main body of a lower case letter

The Anatomy of Type

• Cap height: the height from the baseline to the top of the upper case letters

The Anatomy of Type

• Ascenders: an upward vertical stroke of lower case letters that extends above the x-height

• Descenders: the portion of lower case letters that extends below the base line

The Anatomy of Type

• Ascender line: the invisible line marking the height of ascenders in the font

The Anatomy of Type

• Descender Line: the invisible line marking the lowest point of the descenders within a font

The Anatomy of Type

• Crossbar: A horizontal stroke in letters such as A or H

The Anatomy of Type

• Tittle: a small round mark used with a lower case i or j

The Anatomy of Type

• Stem: the vertical, full-length stroke in upright characters

• Stroke: a straight or curved diagonal line

The Anatomy of Type

• Counter: the enclosed or partially enclosed circular or curved negative space of some letters such as d, o, and s

• Eye: specific to the letter e

The Anatomy of Type

• Serif: a slight projection finishing off a stroke of a letter such as T compared with T

• Sans Serif: a style of type without serifs

Testing 1, 2, 3

Is this font considered a serif or sans-serif font?

How about this one?

And this one?

…And this one?

The Optics of Type

• The spacing of letters in words, sentences, and paragraphs is vital to create a uniform reading experience with minimal distractions

• Remember, type must always be LEGIBLE!

S pa c i n g

• Each typeface has a distinct rhythm of strokes and spacing

• You don’t want your spacing to be too condensed, otherwise it is extremely difficult to read!

• This typeface is too loose, and can also become a distracti on to readers.

• This spacing is just right. It is logical and easy to read

Types of typefaces

• All licensed, commercial typefaces are available in a number of styles and weights: usually roman (aka plain or book), italic (sometimes called oblique), bold, and bold italic

• This is known as a type family • Remember that these fonts are different from

using the bold and italic controls on word processing programs

Why Type Matters

• Typography sets the mood of a piece• Flowing, curved type gives off a softer feeling

than angular, hard edged type• Elegant type gives off a sense of sophistication

Why Type Matters

• Which typeface is the most appropriate for each word below?

Things to Consider when Choosing Type

• Which font will best communicate the message of your design? Does your font harmonize with the other pieces of the design, or does it detract from them?

• Would using two or more different fonts be more effective in conveying your message than one? (i.e. sans-serif and serif)

• How large should your font be to best convey the idea of your design?

Things to Consider when Choosing Type

• Is the type placed properly in the design so as to have the most impact on the viewer? Are the shapes of the letters pleasing or unattractive?

• Should your font be one that will hold up over time (classic) or should it be more current and trendy?