1 / 16

INFSCI 1052

Typography. INFSCI 1052. 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

ayla
Download Presentation

INFSCI 1052

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/

More Related