2. Objectives Gain knowledge of anatomy and nomenclature
Learn type classifications
Pick up the basic principles of designing with type
Learn about typeface pairings
Consider spacing
Become familiar with Web type basics
Learn about expressive typography

3. Definitions
Typography is the design of letterforms and the arrangement of them in two-dimensional space (for print and screen-based media) and in space and time (for motion and interactive media).
Display type functions as a dominant typographic component and is usually large or bold—functioning as titles and subtitles, headlines and subheadlines, headings and subheadings.
Text type is the main body of written content, usually in the form of paragraphs, columns, or captions.
A letterform is the particular style and form of each individual letter of our alphabet.

4. Definitions
A typeface is the design of a single set of letterforms, numerals, and signs unified by consistent visual properties. These properties create the essential character, which remains recognizable even if the face is modified by design.
A type font is a complete set of letterforms, numerals, and signs, in a particular face, size, and style, that is required for written communication.
A type family is several font designs contributing a range of style variations based upon a single typeface design.
A type style is a collection of modifications to a typeface that create design variety while retaining the essential visual character of the face.
A serif is a small element added to the upper or lower end of the main stroke of a letterform.
A sans serif is a typeface with no serifs.

5. Nomenclature and Anatomy
Today, almost all type is produced digitally or is handmade; however, most type terminology is based on the earlier process, when type was cast in relief on a three-dimensional piece of metal, which was then inked and printed.
In print, the traditional system of typographic measurement utilizes two basic units: the point (height) and the pica (width).
For the screen, you can specify type measurement using points, pixels, percentages, or em units.

6. Nomenclature and Anatomy
Metal Type Terms
Martin Holloway Graphic Design,
Pittstown, NJ

7. Classifications of Type
Although numerous typefaces are available today, there are some major classification categories, by style and history, into which most fall. Please note these classifications are not hard and fast but vary among type historians. Some classifications of type are:
Old Style or Humanist
Sans Serif
Transitional
Blackletter
Modern
Script
Slab Serif
Display

8. Classifications of Type
Typeface Classification Examples
Martin Holloway Graphic Design,
Pittstown, NJ

9. Classifications of Type
Chart by Martin Holloway Graphic Design

10. Designing with Type
Type is form and should be evaluated based on aesthetic criteria of shape, proportion, and balance.
Type communicates on a denotative (direct meaning) and connotative level (suggested or additional meaning).
It must be thoughtfully integrated with visuals.
Type should be readable.
Margins present text type and need to be respected.
Transitions between letters, words, and paragraphs are critical. Spacing can make or break communication.
Type Classifications: Single Letters

11. Type as Shapes
Each letterform is made up of positive and negative shapes.
The strokes of the letterform are the positive shapes (also called forms), and the spatial areas created and shaped by the letterform are the negative shapes (or counterforms).
The term counterform includes counters, the shapes defined within the forms, as well as the negative shapes created between adjacent letterforms.
The negative shapes are as important as the positive shapes.
CE Software: Logo
© Muller Bressler Brown,
Kansas City, MO

12. Selecting a Typeface
Is it display or text or both? Is it for print or screen?
Will you be dealing with small, medium, or large amounts of text?
To narrow down choices, select a typeface based on suitability for the purpose: editorial versus promotional versus branding.
Consider the voice of the typeface, the emotional tone, which is expressed by the particular characteristics of the letterforms and type classification.
Notice the x-height of a typeface. A substantial or large x-height aids readability, especially on screen.
Notice the counter shapes of a typeface to help judge the aesthetics of the forms.
Check legibility: set sample titles, headlines, subheadlines, and/or paragraphs in the typeface or review available text samples from online foundries and retailers.
If selecting web type, use to see web fonts on any website.

13. Selecting a Typeface
Check to see if the font is well spaced (font tracking).
Check readability. Try reading it and see how easy or hard it is to read on paper or different screen sizes.
Substrate or Screen: Check samples of the typeface on different weights of paper as well as on coated versus uncoated. Check how a typeface looks across browsers.
Make sure the font has a sufficient character set and can support your needs (multiple languages, bold, oblique, italics, glyphs, etc.).
See if the typeface is versatile.
Read reviews of the typeface and font.
For flexibility and unity, consider employing a type family.
Ensure sufficient value contrast between the typeface and the background.

14. Design Concept
Often, beginning students (and almost all nondesigners) choose typefaces for their novelty appeal rather than select a suitable typeface to express the design concept.
Be aware of what a typeface connotes, of its history and classification.
Choosing a typeface associated with a time period or style, carries historical and aesthetic meaning, even if you aren’t aware of it.
Werner Herzog Retrospective: Poster Series
© Mendedesign, San Francisco, CA

