Intro to Multimedia Intro to Typography

Comparing Typography Pulp Fiction Pulp Fiction #1 Pulp Fiction Pulp Fiction #2 Disclaimer: The videos you are about to watch contain vulgar language. You may opt out of this part of the presentation if you like.

Typography  Defined The art and technique of selecting and arranging type styles, point sizes, line lengths, line leading, character spacing, and word spacing for typeset applications  Conveys mood  Communicates attitude

Typography Principles

Basic Principles  Proximity groups things together  Alignment connects visually to everything else  Repetition provides consistency to the product  Contrast adds visual interest

Proximity - Illustrated  Bugs Booklouse Box Elder Bugs Carpenter ants Carpet Beetles Clothes Moths Clover Mites Cockroaches Orchard Bees Pharaoh Ants Phorid Flies Pill Bugs  Bugs Booklouse Box Elder Bugs Carpenter ants Carpet Beetles Clothes Moths Clover Mites Cockroaches  Orchard Bees  Pharaoh Ants  Phorid Flies  Pill Bugs Carpenter Ants Reproductive winged female Reproductive winged male Minor workers Major workers Carpet Beetles Varied carpet beetles Black carpet beetles Phorid Flies Humpback flies Drain flies Carpenter Ants Reproductive winged female Reproductive winged male Minor workers Major workers Carpet Beetles Varied carpet beetles Black carpet beetles Phorid Flies Humpback flies Drain flies Carpenter Ants Reproductive winged female Reproductive winged male Minor workers Major workers Carpet Beetles Varied carpet beetles Black carpet beetles Phorid Flies Humpback flies Drain flies Carpenter Ants Reproductive winged female Reproductive winged male Minor workers Major workers Carpet Beetles Varied carpet beetles Black carpet beetles Phorid Flies Humpback flies Drain flies VS: The principle of proximity says that related items should be grouped together. Move related items close to each other and add separation between items that are not similar. This ensures that a group is formed rather than a selection of unrelated elements. The proximity of items communicates relationship. From: Thinkgeek.com

Proximity Errors  What to avoid: Placing too many separate elements on a page Sticking element in the corners and in the middle of the pages Leaving equal amounts of white space between elements (unless each group is part of a subset) Allowing confusion between related material Creating relationships with elements that don’t belong together

Alignment Every element should be visually linked, or aligned, with something else. This presents a cohesive look. Be conscious of items placed on the page –align it with something else, regardless of the distance. Every element should be visually linked, or aligned, with something else. This presents a cohesive look. Be conscious of items placed on the page –align it with something else, regardless of the distance. Avoid: Avoid using more than one text alignment Reduce the use of centered alignment (especially online)

Repetition Unify and add visual interest by repeating some aspect of the design. Repeat anything that someone will recognize visually. This can include type styles, spatial relationships, etc. Unify and add visual interest by repeating some aspect of the design. Repeat anything that someone will recognize visually. This can include type styles, spatial relationships, etc. Avoid: Too much repetition - it may annoy or overwhelm the viewer Excessive contrast of type styles

Contrast Use contrast to design something that is strongly visual and provides organizational hierarchy. Apply this when you want the elements to be very different. Use size, weight, color, direction, form and structure Use contrast to design something that is strongly visual and provides organizational hierarchy. Apply this when you want the elements to be very different. Use size, weight, color, direction, form and structure Avoid: Everything having the same weight and strength Weak contrast – make it strong

Typography Rules Avoid using all capitals with Script fonts Limit the number of serif fonts Align text as much as possible Group text together, aligning left, center or right DON’T USE SCRIPTS IN ALL CAPS Don’t use scripts in all caps DON’T USE SCRIPTS IN ALL CAPS Don’t use scripts in all caps

Go Forth and Communicate