4/29/2015 Designing Visual Language-Chapter 4 1 Notes to Chapter Four English 308

04/18/23Designing Visual Language-Chapter 41

Notes to Chapter FourNotes to Chapter FourEnglish 308


Linear ComponentsLinear Components

Are the most basic element of text design—the letters, words, numbers and other intra-level forms

Though physically small, they can have significant—even striking—rhetorical effects.


We focus on linear We focus on linear components becausecomponents because

Readers frequently process messages one piece at a time, so even small areas of text can have significant functional value.

Linked together, linear components have a cumulative effect on the overall visual language of a document.


The Three Coding ModesThe Three Coding Modes

TextualSpatialGraphic


Textual Elements: TypefaceTextual Elements: Typeface

What to look for?SerifsX-heightWidthLine quality


SerifsSerifs

Serifs are the finishing strokes—the “feet”—on the ends of letters.

Some typefaces have them, and some don’t.


Common Serif TypefacesCommon Serif Typefaces

ABCDabcd (Times)ABCDabcd (Palatino)ABCDabcd (Century Schoolbook)ABCDabcd (Bookman)ABCDabcd (Courier)ABCDabcd (Garamond)ABCDabcd (Zapf Chancery)


Common Sans Serif TypefacesCommon Sans Serif Typefaces

ABCDabcd (Arial)ABCDabcd (Helvetica)ABCDabcd (Avant Garde)ABCDabcd (Franklin Gothic)ABCDabcd (Letter Gothic)ABCDabcd (Verdana)ABCDabcd (Comic Sans)


X-HeightX-Height

The vertical height of the middle part of a typeface;

the height of a lower case x in a given font compared to letters with ascenders (such as h) or descenders (such as p)

The greater the x-height the more room the font appears to occupy.


The Effects of X-heightThe Effects of X-height

d d dx-height


Ascenders and DescendersAscenders and Descenders

jellox-height

descender

ascender


WidthWidth

The horizontal space occupied by the typeface. Some examples:

abcdefghijklmnopqrstuvwxyz (Zapf Chancery) abcdefghijklmnopqrstuvwxyz (Times) abcdefghijklmnopqrstuvwxyz (Helvetica) abcdefghijklmnopqrstuvwxyz (Palatino) abcdefghijklmnopqrstuvwxyz (Bookman) abcdefghijklmnopqrstuvwxyz (Avant Garde)


The Three Page Paper?The Three Page Paper?This text is set in Times New Roman. Because Times New Roman is a relatively narrow typeface, more letters can be set on a line. That means more words can be set on a page. In fact, the ratio between Times New Roman and a wider font such as Century Schoolbook or Bookman (two very common typefaces used in printing textbooks) is nearly 3 to 4. In other words, three pages of Times New Roman text, double-spaced in 12 point type with one-inch margins all around would be a little less than 1000 words. Three pages of Bookman text, double-spaced in 12 point type with one-inch margins all around would be a little more than 750 words. The three pages of Times New Roman text would take up 3 and ¾ pages if set in Bookman. Don’t you wish you knew that earlier in your college career?

3 page paper in Times 4 page paper in Bookman

3 page paper in Bookman 2 ½ page paper in Times


Line QualityLine Quality

How thick or thin the lines areWhether the lines vary in width or have a

constant widthTypefaces whose lines don’t vary in width

are called monoline typefaces (such as Avant Garde, Helvetica, and Geneva)


Type SizeType Size

Type is measured in points, with each point equal to 1/72 of an inch

B B B B 72 pts 36 pts 18 pts 12 pts

1 in. ½ in. ¼ in. 1/6 in.


Type Size and SpaceType Size and Space8 Type size also affects horizontal space.

10 Type size also affects horizontal space.








32Type size also affects horizontal space.


Type TreatmentsType Treatments

all caps TYPE TREATMENTS CREATE VISUAL EFFECTS. small caps TYPE TREATMENTS CREATE VISUAL EFFECTS. italics Type treatments create visual effects. bold Type treatments create visual effects. outline Type treatments create visual effects. shadow TTyyppee ttrreeaattmmeennttss ccrreeaattee vviissuuaall eeffffeeccttss.. And in combination too bold italic Type treatments create visual effects. all caps italic TYPE TREATMENTS CREATE VISUAL EFFECTS. bold small caps TYPE TREATMENTS CREATE VISUAL EFFECTS.


Type ConventionsType Conventions

Some conventions may govern your choices—the kind of document, the organization you are writing or working for, even the cultural background of the audience might be factors.


Spatial ElementsSpatial Elements

Direction of text flow (left-to-right)Horizontal spacing between characters and

wordsVertical spacing between characters and

wordsSpecial Treatments


Horizontal SpacingHorizontal Spacing

condensed You can condense text slightly. You can condense text slightly. Or you can condense text greatly. expanded You can expand text slightly. You can expand text slightly. Or you c a n e xpa nd t e x t g r e a t l y .


KerningKerning

Kerning controls the spacing between individual letters. Note the importance of kerning in the words below: First no kerning

Tea Water Yellow Now kerning

Tea Water Yellow


Vertical SpacingVertical Spacing

Vertical spacing on the line level is limited

to superscript and subscript


Special TreatmentsSpecial Treatments


Graphic ElementsGraphic Elements

Punctuation MarksLinework and shading Iconic Letter Forms


