1. Designing
TYPE
with
2.01 Investigate typefaces and fonts.

2. Font basics

3. Typography
The study of all the elements of type including the shape, size and spacing of the characters.

4. Where’d they come from?
Times - developed for newspaper text, books, magazines, office documents, display, and advertising
Courier New - designed to emulate a typewriter
Comic Sans MS - originally created for comic books
Century Schoolbook - originally created for magazines and later widely used in reading texts
Tahoma – created for small-sized text in dialog boxes and menus
Trebuchet MS, Georgia, and Century Gothic were created to optimize digital display
2.01 Investigate typefaces and fonts.

5. Typefaces, Fonts, and Font Families
A typeface/font is a specific style or design that make up a font (can be used interchangeable with “font”). The design includes size, weight, and style
A font style is a specific slant and weight of a character, such as bold or italics
A font family is a group of similarly formatted characters
2.01 Investigate typefaces and fonts.

6. Anatomy of Type A Baseline is the line which type “sits”
The x-height line is the line under which type “sits”. Fonts designed with high x-heights are harder to read than those placed a the standard height.
The ascender line marks the tallest letter in the font

7. Anatomy of Type
The ascender is the part of a lowercase letter that extends above the x-height. Ex: letter “h”
The descender is the part of a lowercase letter that extends below the baseline. Ex: letter “g”

8. Common Type Styles
Small Caps, Shadow, Strikethru, Subscript, Superscript

9. Typography Common Type Styles
Reverse Text: white type on a dark background and is designed to make the type stand out.
Typography

10. Two Deciding Factors for Fonts
READABILITY- measurement of text that determines how quickly the eye can process information. Readability is used for small text and long paragraphs.
LEGIBILTY – is the measurement of text that determines how easily the eye can decipher the words. Legibility is used for display text or short passages.

11. Selecting fonts

12. Font Families Four Families of Fonts: Serif Sans Serif
Ornamental or Decorative
Script or Cursive

13. k Serifs Contain attributes/strokes at the tips of a letter
Stroke: the line that defines a letter. The width of the line, it may be thick or thin.
Examples of Serif Fonts:
Goudy  Times New Roman
Bodini  Modern No. 20
Courier  Rockwell
Century Schoolbook
Uses
Newspaper text  Office documents
Books  Magazines
Display  Advertising k
2.01 Investigate typefaces and fonts.

14. Other Serif Examples

15. k Sans Serifs No attributes (serifs) at the tips of a letter
Mono-weight appearance (even strokes)
Examples of Sans Serif Fonts
Arial Berlin Sans
Gill Sans Verdana
Uses
Web pages - Digital display
Headings - Captions k
2.01 Investigate typefaces and fonts.

16. Other San Serif Examples

17. Ornamental or Decorative
Designed strictly to catch the eye
Should be used sparingly
Examples
Chiller Gigi
Webdings (dings) Old English
Uses
Headlines on flyers
Symbols used in logos k
2.01 Investigate typefaces and fonts.

18. Other Ornamental/Decorative Examples

19. k Script or Cursive Brush Script Freestyle script
All typefaces that appear to have been written by hand, with a calligraphy pen or a brush
Should never be used to key in all caps or an entire paragraph
Examples
Brush Script Freestyle script
French Script Lucinda Handwriting
Uses
Invitations
Calling cards
Poetry
Headings k
2.01 Investigate typefaces and fonts.

20. Other Script Examples

21. Three Cs of Typography Design
In Type, there is usually more than one element on a page-even a document of plain body copy typically has heads or subheads, or at least page numbers on it. Within these dynamics on the page, a relationship is established that is one of these three:
Concord
Conflict
Contrast
2.01 Investigate typefaces and fonts.

22. Three Cs of Typography Design
Concord- relationship occurs when you use only one type family without much variety in style, size, weight, etc. It is easy to keep the page harmonious, and the arrangement tends to appear quiet and rather sedate or formal –sometimes dull.
2.01 Investigate typefaces and fonts.

23. Concord A calm and harmonious layout In this example
Initial cap is larger than the rest of the type
Words "full of sound and fury" have been italicized
Resulting effect is subdued
ND 146
2.01 Investigate typefaces and fonts.

24. Other Examples of Concord
ND 147
Hello
invite

25. Three Cs of Typography Design
Conflict- relationship occurs when you combine typefaces that are similar (but not the same) in style, size, weight, etc. The similarities are disturbing because the visual attractions are not the same, but neither are the different, so they conflict.
2.01 Investigate typefaces and fonts.

26. Conflict
Using two different typefaces that are similar, but not different enough to stand apart from each other
In this example, the words “full of sound and fury” are in a different typeface
Conflict should be avoided
ND 148
2.01 Investigate typefaces and fonts.

27. Other Examples of Conflict
ND 149
What’s up
invite

28. Three Cs of Typography Design
Contrast- relationship occurs when you combine separate typefaces and elements that are clearly distinct from each other. The visually appealing and exciting designs that attract your attention typically have a lot of contrast built in, and those contrasts are emphasized.
2.01 Investigate typefaces and fonts.

