Typography is the art of arranging type. This document discusses key typography terms like typefaces, fonts, x-height, ascender, descender, serifs, sans serif, slab serif, script, decorative, distressed, and old style, modern, and decorative typeface categories. It also covers combining typefaces through contrast by using different colors, directions, forms, sizes, structures, or weights between typefaces. The goal is to achieve clear distinction or emphasis when contrasting typefaces.

1. Typography Lecture by: Penny Tan and JobyProvido

2. Things to know Terms used Categorizing typefaces Combining typefaces

3. Typography Etymology: from the Latin words typos (type) and graphos (written) The art and technique of Arranging type that involves the selection of: Typefaces Font size Leading (line space) Tracking (adjusting the space between a group of letters) Kerning (adjusting the space between two letters) Type design Modifying type glyphs

4. Typefaces A set of one or more fonts, in one or more sizes, designed with stylisticunity Theyusually comprise an alphabet of letters, numbers, punctuation marks, and specialcharacters (~ @ # $ % ^ & * _ + = « ‘ { } [ ] < > / )

5. Typefaces vs. Fonts Typefaces These are families of fonts. Times New Roman Arial fonts These are variations of a typeface. Arial Arial bold Arial italics Arial underline

6. Typeface terms x-height ascender descender baseline The horizontal guideline indicating where the bottom of characters without descenders appear to align Height of the lower case letters with no ascender or descender Part of the lower case letter that extends above the x-height Part of the lower case letter that extends below the x-height

7. Typeface terms italic roman

8. Point size size in points Point sizes are not exactly the same height. The following are all 50 points.

9. Stress The direction and degree of incline in the axis of a font with contrast It could be diagonal (oblique or biased), vertical, or horizontal stress

10. Serifs N A short line or finishing stroke that crosses or projects from stems or strokes in a character Also called a fillet; it is a shape that appears in a character at the junction of a serif and a main stroke The thinnest stroke of a letter serif bracket hairline

11. Serifs Slab Bold, rectangular appearance and sometimes has fixed widths, meaning all characters occupy the same amount of horizontal space Wedge Where the junction of the serif and the stem are diagonal rather than bracketed N

12. Serifs and brackets bracketed Serifs (feet) Palatino

13. Weight

14. Condensed and extended

15. Typeface categories Old style Modern Slabserif Sans serif Script Décorative Distressed

16. Old style lowercase serifs are slanted diagonal stress serifs bracketed gentle transition from thick to thin Formed the way scribes heldtheirpens in the late 1400s Most readablebecausetheyweremeant for long lines of text Warm and graceful

17. Old style

18. Old style samples

19. Modern lowercase serifs are horizontal vertical stress radical thick to thin serifs subtle or no bracketing Industrialrevolution = mechanical point of view Old style typefaceswerebecomingobsolete Elegant but severe and cold Not veryreadable

20. Modern

21. Modern samples

22. Slab serif Alsoknown as square serif All charactersoccupy the sameamount of horizontal space, as printed by a typewriter Industrialrevolution = advertising Advertisingneededthicktypefaces Thickening the modern typefaces made it impossible to read Thickened the serifsinstead MostlyEgyptiannamesbecausearcheologywas the in thing due to finding the rosetta stone Most slabserifs are calledClarendonsbecauseitepitomizes the letterform

23. Slab serif horizontal lowercase serifs vertical stress thick, fat serifs subtle thick to thin

24. Slab serif samples

25. Sans serif large x-height no serifs subtle or no transition from thick to thin Sansis French for without in 1816 William Caslon created the 2-line Egyptianwhereheremoved the serifsbecausehehatedthem. Not an instant hit The Bauhaus motto“form follows function” stripped typefaces to their bare essentials Futura is the epitome of this letterform Large x-height creates a presence

26. Sans serif sample

27. Script Emulateshandwriting Classy and formal In the 1400s only the richcouldafford books Books were made by scribes whowrote in script

28. Script samples

29. Decorative Enhances a theme Not meant for anything but for decoration Not to beused as text Adds punch to a publication Creates a look or emphasizes content If overused, itcan destroy a design

30. Decorative samples

31. Distressed distorted, deliberately trashed beauty in their ugliness Mac put desktop publishing in the hands of the masses. Rules of traditionaltypographyweredemolished Usersbecame more interested in typefaces and manymanipulatedtheirown also called fringe, grunge, garage, deconstructed, lawless

32. Distressed

33. Distressed samples

34. Combining typefaces

35. Combining typefaces concordant One family Safe but dull contrast Typefaces are clear and distinct from each other

36. Combining typefaces: Conflicting 2 or more typefaces that are similar in style, size, weight, etc. Disturbing because visual attraction is not concordant nor contrasting

37. Ways to achieve contrast Color Direction Form Size Structure Weight

38. Contrast by color You can change the ‘color’ of one typeface Leading (line spacing) Letterspacing Italic Weight Typistsalsorefer to density of text as color

39. Contrast by color samples

40. Contrast by color samples

41. Contrast by color samples

42. Contrast by direction Direction of how a text is read Horizontal Vertically downward Vertically upward Diagonally Down Diagonally Up Verdana

43. Contrast by direction samples

44. Contrast by direction samples A tall thin column of text has a vertical direction

45. Contrast by direction samples

46. Contrast by form Refers to the shape of the block of letters Templar

47. Contrast by form Oxford

48. Contrast by form samples

49. Contrast by form samples

50. Contrast by size Contrastbig type withsmall type Make the contrastobvious

51. Contrast by size samples Arial Lithe | Classic Typewriter Rockwell | Century Gothic Old English | Edwardian Script

52. Contrast by size samples

53. Contrast by structure Use typefacesfromfamilieswithdifferent structures Never put typefacesfrom the samefamily structure on the same page Ensurethat the contrastisemphasized Limit to only 3 families

54. Contrast by structure samples Trebuchet | Garamond Bodoni | clarendon

55. Contrast by structure samples

56. Contrast by weight Refers to the thickness of the strokes Strokescanbebold, semi-bold, extra bold, regular, light, etc. Great for organizing information Again, emphasize the contrast Put it all together.

57. Contrast by weight samples

58. Contrast by weight samples

59. Contrast by weight samples

60. Contrast by weight samples

61. More Samples