Font Properties | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

CSS1 provides numerous font-oriented properties to set the family, style, size , and variations of the font used within a Web page. In addition to font properties, you also can combine these rules with rules for color , background, margin, and spacing to create a variety of interesting typographic effects.

font-family

The font-family property is used to set the font family that is used to render text. The font-family property can be set to a specific font, such as Arial, or to a generic family, such as sans-serif. You have to quote any font family names that contain white space, such as "Britannic Bold" , and you may have to capitalize font values for a match.

According to the CSS1 specification, the following generic families should be available on all browsers that support CSS1:

serif (e.g., Times)
sans-serif (e.g., Helvetica)
cursive (e.g., Zapf-Chancery)
fantasy (e.g., Western)
monospace (e.g., Courier)

These default fonts as rendered by Internet Explorer, Mozilla, and Opera are shown here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  CSS Built-in Fonts  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--    body {font-size: xx-large;} -->  </style>   </head>   <body>   <div style="font-family: serif;">  serif  </div>   <div style="font-family: sans-serif;">  sans-serif  </div>   <div style="font-family: cursive;">  cursive  </div>   <div style="font-family: fantasy;">  fantasy  </div>   <div style="font-family: monospace;">  monospace  </div>   </body>   </html>

Like the <font> tag, when setting the font-family in CSS, you can provide a prioritized list of names, separated by commas, that will be checked in order. Remember to always provide a backup generic font family, as defined in CSS, at the end of the font-family list in case the user 's browser doesn't support the fonts suggested. To set a document-wide font, use a rule such as the following for the body element:

 body   {font-family: Futura, Arial, Helvetica, sans-serif;}

Whereas the font-family property allows both specific and generic CSS1 fonts to be specified, the only way to guarantee that a font is on a user's system is to use a downloadable font, which is discussed at the conclusion of the next chapter.

font-size

The font-size property is used to set the relative or physical size of the font used. The value for the property can be a value that is mapped to a physical point size or to a relative word describing the size. Keyword size values include xx-small , x-small , small , medium , large , x-large , and xx-large , or a relative word, such as larger or smaller . Physical sizes also might include examples, such as 48pt , 2cm , 12px , or .25in . Relative measurements including percentage values, such as 150% , also are valid for sizing. However, negative percentages or point sizes are not allowed. A few example rules are shown here:

 p        {font-size: 18pt;} strong   {font-size: larger;} .double  {font-size: 200%;}

One suggestion with the font-size property is to avoid setting point sizes, where possible, because users who can't see well might have a hard time adjusting size. On certain monitors , a 10-point font might look fine, but on others, it might be microscopic. If you use exact point size, remember to err in favor of readability and increase size.

font-style

The font-style property is used to specify normal , italic , or oblique font style for the font being used. A value of italic should select an italic version of a font, whereas a value of oblique might simply slant the font. In many cases, a value of italic or oblique results in the same exact rendering. A value of normal produces text that is in the Roman style ” straight up and down. Usually, this would be used to override an inherited italic style. A few examples are shown here:

 h1          {font-style: oblique;} .firstuse   {font-style: italic;} em          {font-style: normal;}

font-weight

The font-weight property selects the weight, or darkness , of the font. Values for the property range from 100 to 900 , in increments of 100. Keywords also are supported, including normal , bold , bolder , and lighter , which are used to set relative weights. Keywords such as extra- light , light , demi-light , medium , demi-bold , bold , and extra-bold , which correspond to the 100 to 900 values, are also provided. A few examples are shown here:

 .important  {font-weight: bolder;} h1          {font-weight: 900;} p.special   {font-weight: extra-bold;}

Typically, the value bold is the same as 700 , and the normal font value is 400 .

Note	Most browsers have trouble rendering different font weights onscreen beyond bold and normal. However, you may find that print output does respect weights.

font-variant

The font-variant property is used to select a variation of the specified (or default) font family. The only current variant supported with this property is small-caps , which displays text as small uppercase letters , and normal , which displays text in the normal style. Interestingly, small-cap text is often used in legal documents such as user software agreements, where all capitals show the importance, but the text is small so you won't read it. A simple rule is shown here:

 em   {font-variant: small-caps;}

font

The font property provides a concise way to specify all the font properties with one style rule. One attribute that is included within font is line-height , which specifies the distance between two lines of text. Each font attribute can be indicated on the line, separated by spaces, except for line-height , which is used with font-size and separated by a slash. This use of the size of a font followed by the height between lines of text is a common typographic measurement convention that is preserved in CSS. The general form of the font rule is shown here:

 font:  font-style font-variant font-weight font-size/line-height font-family

The following is an example of using a compact font rule:

 p   {font:italic small-caps 600 18pt/24pt "Arial, Helvetica";}

The shorthand notation does not require all the properties to be present, so the next example is just as valid as the complete notation:

 p   {font: italic 18pt/24pt;}

However, the ordering is important so be careful with this shorthand form.

Tip	When developing style sheets, you may want to use the specific rules at first and then combine them into shorthand rules once they work appropriately.

The following is a complete style sheet example that uses all the font rules:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  CSS1 Font Properties Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--  body         {font-size: 14pt;} .serif        {font-family: serif;} .sans-serif   {font-family: sans-serif;} .cursive      {font-family: cursive;} .fantasy      {font-family: fantasy;} .comic        {font-family: Comic Sans MS;} .xx-small     {font-size: xx-small;} .x-small      {font-size: x-small;} .small        {font-size: small;} .medium       {font-size: medium;} .large        {font-size: large;} .x-large      {font-size: x-large;} .xx-large     {font-size: xx-large;} .smaller      {font-size: smaller;} .larger       {font-size: larger;} .points       {font-size: 18pt;} .percentage   {font-size: 200%;} .italic       {font-style: italic;} .oblique      {font-style: oblique;} .weight       {font-weight: 900;} .smallcaps    {font-variant: small-caps;} -->  </style>   </head>   <body>   <h2>  Font Family  </h2>  This text is in  <span class="serif">  Serif.  </span><br />  This text is in  <span class="sans-serif">  Sans-Serif.  </span><br />  This text is in  <span class="cursive">  Cursive.  </span><br />  This text is in  <span class="fantasy">  Fantasy.  </span><br />  Actual fonts can be specified like  <span class="comic">  Comic Sans MS  </span><br />   <h2>  Font Sizing  </h2>  This is  <span class="xx-small">  xx-small text.  </span><br />  This is  <span class="x-small">  x-small text.  </span><br />  This is  <span class="small">  small text.  </span><br />  This is  <span class="medium">  medium text.  </span><br />  This is  <span class="large">  large text.  </span><br />  This is  <span class="x-large">  x-large text.  </span><br />  This is  <span class="xx-large">  xx-large text.  </span><br />  This is  <span class="smaller">  smaller text  </span>  than the rest.  <br />  This is  <span class="larger">  larger text  </span>  than the rest.  <br />  This is  <span class="points">  exactly 18 point text.  </span><br />  This is  <span class="percentage">  200% larger text.  </span><br />   <h2>  Font Style, Weight, and Variant  </h2>  This text is  <span class="italic">  italic.  </span><br />  This text is  <span class="oblique">  oblique.  </span><br />  This text is  <span class="weight">  bold.  </span><br />  This text is in  <span class="smallcaps">  smallcaps.  </span><br />   </body>   </html>

A rendering of the font example is shown in Figure 10-5. Note that in your browser, there may be slight rendering differences, particularly with named sizes.

Figure 10-5: Rendering of font example under Internet Explorer

< Day Day Up >