Chapter 3: Stylin ’ Fonts and Text

1. Chapter 3: Stylin’ Fonts and Text

2. Fonts and Text • Same? No. Text = words on a page. • Fonts – Different kinds of typefaces. Each font is a set of letters, numbers, and symbols with a unique visual appearance. • All fonts belong to large collections (serif, sans-serif, etc.). • Font collections are made up of font families (Helvetica, Times, etc.). • Font families are broken down into font faces, which are variations on the basic family (Times New Roman, Helvetica Condensed, etc.). • Why does this matter to CSS? • CSS has a set of properties relating to fonts, and a set relating to text. • Font properties relate to the size and appearance of a collection of type. • Text properties relate to the font’s treatment (line height, spacing, etc.)

3. Font Collections • Five generic collection names: serif, sans-serif, monospace, fantasy, and cursive. • Serif – See figure 3.1 • Sans-serif – See figure 3.1 • Monospace – give equal spacing to every letter and are • typically used for code blocks, or to look like a typewriter. • Cursive – look like cursive handwriting. • Fantasy – fonts that don’t fit in other categories, and are impossible to predict how a font might look in a browser. Best to avoid. • To specify a generic font: • body {font-family:sans-serif;} • - Browser will automatically assign its default sans-serif font to the body text.

4. Font Families • Don’t have the freedom to choose any font you wish in the web world, unlike the print world. • A user must have the font you’re using installed on his/her machine in order to display your font correctly. • Best to stick with a few fonts that are common on everyone’s machine. • Can list fonts in order of preference: • body {font-family:”trebuchet ms”, helvetica, arial, sans-serif;} • - “Display text in ‘Trebuchet MS,’ and if you don’t have it, use Helvetica or Arial– as a last resort, use the generic sans-serif font.” • Vista users have the option of using Clear-type fonts, so adding one of them first in your font-family declaration, allows Vista users to see your text in Clear-type. (Link to example)

5. Modifying Font <style type="text/css"> body {font-family: verdana, arial, sans-serif;} </style> Example 1 has no font declaration, so it uses the browser’s default font of Times. Link to example Link to example

6. Sizing Fonts • You can use three types of values to size fonts: absolute (pixels, inches), relative (percentage, ems), “sweatshirt keywords” (x-small, x-large, medium, etc.). • Most beneficial to size fonts in ems, due to its relative consistency when a browser window is resized, and its ability to work with user-specified style sheets. • Set a baseline font-size in the bodystyle declaration. Browser’s default size for a paragraph is 16px, so setting the font-size to .75em in the body, will make the font-size baseline 12px for the entire document. • If you want to further modify the size later in the document, you must take into account that the baseline is no longer the browser’s– it’s what you declared in the body. So, if you want your text to be two times as big as your baseline, you would set it to 2em.

7. Sizing Fonts body{ font-family: verdana, arial, sans-serif; font-size: 1em; } h1{font-size:1em;} h2{font-size:.8em;} p{font-size:.8em;} ul{font-size:.75em;} a{font-size:.7em;} Notice how the link is smaller. This is due to inheritance as the font-size for ul is set to .75, and for a is set to .7 (.7 x .75 = .525em) . We can fix this by adding a contextual selector for this specific case: ul{font-size:.75em;} ul a{font-size:inherit;} a{font-size:.7em;} Style font sizes top-down from the body tag.

8. Other Font Properties • Font-style: Make your text italics or not. Values: normal, italic, oblique • h2 {font-style:italic;} • Font-weight: Makes your text bold. Values: bold, bolder, 100-900, lighter, normal • h2 {font-weight:bold;} (Nothing but “bold” and “normal” renders). • Font-variant: Allows small-caps. Values: small-caps, normal • h2 {font-variant:small-caps;} • Font (shorthand): Allows you to specify all the previous font properties in one declaration. Order: font-weight, font-style, font-variant, font-size, font-family • h2 {font: bold italic small-caps .75em verdana, arial, sans-serif;}

9. Text Properties • Text-indent – sets the start position of a text box (paragraph, etc.) in relation to the containing element. Values: -∞ ∞ • p {text-indent:3em;} • p {text-indent:-3em;} • Can avoid this problem by specifying a left margin value greater than the specified negative indent. • p {text-indent:-1.5em; margin-left:2em;}

10. Text Properties • Letter-Spacing Property – specifies the spacing between letters. Values: - ∞  ∞ • p {letter-spacing:.2em;} • Word-Spacing Property – specifies the spacing between words. Values: - ∞  ∞ • p {word-spacing:.2em;} • CSS treats any character(s) with white space around them as words. Link to example

11. Text Properties • Text-Decoration property – Mainly used to underline or un-underline links. • Values: underline, overline, line-through, blink • p {text-decoration:line-through;} • Text-Align property – Aligns horizontally with respect to the containing element. • Values: left, right, center, justify • p {text-align:right;} • You must set the property on the container, not the element itself. Link to example

12. Text Properties • Line-Height property – Adjusts the space between lines of text. • Values: -∞  ∞ • p {line-height:1.5;} • Text-Transform property – Changes the capitalization of text. • Values: uppercase, lowercase, capitalize, none • p {text-transform:uppercase;} Link to example

13. Text Properties • Vertical-align property – Moves text up or down with respect to a baseline. • Values: -∞  ∞, sub, sup, top, middle, bottom • p {vertical-align:60%} • Useful for creating sub/superscripts, asterisks, footnotes. There are XHTML tags sup and sub which create sub/superscripts directly, but they tend to be out of place and too large to accurately do so. Use a custom style like the one above.