2 Objectives Gain knowledge of anatomy and nomenclature Learn type classificationsPick up the basic principles of designing with typeLearn about typeface pairingsConsider spacingBecome familiar with Web type basicsLearn about expressive typography
3 DefinitionsTypography 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 DefinitionsA 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 TermsMartin 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 HumanistSans SerifTransitionalBlackletterModernScriptSlab SerifDisplay
8 Classifications of Type Typeface Classification ExamplesMartin Holloway Graphic Design,Pittstown, NJ
9 Classifications of Type Chart by Martin Holloway Graphic Design
10 Designing with TypeType 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
12 Selecting a TypefaceIs 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 TypefaceCheck 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.
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 ImpactCreating 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 SeriesMendedesign, San Francisco, CA
18 Typeface PairingsDesigners 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 PairingsThe 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.
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 sideRight-aligned: text that aligns on the right side and is uneven on the left sideJustified: text that aligns on the left and right sidesCentered: lines of type centered on an imaginary central vertical axisRunaround: type wraps around an image, photograph, or graphic element; it is also called text wrapAsymmetrical: lines composed for asymmetrical balance— not conforming to a set, repetitive arrangement
23 SpacingSpatial 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 SpacingWhen 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 CompositionCommunication 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.
28 Facilitating ReadingSocrates 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 readabilityVery small point sizes and extreme column depths impede readingVery open spacing and very tight spacing impede readabilityLeft justification or justified text type alignments are most readable (depending on spacing)When composing text type, headings, and subheadings, break text into manageable chunksAvoid 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 isolationEmphasis by placementEmphasis through scale (size relationships of title to subtitle to text as well as to images)Emphasis through contrastEmphasis through directionEmphasis through diagrammatic structures
32 Web Type BasicsThe 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 BasicsWeb 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.
35 SummaryTypography 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 SummaryAlthough 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 SummaryFacilitate reading through determining proper point sizes, spacing, line length, alignment, column depth, variation, and contrastThe 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 SummaryTransitions 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.