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

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

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

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

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

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

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

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

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

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;}

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;}

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;}

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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.)

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.

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.

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

: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

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;}

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;}

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;}

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;}

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;}

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;}

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;}

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;}

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;}

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"]

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

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

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

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

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