3. TYPEFACE TERMINOLOGY SERIF SANS-SERIF MONOSPACE
Explain: names for different types of typeface (point out differences)
Click: serif
Click: sans-serif
Click: monospace

4. TYPEFACE TERMINOLOGY BASELINE Explain: terms used Fade in: 'The xyz'
Click: Baseline
Click: Descender
Click: Cap Height
Click: Ascender
Click: X-height
BASELINE

5. TYPEFACE TERMINOLOGY BASELINE DESCENDER Explain: terms used
Fade in: 'The xyz'
Click: Baseline
Click: Descender
Click: Cap Height
Click: Ascender
Click: X-height
BASELINE
DESCENDER

6. TYPEFACE TERMINOLOGY CAP HEIGHT BASELINE DESCENDER Explain: terms used
Fade in: 'The xyz'
Click: Baseline
Click: Descender
Click: Cap Height
Click: Ascender
Click: X-height
BASELINE
DESCENDER

7. TYPEFACE TERMINOLOGY ASCENDER CAP HEIGHT BASELINE DESCENDER
Explain: terms used
Fade in: 'The xyz'
Click: Baseline
Click: Descender
Click: Cap Height
Click: Ascender
Click: X-height
BASELINE
DESCENDER

8. TYPEFACE TERMINOLOGY ASCENDER CAP HEIGHT X-HEIGHT BASELINE DESCENDER
Explain: terms used
Fade in: 'The xyz'
Click: Baseline
Click: Descender
Click: Cap Height
Click: Ascender
Click: X-height
X-HEIGHT
BASELINE
DESCENDER

9. TYPEFACE TERMINOLOGY WEIGHT STYLE STRETCH
Explain: different terms used
Fade in: weight
Click: style
Click: stretch

10. CHOOSING A TYPEFACE FOR YOUR WEBSITE
SERIF
SANS-SERIF
Explain: will see examples of each type of font, and how you can provide preferences in CSS (comma-delimited)
Explain: generic name can come at end of font-stack
Click: serif
Click: sans-serif
Continues on next slide

11. CHOOSING A TYPEFACE FOR YOUR WEBSITE
MONOSPACE
CURSIVE
FANTASY
Click: monospace
Click: cursive
Click: fantasy

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

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

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

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

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

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

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

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

22. TYPE SCALES Developed in 16th century Pleasing to the eye
Note: Type scale developed in 16th century
Explain: Can create different sizes in relation to the body text based on this scale
Now used in programs such as Word, Photoshop and InDesign

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

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

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

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

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

29. BULLETPROOF FONT FACE @font-face
@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');}
Explain: example of using font-face (no need to learn syntax)
Can generate CSS using a site like fontsquirrel.com
Different browsers require different formats of font (can also be generated by sites like fontaquirrel.com

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

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

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

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

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

39. UNDERLINE & STRIKE text-decoration
.credits { text-decoration: underline;} a { text-decoration: none;}
Note: often used on links to remove default underline
Possible values: none, underline, overline, line-through, blink

41. LEADING line-height p { line-height: 1.4em;}
note now underline is removed from the link

43. letter-spacing, word-spacing
LETTER & WORD SPACING
letter-spacing, word-spacing
h1, h2 { text-transform: uppercase; letter-spacing: 0.2em;} .credits { font-weight: bold; word-spacing: 1em;}
Note: letter-spacing especially helpful when using uppercase lettering

45. ALIGNMENT
text-align
h1 { text-align: left;} p { text-align: justify;} .credits { text-align: right;}
Possible values: left, right, center, justify

47. VERTICAL ALIGNMENT vertical-align
#six-months { vertical-align: text-top;} #one-year { vertical-align: baseline;} #two-years { vertical-align: text-bottom;}
Possible values: baseline, sub, super, top, text-top, middle, bottom, text-bottom

49. INDENTING TEXT text-indent
h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;} .credits { text-indent: 20px;}
This example demonstrates using an image instead of <h1> text.

50. INDENTING TEXT text-indent
h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;} .credits { text-indent: 20px;}
(Note: The background-image will be covered later on.)

51. INDENTING TEXT text-indent
h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;} .credits { text-indent: 20px;}
This code moves the text far off the screen.

52. INDENTING TEXT text-indent
h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;} .credits { text-indent: 20px;}
This is just used to move the text in.

54. CSS3: DROP SHADOW text-shadow
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;}
Shows several examples of text-shadows
Values:
- 1st: how far to left or right shadow falls
- 2nd: distance to top or bottom shadow should fall
- 3rd: blur amount (optional)
- 4th: color

56. :first-letter, :first-line
FIRST LETTER OR LINE
:first-letter, :first-line
p.intro:first-letter { font-size: 200%;} p.intro:first-line { font-weight: bold;}
Note: these are pseudo-elements
Need to resize browser to see how first-line really just shows first line

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

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

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

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

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

64. RESPONDING TO USERS :hover, :active, :focus
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;}

65. RESPONDING TO USERS :hover, :active, :focus
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;}

66. RESPONDING TO USERS :hover, :active, :focus
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;}

67. RESPONDING TO USERS :hover, :active, :focus
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;}

69. ATTRIBUTE SELECTORS Existence p[class] Equality p[class="dog"] Space
Fade in: existence (matches attribute - whatever the value)
Click: equality (matches attribute value)
Click: space (value appears in space separated list of words)
Click: prefix (value begins with string)
Click: substring (value contains substring)
Click suffix (value ends with string)
Space
p[class~="dog"]
Prefix
p[attr^="d"]
Substring
p[attr*="do"]
Suffix
p[attr$="g"]

70. SUMMARY
There are properties to control the choice of font, size, weight, style,
and spacing.
Clicks: Load individual bullets

71. There is a limited choice
SUMMARY
There is a limited choice
of fonts that you can assume most people will have installed.
Clicks: Load individual bullets

72. SUMMARY
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.
Clicks: Load individual bullets

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

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