Formatting Text Techniques with CSS

Posted by dangtruong in CSS & HTML, Web Design on 09 8th, 2008 | no responses

(1 votes, average: 5.00 out of 5)

Loading ...

One of the most interesting things you can do to make text on your Web site look more exciting is to apply different fonts to headlines, paragraphs, and other written elements on your pages.

To apply a font to a CSS style, you use the font-family property:

font-family: Arial;

Figure 1.1. Why settle for boring and drab text (top), when you can make your headlines scream and your text sing with a few simple CSS properties (bottom)?

Figure 1.1

UP TO SPEED
Know Your Font Types

You can find literally tens of thousands of different fonts to express your every thought: from bookish, staid, and classical type faces to rounded, cartoonist squiggles. But almost all fonts fall into one of two categories: serif and sans-serif. Serif fonts are best for long passages of text, as it’s widely believed that the serifs those tiny “hands” and “feet” at the end of a letter’s main strokes gently lead the eye from letter to letter, making text easier to read. Examples of serif fonts are Times, Times New Roman, Georgia, and the font in the main body paragraphs of this book.

Sans-serif fonts, on the other hand, are often used for headlines, thanks to their clean and simple appearance. Examples of sans-serif fonts include Arial, Helvetica, Verdana, and Formata, which you’re reading now. Some people believe that you should use only sans-serif fonts on Web pages because they think the delicate decorative strokes of serif fonts don’t display well on the coarse resolution of a computer screen. In the end, your aesthetic judgment is your best guide. Pick the types of fonts you think look best.

1.1. Choosing a Font

Choose a font that makes your text eye-catching (especially if it’s a headline) and readable (especially if it’s main body text), as discussed in the box above. Unfortunately, you can’t use just any font you want. Well, actually you can use any font you want, but it won’t show up on a viewer’s computer unless she’s installed the same font on her system. So that handcrafted font you purchased from the small font boutique in Nome, Alaska, won’t do you any good on the Web unless each person viewing your site has also bought and installed that font. Otherwise, your visitors’ Web browsers will show your text in a default font, which is usually some version of Times for body text, and Arial or Helvetica for headlines.

Tip: For one cutting edge method of using any font you’d like for headline text, there’s a Flash-driven technique known as sIFR. Find out about it at http://wiki.novemberborn.net/sifr.

One solution’s to specify the font you’d like to use, as well as a couple of back-up choices. If your viewer’s computer has your first-choice font, then that’s what she’ll see. But when the first font isn’t installed, the browser looks down the list until it finds a font that is. The idea is to specify a list of similar-looking fonts that are common to a variety of operating systems, like so:

	font-family: Arial, Helvetica, sans-serif;

In this example, a Web browser first looks to see if the Arial font’s installed; if it is, then that font’s used; if not, the browser next looks for Helvetica, and if that isn’t installed, then it finally settles for a generic fontsans-serif. (For more information on common Mac and PC fonts, see Figure 1.2.) When you list a generic font type (like sans-serif or serif), the viewer’s browser gets to choose the actual font. But at least you can define its basic character. Here are some commonly used combinations, including a generic font type at the end of each list:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Tahoma, “Lucida Grande”, Arial, sans-serif
“Lucida Console”, Monaco, monospace
“Marker Felt”, “Comic Sans MS”, fantasy
“Century Gothic”, “Gill Sans”, Arial, sans-serif

Note: When a font name’s more than a single word, it must be enclosed by quotes like this: “Times New Roman”.

1.2. Adding Color to Text

Black and white’s great for Casablanca and Woody Allen films, but when it comes to text, a nice skyline blue looks much sharper and classier than drab black. Coloring your text with CSS is easy. In fact, you’ve used the color property in a few tutorials already. You have several different ways to define the exact color you want, but they all follow the same basic structure. You type color: followed by a color value:

	color: #3E8988;

In this example, the color value is a hexadecimal number indicating a muted shade of teal (more in a moment on what hexadecimal is).

Every graphics program from Fireworks to Photoshop to GIMP lets you select a color using hexadecimal or RGB values. Also, the color pickers built into Windows and Macs let you use a color wheel or palette to select the perfect color and translate it into a hexadecimal or RGB value.

Tip: If your color design sense needs some help, you can find lots of attractive, coordinated collections of colors at www.colorschemer.com/schemes/.

1.2.1. Hexadecimal color notation

The most common color system used by Web designers is hexadecimal notation. A color valuelike #6600FFactually contains 3 hexadecimal numbersin this example 66, 00, FFeach of which specify an amount of red, green, and blue, respectively. As in the RGB color system described next, the final color value is a blend of the amounts of red, green, and blue specified by these numbers.

Tip: You can shorten the hexadecimal numbers to just three characters if each set contains the same two numbers. For example, shorten #6600FF to #60F, or #FFFFFF to #FFF.

Figure 1.2. While Mac and Windows used to come with very different sets of preinstalled fonts, there’s been some convergence in the past few years. These days, you can count on the average Mac or PC to have the following fonts: Arial, Arial Black, Arial Narrow, Comic Sans MS, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana, and Webdings. If your audience includes Linux fans, then all bets are off, though Helvetica, Times, and Courier are safe bets. For a concise listing of fonts common to the two operating systems, check out www.ampsoft.net/webdesign-l/WindowsMacFonts.html.

Figure 1.2

1.2.2. RGB

You can also use the RGB red, green, bluemethod familiar in computer graphics programs. The color value consists of three numbers representing either percentages (0100 percent) or numbers between 0255 for each hue (red, green and blue). So when you want to set the text color to white (perhaps to set it off from an ominous dark page background), you can use this:

	color: rgb(100%,100%,100%);

	color: rgb(255,255,255);

Tip: If all these numbers and digits have your head spinning, then you can always fall back on the classic HTML color keywords. (Just don’t expect your site to win any awards for originality.) There are 17 colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. In CSS, you add them to your style like so: color: fuchsia;.