29. Contrast ND pg. 150 Effects on typeface, size, and/or weight to
Direct reading patterns
Organize information
Emphasize information
ND pg. 150
2.01 Investigate typefaces and fonts.

30. Other Examples of Contrast
ND 151
Hello
invite

31. Contrast Not just for the aesthetic look of the piece
Tied in with the organization and clarify of the information on the page
Combining different typefaces should enhance the communication, not confuse it
6 clear ways to contrast type:
Size, weight, structure, form, direction, and color

32. Using Contrast and Mixing Typefaces
When mixing two different typefaces, diversity is the key
Do not use two faces that are too similar
Harmony is accomplished with no more than THREE typefaces on a page. TWO is even better.
To create interest, use different sizes and attributes rather than several different typefaces.

33. Major Rule to Follow when Contrasting Type:
Don’t look for what is different between the type-look for what is similar. It is the similarities that cause the problems.
Major Rule to Follow when Contrasting Type:

34. Type contrasts

35. Contrasting Typeface
Type contrast is not only for the aesthetic appeal, but also to enhance the communication. A reader should never have to try to figure out what is happening on the page –the focus, organization, purpose, and flow should be recognized instantly.

36. Type Contrasts
165
2.01 Investigate typefaces and fonts.

37. Do Not contrast 12-point with 14-point type; they will conflict
Big type vs. Little type
Do Not contrast 12-point with 14-point type; they will conflict
If you are going to contrast with size
…MAKE IT OBVIOUS –don’t let people thinks it’s a mistake
166
2.01 Investigate typefaces and fonts.

38. A contrast of size does not always mean you must make the type large –it means there should be a contrast.
An important part of what compels you is the contrast of very small type on a large page

39. Sometimes the contrast of big over little is overwhelming; it can overpower the smaller type.
This method can be used to your advantage if part of the design is not suppose to be the focus

40. Use contrasting size in unusual ways.
Use symbols, numbers, ampersands, quote marks as decorative elements in a headline or a pull quote

41. Weight is the thickness of strokes
Regular, bold, semi-bold, light
Examples of weight within a typeface family:

42. Combining Weight Rule: Emphasize the difference-
Don’t be a Wimp!
Emphasize the difference-
Combine thick weight with light weight
When combining type from different families, one should be bolder than the other.
If the contrast is not strong, it will look like a mistake.

44. Use Weight Contrast to organize information

45. Use Weight Contrast to make a page look more interesting and attractive by emphasizing key phrases.

46. Structure is how the typeface is built
Mono-weight strokes vs. varying stroke width
The structure within each category below is quite distinctive:
174

47. Structure Rule:
Never put two typefaces from the same category (or family) on the same page
It is too difficult to distinguish between the differences.
ND p 174 Ode

48. For Beginners:
An easy way to choose contrasting structure is to pick one Serif font and one Sans serif font
Serifs usually have a thick/thin stroke contrast and San serifs usually have a mono-weight stoke.

49. Using only Structure as contrast is not enough
Emphasize the difference by combining it with other contrasts:

50. You can combine fonts in the same family by building contrast in other ways using different members of the same family:

51. The form refers to the shape of the letter
The form refers to the shape of the letter. This is different from structure.
Ex: A capital letter “G” has the same structure as lowercase “g”.
Capital letters vs. Lowercase letters is the easiest way to think of form

52. Use Caps vs. Lowercase to contrast type:

53. Readers recognize words by their letters, but also by their forms (or shapes of the entire word)
This is what makes ALL CAPS so difficult to read.

54. All words set in capital letters have a similar rectangular form, we are forced to read the words letter by letter.

55. You CAN use all caps sometimes
All caps are not impossible to read and can be used sparingly for contrast
ND p 180 wealth

56. Roman vs. Italic Roman: the type stands straight up and down
Italic: the type is slanted

57. Never combine two different italic fonts
Or two different scripts
Or italics with scripts

58. Every element of type has a direction, even though it may run straight across the page.
A line of type has a horizontal direction
A tall, thin column of type has a vertical direction

59. This layout creates an interesting contrast of direction
This layout creates an interesting contrast of direction. Emphasizing the direction with bold color one direction and bold text the other.

60. Involve other parts of the layout, like graphics or lines to contrast the direction.

61. The direction of text can provide a counter-balance to a horizontal image

62. Warm colors come forward and command attention
Reds, oranges
Our eyes are attracted to warm colors, so it takes very little red to create a contrast
Cool colors recede from our eyes
Blues, greens
You can get away with larger areas of a cool color; you need more of a cool color to create an effective contrast.

63. The smaller word can compete because of the warm color contrast
The larger text overpowers the smaller. Avoid this.
The light, cool color is not noticeable
To contrast a cool color, you need more of it

64. Typographers refer to black-and-white type as having color on a page
Black and white text creates color through contrast
“Color” is created by weight, structure, form, space, and size

66. Don’t be a Wimp!
Take advantage of more than one of the contrasting possibilities
Look through magazines for a wide variety of examples and ideas
Verbalize the what you see.

67. Rule: Name the problem, then you can create the solution
Try to name the similarities –not the differences
What is it about the two faces that compete with each other?
Are they both all caps?
How effective is the contrast in weight, size, etc?
Focus on conflict