3. TYPEFACE TERMINOLOGY SERIFSANS-SERIFMONOSPACE

4. BASELINE TYPEFACE TERMINOLOGY

5. BASELINE DESCENDER TYPEFACE TERMINOLOGY

6. BASELINE DESCENDER CAP HEIGHT TYPEFACE TERMINOLOGY

7. BASELINE DESCENDER CAP HEIGHT ASCENDER TYPEFACE TERMINOLOGY

8. BASELINE DESCENDER X-HEIGHT CAP HEIGHT ASCENDER TYPEFACE TERMINOLOGY

9. WEIGHTSTYLESTRETCH TYPEFACE TERMINOLOGY

10. CHOOSING A TYPEFACE FOR YOUR WEBSITE SERIFSANS-SERIF

11. CHOOSING A TYPEFACE FOR YOUR WEBSITE MONOSPACECURSIVEFANTASY

12. CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family

13. CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family

14. CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family

15. CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family

16. RESULT

17. CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size

18. CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size

19. CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size

20. CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size

21. RESULT

22. TYPE SCALES Now used in programs such as Word, Photoshop and InDesign Pleasing to the eye Developed in 16th century

23. CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face

24. CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face

25. CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face

26. CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face

27. CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face

28. RESULT

29. CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot'); src: url('fonts/chunkfive.eot?#iefix') format('embedded-opentype'), url('fonts/chunkfive.woff') format('woff'), url('fonts/chunkfive.ttf') format('truetype'), url('fonts/ chunkfive.svg#ChunkFiveRegular') format('svg');} BULLETPROOF FONT FACE @font-face

30. RESULT

31. FONT FACE FORMATS FORMATS Must be supplied in several formats SERVICES fontsquirrel.com provides css rules and conversion LICENSING Fonts subject to copyright and need appropriate license

32. OTHER WAYS TO SPECIFY A FONT HOSTED FONTS Google web fonts Typekit SIFR Relies on Flash Easier licensing CUFON Uses JavaScript Requires appropriate license

33. CSS.credits { font-weight: bold;} BOLD font-weight

34. RESULT

35. CSS.credits { font-style: italic;} ITALIC font-style

36. RESULT

37. CSS h1 { text-transform: uppercase;} h2 { text-transform: lowercase;}.credits { text-transform: capitalize;} UPPERCASE & LOWERCASE text-transform

38. RESULT

39. CSS.credits { text-decoration: underline;} a { text-decoration: none;} UNDERLINE & STRIKE text-decoration

40. RESULT

41. CSS p { line-height: 1.4em;} LEADING line-height

42. RESULT

43. CSS h1, h2 { text-transform: uppercase; letter-spacing: 0.2em;}.credits { font-weight: bold; word-spacing: 1em;} LETTER & WORD SPACING letter-spacing, word-spacing

44. RESULT

45. CSS h1 { text-align: left;} p { text-align: justify;}.credits { text-align: right;} ALIGNMENT text-align

46. RESULT

47. CSS #six-months { vertical-align: text-top;} #one-year { vertical-align: baseline;} #two-years { vertical-align: text-bottom;} VERTICAL ALIGNMENT vertical-align

48. RESULT

49. CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent

50. CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent

51. CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent

52. CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent

53. RESULT

54. CSS p.one { background-color: #eeeeee; color: #666666; text-shadow: 1px 1px 0px #000000;} p.two { background-color: #dddddd; color: #666666; text-shadow: 1px 1px 3px #666666;} p.three { background-color: #cccccc; color: #ffffff; text-shadow: 2px 2px 7px #111111;} CSS3: DROP SHADOW text-shadow

55. RESULT

56. CSS p.intro:first-letter { font-size: 200%;} p.intro:first-line { font-weight: bold;} FIRST LETTER OR LINE :first-letter, :first-line

57. RESULT

58. CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited

59. CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited

60. CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited

61. CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited

62. CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited

63. RESULT

64. CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus

65. CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus

66. CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus

67. CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus

68. RESULT

69. ATTRIBUTE SELECTORS Existencep[class] Equalityp[class="dog"] Space p[class~="dog"] Prefix p[attr^="d"] Substring p[attr*="do"] Suffix p[attr$="g"]

70. There are properties to control the choice of font, size, weight, style, and spacing. SUMMARY

71. There is a limited choice of fonts that you can assume most people will have installed. SUMMARY

72. If you want to use a wider range of typefaces there are several options, but you need to have the right license to use them. SUMMARY

73. You can control the space between lines of text, individual letters, and words. SUMMARY

74. Pseudo-classes can change the style of an element when a user hovers over or clicks on text, or have visited a link. SUMMARY