15. Readability and Legibility
Typefaces that are too light or too heavy may be difficult to read, especially in smaller sizes.
Typefaces with too much thick–thin contrast may be difficult to read if they are set very small.
Condensed or expanded letters are more difficult to read (especially in small sizes).
Text type set in all capitals is difficult to read. Opinions differ on whether all caps enhance or diminish readability for display type.
Greater value contrast between type and background increases readability.
Highly saturated colors may interfere with readability.
People tend to read darker colors first.

16. Aesthetics and Impact
Creating or selecting a typeface for its aesthetic value and the impact it will have on screen or in print is as important as creating or selecting an image.
Every characteristic of a typeface contributes to communication.
Each typeface should be evaluated for its characteristics, aesthetics based on proportion, balance, visual weight, contrast in thick and thin, positive and negative shapes of each individual letter and counters, as well as shape relationships between and among letters.
Werner Herzog Retrospecitve: Poster Series
Mendedesign, San Francisco, CA

17. Integration With Image
Each characteristic of a typeface should be considered for integration with the characteristics of the accompanying images
Should the typeface share visual characteristics with the image?
Should the typeface contrast with the characteristics of the image?
Should the typeface be neutral and allow the image to drive the solution?
Should the typeface dominate the solution?
Should the type and image operate collectively?
Would hand-drawn or handmade lettering or handwriting work best?
Environmental Awareness (AIGA): Poster
© Morla Design,
San Francisco, CA
Werner Herzog Retrospecitve: Poster Series
Mendedesign, San Francisco, CA

18. Typeface Pairings
Designers mix typefaces for conceptual, creative, and/or aesthetic reasons. There are general type rules for beginners and, perhaps, for any designer.
Limit mixing and select for contrast.
Pair typefaces for distinction between display type and text type.
Select for contrast yet choose for similar proportions or configurations.
Pair complementary typefaces.
Select typefaces that have contrasting voices but similar x-heights

19. Typeface Pairings
The term typographic texture, also called typographic color, refers to the overall density or tonal quality of a mass of type on a field—page or screen—usually referring to the mass of text type.
In graphic design projects that require blocks of text, the value of the mass of the type block, paragraph, or column takes on a tonal quality, creating a block of gray tone.

20. Typeface Pairings

21. Alignment The primary type alignment options are as follows:
Left-aligned: text that aligns on the left side and is uneven on the right side
Right-aligned: text that aligns on the right side and is uneven on the left side
Justified: text that aligns on the left and right sides
Centered: lines of type centered on an imaginary central vertical axis
Runaround: type wraps around an image, photograph, or graphic element; it is also called text wrap
Asymmetrical: lines composed for asymmetrical balance— not conforming to a set, repetitive arrangement

22. Alignment

23. Spacing
Spatial intervals occur between letters, between words, and between two lines of type. Spacing should enhance reader comprehension or, at the very least, enrich the reader’s experience.
Spacing is about transitions—from letter to letter, from word to word, from line to line, from paragraph to paragraph, from page to page, from screen to screen.
Seventy percent of how you design with type depends on how well you craft transitions!
Letterspacing is the spatial interval between letters. Adjusting the letterspacing is called kerning.
Word spacing is the spatial interval between words.
Line spacing is the spatial interval between two lines of type measured vertically from baseline to baseline, which is traditionally called leading.

24. Spacing
When designing text, check word spacing, line length, and the unevenness of a ragged edge.
Consider the point size of the typeface in relation to the amount of spacing.
Too much interline and interword space may detract from readability. Conversely, too little interline and interword space may make reading difficult.
If the line length is too long or too short, it will detract from readability.
Some designers say that if you have open letterspacing, the word and line spacing should be open. Conversely, if you have tight letterspacing, the word and line spacing should be tight as well.

25. Chunking, Pacing, and Margins
Paragraphs help break up the one-column pages (such as those in a novel).
In newspapers, reports, brochures, and even textbooks, content is most appealing when broken into modules, into chunks of text.
For any screen-based communication, chunks of text are the best arrangement. When you modularize content, it is broken into manageable, digestible units.
How you arrange modules or chunks will create a reading pace.
Pacing involves creating a visual sense of rhythm, syncopation—creating variation and allowing the reader’s eyes a rest somewhere in the text.
Understanding margins as borders aids in respectfully framing text, giving enough distance from the boundaries of a page, in print, or on screen to allow a reader to focus.
Margins can be used creatively, but never ignored or violated without purpose.

26. Page Composition
Communication goals and requirements, the kind of format and content—the volume of text and images—guide your type decisions about structuring a page(s).
Text Heavy: If a project is text heavy, it should narrow your choices to typefaces that are eminently readable as well as a typeface from an extended type family, which offers many options while sustaining unity.
Text and Images: If a project has an almost equal volume of text and images, then you need to select a highly readable typeface based on your design concept, audience, and context (print or screen and environment).
The typeface should integrate in an appropriate and aesthetic manner with the images.