Punctuation MarksPunctuation Marks

While most conventional marks are consistent in meaning, a few are not. For example, the British use a comma instead of a decimal:

£24,375,90

While Americans use the decimal:

$18,674.82


Linework and ShadingLinework and Shading

IncludesUnderscored or underlined textStrikethrough textText with gray scale backgroundBoxed text


Iconic Letter FormsIconic Letter Forms

Typefaces that look like their subject:Bloody Typeface Ironwood Typeface Igloocaps typefaceZipper type


Applying the Cognate StrategiesApplying the Cognate Strategies

How do we apply this rich visual vocabulary to lines of text?

We can do so by considering the six cognate strategies.


Arrangement QuestionsArrangement Questions

How can I design the message so I can keep readers moving smoothly along a line of text?

How can I signal the relation between one piece of text and another?


Arrangement StrategiesArrangement Strategies

Grouping by common type styleGrouping by common type sizeUsing type size to suggest hierarchyAdjusting type spacing to make

appropriate use of space (a concision and ethos issue as well)


Emphasis QuestionsEmphasis Questions

What parts of the message need to stand out?

What do I want readers to see first and to remember?


Emphasis StrategiesEmphasis Strategies

Varying type size—larger type means more emphasis Varying font weight—bold and other heavy type

treatments mean more emphasis Using graphic elements—underlined, boxed, and

shaded text stands outCAUTION: Too much emphasis will degrade figure-

ground contrast making everything stand out less. Excessive emphasis also undermines ethos because readers will cease to believe that anything is important.


Clarity QuestionsClarity Questions

How can I ensure that each line of text will be legible in the context where readers will encounter it?


Clarity StrategiesClarity Strategies

Choose a legible type style—although studies show little difference across typefaces, some typefaces are easier to read than others.

Choose a “comfortable” type style—familiar typefaces are easier to process than unfamiliar ones, though unfamiliar ones might be useful for grabbing the reader’s attention


Clarity Strategies (continued)Clarity Strategies (continued)

Choose serif fonts for blocks of text Reserve sans serif fonts for “display”

situations (charts, headings, titles, etc.)Type sizes below 10 points should be used

only in extreme situationsType sizes above 12 points should not be

used for blocks of text


Clarity Strategies (continued)Clarity Strategies (continued)

Avoid uppercase onlyUse boldface sparingly (boldface adds

emphasis but degrades figure-ground contrast)

Use italics sparinglyUse condensed or widened text judiciously


Conciseness QuestionsConciseness Questions

How can I get the most impact for the least use of design elements?

How can I avoid over-designing a line of text?


Conciseness StrategiesConciseness Strategies

San serif fonts are more concise (less visual detail) than serif fonts

Small type sizes are more conciseCondensed text is more conciseBut in all cases, you must consider the

trade-offs between conciseness and clarity


Tone QuestionsTone Questions

How do I want the linear components to sound to my readers?

Serious, friendly, formal, funny, matter-of-fact, personable, technical?


Tone StrategiesTone Strategies

Tone varies greatly from one typeface to another, though no one really knows why. For example, do these messages “sound” the same?

Please contact me with any questions.




Tone Strategies (continued)Tone Strategies (continued)

Formality: Consider how formal the typeface looks.

Generally the formality is based on convention.



So

UPPER CASE TEND TO LOOK FORMAL

Perhaps because of the square, chiseled look like in this font called Albertus

THIS LOOKS LIKE IT WAS CARVED IN STONE.



Script fonts tend to look formal

Perhaps because of its use in certificates, diplomas, official notices, invitations:

This looks pretty fancy. I think you will need your tuxedo.

This also looks formal, though more serious too.

While this doesn’t look formal at all.



Some typefaces are clearly informal, like:

This typeface imitates children’s writing.

This typeface imitates Matisse’s signature.

This one reminds me of Gilligan’s Island.



We can even take a formal typeface and loosen it up a bit:

HERE IS ALBERTUS AGAIN, BUT THE HERE IS ALBERTUS AGAIN, BUT THE TYPE TREATMENT MAKES IT SEEM TYPE TREATMENT MAKES IT SEEM LESS IMPOSING. LESS IMPOSING.



We also must consider the “technicality” of the type. Technical typefaces look as if they were created by a machine.

Univers reminds me of HAL in 2001.Letter gothic is like your dad’s old printer.

OCRA means clones have taken over.



Of course, the visual tone of typefaces is a complex and somewhat mysterious subject. Again, you will have to take into account the rhetorical situation and some knowledge of convention to make your choices.


Ethos QuestionsEthos Questions

How can I design linear components so they create credibility for me, the other authors, or the organization?


Ethos StrategiesEthos Strategies

Match the typeface with the subjectCreate a professional look


Ethos Strategies (continued)Ethos Strategies (continued)

Match the typeface with the subject

These choices create credibility problems

No late work will be accepted.No late work will be accepted.No late work will be accepted.

NO LATE WORK WILL BE ACCEPTED.


Ethos Strategies (continued)Ethos Strategies (continued)

Create a professional look

These choices create credibility problems

Before submitting your paper, make sure Before submitting your paper, make sure that you proofread it and correct all errors.that you proofread it and correct all errors.

BEfore submitting your paper, make sure that you proffread it and correct all errors.

Documents

4/29/2015 Designing Visual Language-Chapter 4 1 Notes to Chapter Four English 308