Chapter 3- Typography
Sans Serif
A font that does not have small line extensions on its characters.
font
A set of characters that have the same design.
Display type
Any type larger than body type - used mostly for headlines and ads
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.
Handwritten
Feelings handwritten fonts evoke: human, approachable, natural, friendly, authentic, down-to-earth. Handwritten fonts work for headings (display text), not for long reading text (body copy) and not for user interfaces (functional text). A caveat for this category is that good handwritten fonts are rare. Pick a font that has plenty of alternate characters so not every repeating letter within a word looks the same, for an authentic handwritten impression.
Type Style
Modifications in a typeface that create design variety while retaining the essential visual character of the face
old style or humanist
Roman typeface, introduced in the late fifteenth century, most directly descended in form from letters drawn with a broad-edged pen.
Tips on Selecting a Typeface
Select based on appropriateness for audience, design concept, message, communication requirements, and context. 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. Take note of the counter of the uppercase O. Is it perfectly round? Oval? Do the counterforms of the typeface integrate well with the characteristics of accompanying imagery? Are type and image configurations similar? Check legibility. Typefaces that are too light or too heavy may be difficult to read, especially in smaller sizes 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.). Pair typefaces for distinction between display type and text type. Select for contrast and variation. A common rule is to utilize no more than two typefaces in a design, but of course there are exceptions. Note: Do not to choose typefaces for their novelty appeal, rather select a suitable typeface to express your design concept.
text type
Texts that have specific features, e.g. layout, use of language, that make them part of a recognizable type of text, e.g., letters, emails, news reports.
line spacing
The amount of vertical space between paragraphs.
Letterform
The particular style and form of each individual letter in an alphabet
Typography
The style and appearance of printed materials, specific identifiers include style, font, typeface, etc.
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
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.
Blackletter
Used in the Guthenburg Bible, one of the first books printed in Europe
Typeface
a particular design of type.
Serif
a slight projection finishing off a stroke of a letter in certain typefaces.
Serif fonts
include Old Style or Humanist, Transitional, and Modern (details below). Feelings serif fonts evoke: traditional, classic, established, trustworthy, warm, noble. Serif fonts work for headings (display text), long reading copy (body copy), and less-so for user interfaces (functional text)
Slab Serif
serif typeface characterized by heavy, slab-like serifs
modern
serif typefaces, developed in the late eighteenth and early nineteenth centuries; their form is more geometric in construction, as opposed to the old style typefaces, which stayed close to forms created by the chisel-edged pen. Characterized by greatest thick-thin stroke contrast and vertical stress, they are the most symmetrical of all roman typefaces; examples include Didot, Bodoni, and Walbaum.
Transitional
serif typefaces, originating in the eighteenth century, represent a transition from old style to modern, exhibiting design characteristics of both; examples are Baskerville, Century, and ITC Zapf International.
type family
several font designs contributing a range of style variations based upon a single typeface design
word spacing
space between words
Kerning
the adjustment of space between pairs of letters to improve its appearance or alter its fit
Letterspacing
the placing of additional space between each letter of a word.
leading
the space between lines of text
display
these typefaces are designed for use in larger sizes used primarily for headlines and titles and would be more difficult to read as text type; they often are more elaborate, decorated, handmade, and fall into any of the other classifications. Feelings display fonts evoke: retro, unique, thematic, atomospheric, interesting, expressive. Display fonts work for headings (display text), not for long reading text (body copy) and not for user interfaces (functional text).
script
these typefaces most resemble beautiful handwriting. Letters usually slant and often are joined. Script types can emulate forms written with a chisel-edged pen, flexible pen, pointed pen, pencil, or brush; examples are Brush Script, Shelley Allegro Script, and Snell Roundhand Script. Feelings script fonts evoke: skillful, elaborate, lively, individual, playful, expressive Script fonts work for headings (display text), not body text, and never set in all capitals.
Sans Serif
typeface without serifs
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 Transitional Modern Slab Serif Sans Serif Blackletter Script Display
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.
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.
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.
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.
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
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?
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.
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.
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.
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.
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.
Chunking, Pacing, and Margins
•Paragraphs help break up the one-column pages (such as thosein 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.
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 spacingimpede 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
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!
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
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.
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
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.
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
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.
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.
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.
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.
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.
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.