27. Page Composition
Image Heavy: If a project primarily relies on images, mostly requiring display type (title or headline), then your typeface selection is governed by design concept and context.
Caption Heavy: If the typography in an application is predominantly captions or tables, then your selection should consider how readable the face is at a smaller point size and how well it integrates with the images.
The Diva Dismissed: Poster
© Pentagram Design, New York

28. Facilitating Reading
Socrates is attributed with extolling the desirable quality of moderation— “take everything in moderation; nothing in excess.” Applied to facilitating reading, this axiom would mean common sense dictates:
Long line lengths impede readability
Very small point sizes and extreme column depths impede reading
Very open spacing and very tight spacing impede readability
Left justification or justified text type alignments are most readable (depending on spacing)
When composing text type, headings, and subheadings, break text into manageable chunks
Avoid extreme rags, widows, and orphans

29. Orchestrating Flow of Information
There are several ways to achieve emphasis within an entire composition using typography:
Emphasis by isolation
Emphasis by placement
Emphasis through scale (size relationships of title to subtitle to text as well as to images)
Emphasis through contrast
Emphasis through direction
Emphasis through diagrammatic structures

30. Orchestrating Flow of Information
There are also ways to achieve emphasis in text type/body copy:
Size
Color
Boldface
Italics
Typeface change
Type style change
The New York Book Show: Poster
© Ray Cruz, Oakland, NJ

31. Web Type Basics
The basic rules about typography apply to print as well as to screen media.
Web typography should be eminently legible and readable with a clear visual hierarchy of information.
Web type must be legible. Select for:
ample x-height
open counters
modest stroke contrast
sufficient stroke weight
simple shapes, which are easier to read
USC Law: Website Pages
© AdamsMorioka, Beverly Hills, CA

32. Web Type Basics
The greatest contrast between the color of the type and the background color offers the best reading experience.
Bright colors detract from readability.
Specifying a larger pixel size adds readability to saturated colored type.
Keep line lengths a bit shorter for screen than for print.
Keep text type line length to no longer than about twelve words.
Design the text type in chunks. A large text block is not inviting on screen.
More so than in print, a condensed type style and very tight spacing may diminish readability.

33. Web Type Basics
Web type, like any other typography, can also be used to communicate a brand personality.
Make sure the typeface selection is appropriate for the brand or entity.
Typeface selection can help differentiate a brand.
Any display typeface should support the logo, not fight with it for attention.
Maintain enough area of isolation (margins of white space) around the logo.
The typeface’s voice should enhance communication.

34. Expressive Type
In addition to understanding the fundamentals of design and how they relate specifically to designing with type, it is essential to understand how type is used creatively and expressively.
Type should always be an active contributor and can, in fact, express the entire message.
So Five Minutes Ago: Editorial Illustration
© Thirst / 3st.com

35. Summary
Typography is the design of letterforms and the arrangement of them in two-dimensional space (for print and screen-based media) and in space and time (for motion and interactive media).
Display type functions as a dominant typographic component and is usually large or bold—functioning as titles and subtitles, headlines and subheadlines, headings and subheadings.
Text type is the main body of written content, usually in the form of paragraphs, columns, or captions.
Today, almost all type is produced digitally or by hand, but much of the type terminology used originated in the days when type was cast in relief on a three-dimensional piece of metal, which was then inked and printed.

36. Summary
Although there are numerous typefaces available today, there are some major classification categories into which most fall.
The style or arrangement of setting text type is called type alignment.
Developing typographic skills entails designing and selecting for clarity and visual interest.
The selection of a typeface or type family should be suitable for concept, audience, context, and application.
Type is form and should be evaluated based on aesthetic criteria of shape, proportion, and balance.
Type communicates on a denotative and connotative level.

37. Summary
Facilitate reading through determining proper point sizes, spacing, line length, alignment, column depth, variation, and contrast
The three kinds of spacing you have to control when designing with type are letterspacing, word spacing, and line spacing.
Spacing should enhance reader comprehension or, at the very least, enrich the reader’s experience.
Designing with a type family affords enormous flexibility as well as contributing to unity.
Type should be readable and has to be well integrated with visuals.
Margins present text type and need to be respected.

38. Summary
Transitions between letters, words, and paragraphs are critical; spacing can make or break communication.
Orchestrate the flow of information through visual hierarchy.
Communication requirements, content, and the nature of an application and its content—the volume of text and images—help guide your type decisions about structuring type.
The basic rules about typography apply to print as well as to screen media.
Web typography should be eminently legible and readable with a clear visual hierarchy of information.
Type should always be an active contributor and can, in fact, express the entire message.