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

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.

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.

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.

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

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

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

Classifications of Type Chart by Martin Holloway Graphic Design

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

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

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 www.fontfonter.com to see web fonts on any website.

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.

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

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.

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

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

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

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.

Typeface Pairings

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

Alignment

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.

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.

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.

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.

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

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

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

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

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

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.

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.

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

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.

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.

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.

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.