INFSCI 1052

1. Typography INFSCI 1052

2. Typography • 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 • 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. Font Choice • 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.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/ • 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. Font Choice • Using @font-face • Here is a step by step 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. What the Font? • 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. Using the Font-family Property • 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 • 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. Inheritance • 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/

9. Font Sizing • 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/

10. Font Tag Nesting • 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. Good Read on Typography • 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/

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

13. Font CSS Properties • 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 • 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 properties • Text-indent • Letter-spacing • Word-spacing • Text-decoration • Text-align • Line-height • Text-transform • Vertical-align

16. Typography • A resource list of articles: • http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html • http://www.papress.com/thinkingwithtype/index.htm • http://webdesignledger.com/resources/12-css-tools-and-tutorials-for-beautiful-web-typography • http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/ • 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/