1. Design and Typographic Principles

2. The Joshua Tree Principle Joshua Tree story example The four basic principles Contrast Repetition Alignment Proximity

3. Summary of Proximity The basic purpose Grouping relating elements together to make more pleasing to the eye, and easier to read How to get it Separate elements can be grouped together into closer visual units.

4. Proximity Examples Good Bad

5. Proximity (continued) What to avoid Too many separate elements on a pages. Don’t stick things in the middle or in corners. Avoid leaving equal amounts of white space between elements. Avoid confusion over a headline, subhead, caption, or graphic. Don’t put elements together that don’t belong together.

6. Alignment The basic purpose Unify and organize the page Often a strong alignment combined, of course, with the appropriate type face that creates a sophisticated look, a formal look, a fun look, or a serious look.

7. Alignment Good Example Bad Example

8. Alignment (continued) How to get it Be conscious of where you type elements. Always find something else on the page to align with, even if the two objects are physically far away from each other.

9. Alignment (continued) What to avoid Avoid using more than one text alignment on the page. Don’t center some text and right-align other text. Try very hard to break away from a centered alignment unless you are consciously trying to create a formal, sedate, often dull presentation.

10. Repetition The basic purpose Unify and add visual interest. How to get it Think of repetition as being consistent. Push existing consistencies a little further. Take a look at the possibility of adding elements just to create a repetition. Repetition is like accenting your clothes.

11. Repetition Good Bad

12. Repetition (continued) What to avoid Avoid repeating an element so much that it becomes annoying or overwhelming. Be conscious of the value of contrast.

13. Contrast The basic purpose Two-fold, and they must come in a pair. Create an interest on the page-if a page is interesting to look at, it is more likely to be read. A reader should be able to instantly understand the way the information is organized, the logical flow from one item to another.

14. Contrast Good Bad Good Contrast…..

15. Contrast (continued) What to avoid Don’t be a wimp. If you are going to contrast do it with strength. Avoid contrasting a sort-of-heavy line with a sort-of-heavier line. Avoid contrasting brown text with a black headline. Avoid using two or more type-faces that are similar.

16. Type (& life) Type is the basic building block of any printed page. In life, when there is more than one of anything, a dramatic relationship is established. A relationship is established that is either concordant, conflicting, or contrasting.

17. Type & life- Words to know Concordant Relationship occurs when you use only one type family, without much variety in style, in size, weight, and so on. Conflicting Relationship occurs when you combine separate type-faces that are similar in style, size, weight, and so on. Contrasting Relationship occurs when you combine separate type-faces and elements that are clearly distinct from each other.

18. Examples… Concord Conflict Contrast

19. Categories of Type Type-faces are divided into 6 basic groups: Oldstyle Modern Slab serif Sans serif Script Decorative Examples:

20. Categories of Type (continued) Oldstyle Based on the writing of ancient scribes. All lower case letters have serifs. Moderate thick/thin transition in strokes. Modern Developed in the 1700s due to smother paper and new printing techniques. Thinner serifs Vertical stress rather than diagonal

21. Categories of Type (continued) Slab serif Thicker type face developed solely for advertising. Also called Calrendon. Sans serif Type-face similar to previously stated but without the serifs. “Sans” means without in French

22. Categories of Type (continued) Script Includes all type-faces that appear to be hand written. Use sparingly, but don’t be scared of them. Decorative Easy to identify To much can be overpowering and just plain annoying.

23. Type Contrasts Six basic contrast techniques Size Weight Structure Form Direction Color Examples:

24. Type Contrasts (continued) Size Don’t be a wimp. But… If other elements have to be there…but aren’t really important—make them small! Does not always mean make is larger…but there should be contrast. Contrast of big over little is overwhelming. Do not use all caps, use a bigger font to make text appear larger. Use typographic symbols as decorative elements.

25. Type Contrasts (continued) Weight Refers to thickness and strokes. Don’t be a wimp. But… With a simple change– a heavier weight is more appealing. Most effective way of organizing information.

26. Type Contrasts (continued) Structure Refers to how it’s built. But… You must pull two faces from two different categories to type. Avoid using to scripts on same page. Build contrast in other ways, using different members of the same Sans serif family.

27. Type Contrasts (continued) Form Refers to the shape of the letters. An easy way to think of a contrast of form is to think of caps versus lowercase. Another clear contrast of form is Roman versus Italic. Since all scripts and italics have a slant and/or flow, never combine two different italic or script fonts.

28. Type Contrasts (continued) Direction An obvious interpretation of “direction” is type on a slant. Slant enhances the aesthetics or communication of the piece. Lines and Columns also add an interesting contrast of direction.

29. Type Contrasts (continued) Color Warm colors come forward and command attention while cool colors recede from our eyes. If you add color to heads with a stronger weight, you are more likely to attract attention. And that’s our point, right?