Design and Typographic Principles

The Joshua Tree Principle Joshua Tree story example The four basic principles

Contrast Repetition Alignment Proximity

Proximity 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.

Proximity Examples Good Bad

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.

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.

Alignment Good Example Bad Example

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.

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.

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.

Repetition Good Bad

Repetition (continued) What to avoid

Avoid repeating an element so much that it becomes annoying or overwhelming.

Be conscious of the value of contrast.

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.

Contrast Good Bad

BadGood

Contrast…..

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.

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.

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.

Examples…Concord

Conflict Contrast

Categories of Type Type-faces are divided into 6 basic

groups: Oldstyle Modern Slab serif Sans serif Script Decorative

Examples:

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

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

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.

Type Contrasts Six basic contrast techniques

Size Weight Structure Form Direction Color

Examples:

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.

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.

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.

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.

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.

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?