Fonts CSS The Definitive Guide Chapter 5 Objectives

Fonts CSS The Definitive Guide Chapter 5

Objectives � 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

Font families � Times ◦ There are many variants of Times such as, Times. Regular, Times. Bold, Times. Italic, Times. Oblique or Times. Bold. Italic and more. � Verdana � Helvetica � Arial

5 generic font families in CSS: � 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.

Serif fonts for printing. 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 Verdana Arial Geneva Helvetica

Verdana good for a web site � One new typeface in particular - Verdana was released in 1996. 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 Consolas 2 Courier New 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 What cursive fonts are available to you now? Generic Font families

� 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

Using Generic Font families � 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.

Specifying a Font family h 1 {font-family: Georgia; } This will cause the user agent to display h 1 s 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 h 1 s.

P {font-family: Times, Times. NR, ‘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 $.

Font Weights � Values: normal bolder lighter 100 200 300 400 500 600 700 800 900 Keywords 100 -900 = 9 levels of weight

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

Styles and Variants � 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 fonttype / 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.

Italics vs Oblique

If using italic on a 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.

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

When to use the font-variant 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.

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

Summary � 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.

Think about the use � 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.

Give it a try! � 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.

Lab Assignment: � 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 email to pkouris@oakton. edu 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.