Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "4/29/2015 Designing Visual Language-Chapter 4 1 Notes to Chapter Four English 308."— Presentation transcript:

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

2 4/29/2015 Designing Visual Language-Chapter 4 2 Linear 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.

3 4/29/2015 Designing Visual Language-Chapter 4 3 We focus on linear components 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.

4 4/29/2015 Designing Visual Language-Chapter 4 4 The Three Coding Modes Textual Spatial Graphic

5 4/29/2015 Designing Visual Language-Chapter 4 5 Textual Elements: Typeface What to look for? Serifs X-height Width Line quality

6 4/29/2015 Designing Visual Language-Chapter 4 6 Serifs Serifs are the finishing strokes—the “feet”— on the ends of letters. Some typefaces have them, and some don’t.

7 4/29/2015 Designing Visual Language-Chapter 4 7 Common Serif Typefaces ABCDabcd (Times) ABCDabcd (Palatino) ABCDabcd (Century Schoolbook) ABCDabcd (Bookman) ABCDabcd (Courier) ABCDabcd (Garamond) ABCDabcd (Zapf Chancery)

8 4/29/2015 Designing Visual Language-Chapter 4 8 Common Sans Serif Typefaces ABCDabcd (Arial) ABCDabcd (Helvetica) ABCDabcd (Avant Garde) ABCDabcd (Franklin Gothic) ABCDabcd (Letter Gothic) ABCDabcd (Verdana) ABCDabcd (Comic Sans)

9 4/29/2015 Designing Visual Language-Chapter 4 9 X-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.

10 4/29/2015 Designing Visual Language-Chapter 4 10 The Effects of X-height d d d x-height

11 4/29/2015 Designing Visual Language-Chapter 4 11 Ascenders and Descenders jello x-height descender ascender

12 4/29/2015 Designing Visual Language-Chapter 4 12 Width The horizontal space occupied by the typeface. Some examples: abcdefghijklmnopqrstuvwxyz (Zapf Chancery) abcdefghijklmnopqrstuvwxyz (Times) abcdefghijklmnopqrstuvwxyz (Helvetica) abcdefghijklmnopqrstuvwxyz (Palatino) abcdefghijklmnopqrstuvwxyz (Bookman) abcdefghijklmnopqrstuvwxyz (Avant Garde)

13 4/29/2015 Designing Visual Language-Chapter 4 13 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 Bookman2 ½ page paper in Times

14 4/29/2015 Designing Visual Language-Chapter 4 14 Line Quality How thick or thin the lines are Whether the lines vary in width or have a constant width Typefaces whose lines don’t vary in width are called monoline typefaces (such as Avant Garde, Helvetica, and Geneva)

15 4/29/2015 Designing Visual Language-Chapter 4 15 Type Size Type is measured in points, with each point equal to 1/72 of an inch B B 72 pts 36 pts 18 pts 12 pts 1 in. ½ in. ¼ in. 1/6 in.

16 4/29/2015 Designing Visual Language-Chapter 4 16 Type Size and Space 8Type size also affects horizontal space. 10Type size also affects horizontal space. 12Type size also affects horizontal space. 14Type size also affects horizontal space. 16Type size also affects horizontal space. 18Type size also affects horizontal space. 20Type size also affects horizontal space. 24Type size also affects horizontal space. 28Type size also affects horizontal space. 32Type size also affects horizontal space.

17 4/29/2015 Designing Visual Language-Chapter 4 17 Type Treatments

18 4/29/2015 Designing Visual Language-Chapter 4 18 Type 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.

19 4/29/2015 Designing Visual Language-Chapter 4 19 Spatial Elements Direction of text flow (left-to-right) Horizontal spacing between characters and words Vertical spacing between characters and words Special Treatments

20 4/29/2015 Designing Visual Language-Chapter 4 20 Horizontal Spacing

21 4/29/2015 Designing Visual Language-Chapter 4 21 Kerning

22 4/29/2015 Designing Visual Language-Chapter 4 22 Vertical Spacing Vertical spacing on the line level is limited to superscript and subscript

23 4/29/2015 Designing Visual Language-Chapter 4 23 Special Treatments

