CSS The Definitive Guide Chapter 5

 You will understand why setting font properties will be among the most common uses of style sheets.  Font family differences  Using the 5 generic font families  Understand font-weights  Understand font-size  Styles and Variants  The difference between italic and oblique  Font variations  Small-caps  Adding style and interest to your text through the use of attributes

 Times ◦ There are many variants of Times such as, TimesRegular, TimesBold, TimesItalic, TimesOblique or TimesBoldItalic and more.  Verdana  Helvetica  Arial

 Serif fonts ~ are proportional and have serifs. A font is proportional if all characters in the font have different widths due to their various sizes. Serifs are the decorations on the ends of strokes within each character. EX: Times Georgia New Century Schoolbook

 While serif fonts are hard to read online, they are perfect for print. If you have print friendly versions of your site, this is the perfect place to use serif fonts. The serifs, in print, make it easier to read, as they allow people to differentiate the letters more clearly. And because print has a higher resolution, they can be seen more clearly and don't appear to blur together.

Always use serif fonts for your print-friendly pages.

 Sans-serif fonts ~ These fonts are proportional and do not have serifs.  Web pages are intended to be viewed by Web browsers on computer monitors. And computer monitors don't have as good of resolution as paper. This means that when your readers view a page of serif font on the screen, the little serifs all blur together and start making the text harder to read.

Always use sans-serif fonts for your Web page main copy Ex: Tahoma Geneva Verdana Helvetica Arial

 One new typeface in particular - Verdana - was released in It is a sans serif font with a “humanistic quality” and looks good on both PCs and Macs. Because of this, it is one of the most popular, widely-used fonts on the web. (Note: You are currently reading text in Verdana.)

 Monospace fonts ~ Are not proportional. These emulate type-written text, the output from an old dot-matrix printer. All characters are the exact same width. So i would be the same with as m. May or may not have serifs.  If a font has uniform character widths, it is classified as monospace, regardless of the presence of serifs.  EX: Bookman Old Style Courier New Consolas Generic Font families

 Cursive fonts ~ These fonts attempt human handwriting. Usually they are composed of largely of cursves and have stroke decorations that exceed those found in serif fonts.  EX: Edwardian Script ITC Freestyle Script Brush Script MT

 Fantasy Fonts ~ These are not really defined by any single characteristic other than our inability to easily classify them in on of the other familes.  EX: Western Woodblock Klingon

Use fantasy and cursive fonts in images and as headlines or call-outs. Keep them short and be aware that whatever font you choose will probably not be on a majority of your readers' computers

 If you want a document to use a sans-serif font, but you do not care which one, then the appropriate declaration would be this: Body {font-family: sans-serif;} Using the above would cause the user agent to pick a sans-serif font family and apply it to the body element.

h1 {font-family: Georgia;} This will cause the user agent to display h1s using Georgia. Assuming that the user agent has Georgia available for use. If it doesn’t the user agent will use it’s default font to display the h1s.

P {font-family: Times, TimesNR, ‘New Century Schoolbook’, Georgia, ‘New York’, serif;} Based on the above list the user agent will look for the fonts in the order they’re listed. If none are available then it will simply pick a serif font that is available. Single Quotation marks-Used in a font-family declaration only if the font name has one or more spaces. Or if the font name includes symbols such as # or $.

 Values: normal bold bolder lighter Keywords = 9 levels of weight

 Has relative-size keywords called larger and smaller.  Values: xx-small x-small small medium large x-large xx-large smaller

 Font-style is used to select normal text, italic text and oblique text.  Default value of font-style = normal  The only complication is recognizing the difference between italic and oblique. The Oblique Style uses the same font as Normal (non-italic version of the font- type / font-face) but skews (slants) it to the right a-little before presenting it to the screen – it looks less readable than the true Italic version. While the Italic Style uses a Italic type/version of the font, most of the time almost all fonts have a Italic version of the font which has special characters defined for it. But that is not Always the case, some times the Font Designer doesn’t provide those and only provides the Normal version of the font.

font-type (font-face) that doesn’t have its own true Italic version of the font, it will automatically use the Oblique version which just uses the regular version of the font but skews / slants it a-little to the right so it appear as if it were the Italic version. It would be called more like a fake Italic.

 Has two non-inherit values: 1)The default of normal ~ describes ordinary text 2)Small-caps

 Use small caps for acronyms. Set acronyms such as NASA or NASDAQ in small caps when they appear in body text or headlines.  Use small caps for common abbreviations. Set common abbreviations such as AM or PM in small caps so they don't overpower the accompanying text.  Use small caps for headlines. For an elegant and more readable look than all caps, set headlines or short phrases in small caps.

 Because of the many properties a font can have there is a shorthand property for all of the font properties. h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 900; font-style: italic; font-variant: small- caps;} Could be written as (Shorthand): h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

 Add style and interest to your text through the use of “attributes.”  These stylistic elements introduce variety and help you better convey your message.  The most common font attributes are plain, bold, italic, underline, CAPITALS and color.font

 When used, these elements become part of your site’s overall design.  If used sparingly, they can be effective.  When overused, your page can look cluttered and unprofessional.unprofessional

 Be consistent when applying attributes and remember that “less is more.”  While fonts may not seem as important a design element as color and graphics, thoughtful consideration should go into your selections.  The fonts will convey important information about your company, products and services.  They will help visitors navigate your site and interact with you.

 Most important, the right fonts will contribute to your site’s overall mood and visitor experience.  If it’s positive and easy on the eye, you know you’ve made the right choices.

 Working with Fonts:  Create CSS styles for your on going web site using fonts and some of it attributes.  Start to create a look and feel/mood of your site by incorporating the use of fonts and their attributes.  Please to where you have added additional fonts with different attributes on your site using CSS styles.  Also describe why you choose these font styles and what mood you are trying to create for your site.