1. Typography

2.  Introduction to Typography  Font Collections ▪ Serif ▪ They have small strokes at the end of the character strokes ▪ Ex: Times New Roman, Georgia, Palatino ▪ Often times used for text ▪ Some debate about whether to use on-line or not ▪ Sans-serif ▪ Do not have small strokes at the end of character strokes ▪ Typically used for headers. ▪ Some fonts have been made specifically for the Web

3.  Font Collections  Monospace ▪ Equal spacing between letters ▪ Ex: Courier and Monotype  Cursive ▪ Looks like cursive handwriting ▪ Ex: Comic Sans MS  Fantasy ▪ Not in the other families ▪ Usually a special, unique style

4.  Fonts  You can choose from thousands of fonts but you need to determine whether your user has that font on their machine ▪ Reference: http://www.ampsoft.net/webdesign- l/WindowsMacFonts.htmlhttp://www.ampsoft.net/webdesign- l/WindowsMacFonts.html ▪ You can pay for fonts at TypeKit.com for example. ▪ You can use Google Fonts ▪ www.google.com/fonts ‎ ▪ Tutorial on using Google Fonts ▪ http://designshack.net/articles/css/a-beginners-guide-to-using-google-web- fonts/ http://designshack.net/articles/css/a-beginners-guide-to-using-google-web- fonts/ ▪ Use Photoshop to create headers in many diff fonts and save as image- don't worry about user having that font - See this week's PS tutorial.

5.  Using @font-face  Here is a step by step guide:  http://sixrevisions.com/css/font-face-guide/ http://sixrevisions.com/css/font-face-guide/ And a video featuring Font Squirrel http://net.tutsplus.com/tutorials/design-tutorials/quick- tip-how-to-work-with-font-face/  There are other techniques including:  Cufon  sIFR  FLIR

6.  So which technique do I use?  If you have money and for professional design you can pay and use a site like Typekit  You can always use the web safe fonts that come with the machines – free, try to match for MAC and Windows  Photoshop makes great headers and no worries about the user having the fonts because it is an image  Google fonts is pretty easy and free – test!  And lastly @font-face has made some progress and Font Squirrel makes it somewhat better but still complex.

7. ▪ Spend time knowing a small group of serif and sans serif font families. Get to know which font families contrast enough for headers and body text. ▪ http://www.w3schools.com/cssref/css_websafe_fonts.asp http://www.w3schools.com/cssref/css_websafe_fonts.asp ▪ Don't just choose willy-nilly or it will look willy-nilly.  Typically you specify a font-family for the bodytag and then override it when necessary ▪ body {font-family:Helvetica, Arial, sans-serif;} ▪ Goes from specific to ending in general- if browser cannot find Helvetica or Arial it will use one of its sans-serif fonts ▪ If font-family is two words then use quotes around it

8.  Fonts  Font-family property is inherited by all of the children so it will propagate throughout your document  Sizing of fonts ▪ Absolute (points, pixels, inches) or relative (ems, percentages) ▪ Good article on setting font size ▪ http://www.maxdesign.com.au/articles/relative/ http://www.maxdesign.com.au/articles/relative/

9.  Fonts  Many people recommend using ems or percentages so that their sizes can easily be adjusted and it’s good for accessibility  Em – is the default size being used by your browser- typically this is 16px ▪ You can adjust sizes by varying the multiplier of the em ▪ 1em = 16px, 2em=32px, 1.5em=24px ▪ Ex. body { font-family: helvetica, arial, sans-serif; font- size:1em}  Good article: http://www.sitepoint.com/css-font- sizing-tutorial/http://www.sitepoint.com/css-font- sizing-tutorial/

10.  Nested Tags  Be careful when using nested tags and font-sizes  The calculated font-size is inherited and not the absolute value  If you have an unordered list within a paragraph and change the font-sizes you may be surprised ▪ p {font-size:.8em;} ▪ ul{ font-size:.75em;} ▪ If 1em equals 16 px then the p text will be 12.8 and the ul will be 9.6 ▪ You can set the font-size property to inherit which will cause it to take on its parent’s size

11.  Here is a site that has a short article on font categories and some history of font usage: http://dev.opera.com/articles/view/fonts-for- web-design-a-primer/  What would my web page look like with a different font typeface – very nice.  TypeWonder ▪ http://typewonder.com/ http://typewonder.com/

12.  A wonderful tool for experimentation  http://www.typetester.org/ http://www.typetester.org/  Reference Sheet  http://speckyboy.com/2008/10/06/css- typography-reference-sheet-get-creative-with- your-headlines/ http://speckyboy.com/2008/10/06/css- typography-reference-sheet-get-creative-with- your-headlines/

13.  Other properties  font-style ▪ Values: normal italic and oblique ▪ h3 {font-style:italic;}  font-weight ▪ Values: bold, normal ▪ h3 {font-weight:bold;}  font-variant ▪ Values: small-caps, normal ▪ H3 { font-variant:small-caps;}

14.  Font Property Shorthand  Must always declare font-size and font-family  Sequence ▪ 1 font-weight, font-style, font-variant in any order then ▪ 2 font-size then ▪ 3 font-family ▪ Ex: p {font:bold italic small-caps.75em verdana, arial, sans-serif;}

15.  Text properties  Text-indent  Letter-spacing  Word-spacing  Text-decoration  Text-align  Line-height  Text-transform  Vertical-align

16.  A resource list of articles:  http://www.noupe.com/css/css-typography-contrast- techniques-tutorials-and-best-practices.html http://www.noupe.com/css/css-typography-contrast- techniques-tutorials-and-best-practices.html  http://www.papress.com/thinkingwithtype/index.htm http://www.papress.com/thinkingwithtype/index.htm  http://webdesignledger.com/resources/12-css-tools-and- tutorials-for-beautiful-web-typography http://webdesignledger.com/resources/12-css-tools-and- tutorials-for-beautiful-web-typography  http://www.webdesignerwall.com/tutorials/typographic- contrast-flow/ http://www.webdesignerwall.com/tutorials/typographic- contrast-flow/  http://www.thedesigncubicle.com/2009/11/typography-is- the-backbone-of-good-web-design/ http://www.thedesigncubicle.com/2009/11/typography-is- the-backbone-of-good-web-design/  http://webdesign.tutsplus.com/articles/choosing-the- right-font-a-practical-guide-to-typography-on-the-web/ http://webdesign.tutsplus.com/articles/choosing-the- right-font-a-practical-guide-to-typography-on-the-web/