24 4/29/2015 Designing Visual Language-Chapter 4 24 Graphic Elements Punctuation Marks Linework and shading Iconic Letter Forms

25 4/29/2015 Designing Visual Language-Chapter 4 25 Punctuation 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

26 4/29/2015 Designing Visual Language-Chapter 4 26 Linework and Shading Includes Underscored or underlined text Strikethrough text Text with gray scale background Boxed text

27 4/29/2015 Designing Visual Language-Chapter 4 27 Iconic Letter Forms Typefaces that look like their subject: Bloody Typeface Ironwood Typeface Igloocaps typeface Zipper type

28 4/29/2015 Designing Visual Language-Chapter 4 28 Applying 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.

29 4/29/2015 Designing Visual Language-Chapter 4 29 Arrangement 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?

30 4/29/2015 Designing Visual Language-Chapter 4 30 Arrangement Strategies Grouping by common type style Grouping by common type size Using type size to suggest hierarchy Adjusting type spacing to make appropriate use of space (a concision and ethos issue as well)

31 4/29/2015 Designing Visual Language-Chapter 4 31 Emphasis Questions What parts of the message need to stand out? What do I want readers to see first and to remember?

32 4/29/2015 Designing Visual Language-Chapter 4 32 Emphasis 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 out CAUTION: 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.

33 4/29/2015 Designing Visual Language-Chapter 4 33 Clarity Questions How can I ensure that each line of text will be legible in the context where readers will encounter it?

34 4/29/2015 Designing Visual Language-Chapter 4 34 Clarity 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

35 4/29/2015 Designing Visual Language-Chapter 4 35 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 situations Type sizes above 12 points should not be used for blocks of text

36 4/29/2015 Designing Visual Language-Chapter 4 36 Clarity Strategies (continued) Avoid uppercase only Use boldface sparingly (boldface adds emphasis but degrades figure-ground contrast) Use italics sparingly Use condensed or widened text judiciously

37 4/29/2015 Designing Visual Language-Chapter 4 37 Conciseness 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?

38 4/29/2015 Designing Visual Language-Chapter 4 38 Conciseness Strategies San serif fonts are more concise (less visual detail) than serif fonts Small type sizes are more concise Condensed text is more concise But in all cases, you must consider the trade-offs between conciseness and clarity

39 4/29/2015 Designing Visual Language-Chapter 4 39 Tone Questions How do I want the linear components to sound to my readers? Serious, friendly, formal, funny, matter-of- fact, personable, technical?

40 4/29/2015 Designing Visual Language-Chapter 4 40 Tone 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. Please contact me with any questions. Please contact me with any questions.

41 4/29/2015 Designing Visual Language-Chapter 4 41 Tone Strategies (continued) Formality: Consider how formal the typeface looks. Generally the formality is based on convention.

42 4/29/2015 Designing Visual Language-Chapter 4 42 Tone Strategies (continued) 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.

43 4/29/2015 Designing Visual Language-Chapter 4 43 Tone Strategies (continued) 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.

44 4/29/2015 Designing Visual Language-Chapter 4 44 Tone Strategies (continued) 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.

45 4/29/2015 Designing Visual Language-Chapter 4 45 Tone Strategies (continued)

46 4/29/2015 Designing Visual Language-Chapter 4 46 Tone Strategies (continued) 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 Letter gothic is like your dad’s old printer. OCRA means clones have taken over.

47 4/29/2015 Designing Visual Language-Chapter 4 47 Tone Strategies (continued) 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.

48 4/29/2015 Designing Visual Language-Chapter 4 48 Ethos Questions How can I design linear components so they create credibility for me, the other authors, or the organization?

49 4/29/2015 Designing Visual Language-Chapter 4 49 Ethos Strategies Match the typeface with the subject Create a professional look

50 4/29/2015 Designing Visual Language-Chapter 4 50 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.

51 4/29/2015 Designing Visual Language-Chapter 4 51 Ethos Strategies (continued) Create a professional look These choices create credibility problems Before submitting your paper, make sure that you proofread it and correct all errors. BEfore submitting your paper, make sure that you proffread it and correct all errors.


Download ppt "4/29/2015 Designing Visual Language-Chapter 4 1 Notes to Chapter Four English 308."

Similar presentations


Ads by Google