Presentation is loading. Please wait.

Presentation is loading. Please wait.

Design ~ Typography Typography 101 Using Typography to Enhance Content.

Similar presentations


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

1 Design ~ Typography Typography 101 Using Typography to Enhance Content

2 Design ~ Typography Designing with Type Classifications and fonts: R R R R SERIF >Helvetica>Brush>Papyrus SANS SERIF >Times SCRIPTDECORATIVE

3 Design ~ Typography Designing with Type R RR R THE FACES OF HELVETICA >Thin>Roman >Bold >Italic Styles:

4 Design ~ Typography Designing with Type Typographic anatomy: TYPE IS MEASURED IN POINTS Typography POINT SIZE ASCENDER DESCENDER X-HEIGHT

5 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 isnt suggested for lengthy text.

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

7 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

8 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

9 Design ~ Typography TYPE | typography GALLERY // combining different types for effect

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

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

12 Design ~ Typography TYPE | typography GALLERY // Different sizes; same font

13 Design ~ Typography TYPE | typography GALLERY // Font as a design element

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

15 Design ~ Typography TYPE | typography GALLERY // Photos in font

16 Design ~ Typography TYPE | typography GALLERY // Font integrated into the design

17 Design ~ Typography TYPE | typography GALLERY // Font goes with what it says; Style Defined

18 Design ~ Typography TYPE | typography GALLERY // Font with photo

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

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

21 Design ~ Typography TYPE | typography GALLERY // Font design element

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

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

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

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

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

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

28 Design ~ Typography TYPE | typography GALLERY // Contrasting fonts; headline treatment

29 Design ~ Typography TYPE | typography GALLERY // Silhouetted font behind headline

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

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

32 Design ~ Typography Tips for Choosing Type There must be an exaggerated difference, or it wont 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 Design ~ Typography Tips for Choosing Type Weight refers to the thickness of the stroke Be bold, dont 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 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

35 Design ~ Typography Tips for Choosing Type Form refers to a letters 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 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

37 Design ~ Typography TYPE | typography GALLERY // Headline design uses direction

38 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 types structure, form, spacing between letters and lines, and size of the type

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

40 Design ~ Typography Tips for Choosing Type Dont 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 "Design ~ Typography Typography 101 Using Typography to Enhance Content."

Similar presentations


Ads by Google