Design ~ Typography Typography 101 Using Typography to Enhance Content.

40
Design ~ Typography Typography 101 Using Typography to Enhance Content

Transcript of Design ~ Typography Typography 101 Using Typography to Enhance Content.

Page 1: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

Typography 101

Using Typography

to Enhance Content

Page 2: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Designing with Type

Classifications and fonts:

R R R RSERIF

>Helvetica >Brush >Papyrus

SANS SERIF

>Times

SCRIPT DECORATIVE

Page 3: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Designing with Type

R R R RTHE FACES OF HELVETICA

>Thin >Roman >Bold>Italic

Styles:

Page 4: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Designing with Type

Typographic anatomy:

TYPE IS MEASURED IN POINTS

TypographyPOINT

SIZE

ASCENDER

DESCENDER

X-HEIGHT

Page 5: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Designing with Type

Alignment:~ Justified

This text block demonstrates justified text. The margins on the left and right are even so it is called justified. Text is often justified.

~ Align Center

This text block demonstrates align center. Each line of this text block is centered. Align center is often used for headlines.

~ Align Left

This text block demonstrates align left. The left margin is aligned, but the right margin is ragged, creating a more open look.

~ Align Right

This text block demonstrates align right. The right margin is aligned,

but the left margin is ragged. This isn’t suggested for lengthy text.

Page 6: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Designing with Type

Case:

This is a headline

this is a headline

THIS IS A HEADLINE

THIS IS A HEADLINE

~ Normal/Sentence Style

~ Lowercase

~ All-Caps

~ Small-Caps

Page 7: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

Designing with Type

Typographic sizes:> primary headlines: 30 to 200+ point

> secondary headlines: 12 to 18 point

> stories: 10 point

> secondary stories/quotes: 10 to 12 point, but varies

> captions: 8 point

> folios: 10 point or larger, depending on the

treatment

Page 8: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Designing with Type

Typographic tips:~ establish a hierarchy of sizes from large to small

~ resist the urge to use a lot of fonts; vary weight, case

and color to create different looks

~ combine two contrasting fonts [serif and sans serif]

~ readers should notice the words not the lettering

itself

Page 9: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // combining different types for effect

Page 10: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Type faces are similar; sizes and spacing differ

Page 11: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Outlined font and bold; all caps

Page 12: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Different sizes; same font

Page 13: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font as a design element

Page 14: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Strong font statement goes with photo

Page 15: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Photos in font

Page 16: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font integrated into the design

Page 17: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font goes with what it says; “Style Defined”

Page 18: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font with photo

Page 19: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY //Fancy font stands out with the squares and clean lines

Page 20: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font numbers make the quick reads stand out;

differing sizes

Page 21: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font design element

Page 22: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font makes quick reads stand out

Page 23: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font use defines the spaces for the quick reads

Page 24: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Use of lower case letters and strong number font

Page 25: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Font as a design tool; graphic

Page 26: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Drop cap and side bar with strong complementary fonts

Page 27: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Using fonts and type to define the space

Page 28: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Contrasting fonts; headline treatment

Page 29: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Silhouetted font behind headline

Page 30: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

When Using Script Never:

• use all caps

• mix two styles of script together on a page

Page 31: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

Tips for Choosing Type

Contrast your type.

Six ways to

do so:

•Size

•Weight

•Structure

•Form

•Direction

•Color

Page 32: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

• There must be an exaggerated difference, or it won’t appear to contrast

• Spacial contrast also works – little type in a large area of space

• If type elements must be included, but they are not important, shrink them

• Using upper/lower case words over all caps allows for more contrast in size

• Unusually large letters or symbols work well as graphic elements

Page 33: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

• Weight refers to the thickness of the stroke

• Be bold, don’t stop at a small or medium difference in weight, go for it!

• If you are combining different families, emphasize the weight difference

• Use weight differences for aesthetic purposes and for organization

Page 34: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

• Each category of type is founded on differences in structure

• If you are using two families of type, use two completely different structures

• Avoid setting two types from the same category, especially sans serif mono weights.

• Easy way to pick contrasting structure is to pick one serif and one sans serif and then emphasize contrasting weight and/or size

Page 35: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

• Form refers to a letter’s shape

• All capped words are different in form but are also more difficult to read

• Italic vs. Roman is another contrast of form

• Use the true italic form over oblique form if it is available for more contrast

• Since script fonts and italic forms are similar in many respects, never, never, never combine two script fonts, two italics, or a script and an italic

Page 36: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

Tips for Choosing Type

• Direction is the direction that an element of type of a body of type creates, for example, a line of type has a horizontal direction, a column of type has a vertical direction, and so on

• Sometimes a strong redirection of type (for example up the side of a page) creates impact

Page 37: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Headline design uses direction

Page 38: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

• On a color page, color contrasts refer to differences in color for emphasis

• Warm colors come forward, cool colors recede• On a black and white page, color refers to values of

gray obtained by tinting letters with percentages of black.

• Or, it refers to the shade of gray a large body of text creates because of the type’s structure, form, spacing between letters and lines, and size of the type

Page 39: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography

TYPE | typography

GALLERY // Contrasting color makes the words stand out

Page 40: Design ~ Typography Typography 101 Using Typography to Enhance Content.

Design ~ Typography Tips for Choosing Type

• Don’t just choose the default font

• Think about a font that matches your theme

• Then choose a contrasting font

• Play with your design to make the type stand out

• Have fun!