Presentation is loading. Please wait.

Presentation is loading. Please wait.

Typography 101 Using Typography to Enhance Content.

Similar presentations

Presentation on theme: "Typography 101 Using Typography to Enhance Content."— Presentation transcript:

1 Typography 101 Using Typography to Enhance Content

2 R R R R Designing with Type Classifications and fonts: >Times

3 R R R R Designing with Type Styles: >Italic >Thin >Roman

4 Typography Designing with Type Typographic anatomy:

5 Designing with Type Alignment: ~ Justified ~ Align Center ~ Align Left
This text block demonstrates justified text. The margins on the left and right are even so it is called justified. Text is often justified. This text block demonstrates align center. Each line of this text block is centered. Align center is often used for headlines. ~ Align Left ~ Align Right This text block demonstrates align left. The left margin is aligned, but the right margin is ragged, creating a more open look. This text block demonstrates align right. The right margin is aligned, but the left margin is ragged. This isn’t suggested for lengthy text.

6 Designing with Type This is a headline this is a headline
Case: This is a headline this is a headline THIS IS A HEADLINE ~ Normal/Sentence Style ~ Lowercase ~ All-Caps ~ Small-Caps

7 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

8 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

9 GALLERY // combining different
types for effect TYPE | typography

10 TYPE | typography GALLERY // Type faces are similar;
sizes and spacing differ TYPE | typography

11 GALLERY // Outlined font and bold; all caps
TYPE | typography

12 GALLERY // Different sizes; same font
TYPE | typography

13 GALLERY // Font as a design element
TYPE | typography

14 GALLERY // Strong font statement
goes with photo TYPE | typography

15 GALLERY // Photos in font
TYPE | typography

16 GALLERY // Font integrated into the design
TYPE | typography

17 GALLERY // Font goes with what it says; “Style Defined”
TYPE | typography

18 GALLERY // Font with photo
TYPE | typography

19 GALLERY //Fancy font stands out with the squares and clean lines
TYPE | typography

20 GALLERY // Font numbers make the quick reads stand out; differing sizes
TYPE | typography

21 GALLERY // Font design element
TYPE | typography

22 GALLERY // Font makes quick reads stand out
TYPE | typography

23 GALLERY // Font use defines the spaces for the quick reads
TYPE | typography

24 GALLERY // Use of lower case letters and strong number font
TYPE | typography

25 GALLERY // Font as a design tool; graphic
TYPE | typography

26 GALLERY // Drop cap and side bar with strong complementary fonts
TYPE | typography

27 GALLERY // Using fonts and type to define the space
TYPE | typography

28 GALLERY // Contrasting fonts; headline treatment
TYPE | typography

29 GALLERY // Silhouetted font behind headline
TYPE | typography

30 Tips for Choosing Type When Using Script Never: use all caps
mix two styles of script together on a page

31 Tips for Choosing Type Contrast your type. Six ways to do so: Size
Weight Structure Form Direction Color

32 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

33 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

34 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

35 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

36 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

37 GALLERY // Headline design uses direction
TYPE | typography

38 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

39 GALLERY // Contrasting color makes the words stand out
TYPE | typography

40 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!

Download ppt "Typography 101 Using Typography to Enhance Content."

Similar presentations

Ads by Google