The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 2 - Text Styling and Other Basics

This chapter explores the applications of CSS for styling text, and covers a lot of CSS basics as well as answering some of the more frequently asked questions. If you're new to CSS, these examples will introduce you to a variety of properties and usages, and will give you a broad overview from which to start your own experiments with CSS. For those who are already familiar with CSS, this chapter will serve as a quick refresher for those moments when you can't quite remember how to achieve a certain effect.

The examples provided here are well supported across a variety of browsers and versions. As always, testing your code across different browsers is important; however, the text styling properties have good support. While there may be small inconsistencies or some lack of support in older browsers, nothing here should cause you any serious problems. Note also that, if you'd rather read this information offline, you can download the .pdf version of the first 4 chapters here.

How do I replace font tags with CSS?

The styling of text with CSS is supported by version 4 browsers and above, so there is no compelling reason to continue to use <font> tags to style text. At its very simplest, you can use CSS to replace the font tags in your site.

Using font tags, you would need to set the style for each paragraph on your page.

<p><font color="#800080"
     face="Verdana,Geneva,Arial,Helvetica,sans-serif">These
   stuffed peppers are lovely as a starter, or as a side dish
   for a Chinese meal. They also go down well as part of a
   buffet and even children seem to like them.</font></p>

Solution

Using CSS, you would simply define in the style sheet that the color property of the <p> tag is #800080, and that the font-family should be Verdana,Geneva,Arial,Helvetica,sans-serif:

p {
 color: #800080;
 font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
}

Now, every time you add to your document text enclosed in a <p> tag, it will take on this style, and save you from needing to add reams of extra markup to your document. It also makes life a lot easier if your client suddenly wants to change the font from Verdana to Times on 100 documents!

Should I use pixels, points, ems or something else for font sizes?

You can size text in CSS using the font-size property. For example:

font-size: 12px;

However, there are a variety of other ways to set the size of your fonts. Deciding which to use requires you to know a little about the relative merits of each.

Solution

The Units of Font Sizing

Table 2.1 describes the units that you can use to size fonts.

Points and Picas

p {
 font-size: 10pt;
}

You should avoid using points and picas to style text for display on screen. These units are an excellent way to set sizes for print design, as their measurements were designed for that purpose. A point has a fixed size of one seventy-second of an inch, while a pica is one sixth of an inch. A printed document specified using these units will come out exactly as you intended. However, computers cannot accurately predict the actual size at which elements will appear on the monitor, so they guess—and guess badly—at the size of a point or pica, with varying results across platforms. If you're creating a print style sheet, or a document that's intended for print, not on-screen, viewing, these are the units to use. However, a general rule of thumb is to avoid them when designing for the Web.

Pixels

p {
 font-size: 12px;
}

Many designers like to measure font sizes in pixels, as this unit of measurement makes it easy to achieve consistent displays across various browsers and platforms. However, pixels ignore any preferences users may have set in their own browsers and, in most browsers, font sizes that the designer has dictated in pixels cannot be resized by users. This is a serious accessibility problem for those who need to make text larger in order to read it clearly. Therefore, while pixels may seem like the easiest option, pixel measurements should be avoided if another method can be used, particularly for large blocks of content. If you're creating a document for print, or using a print style sheet, you should avoid pixels entirely. Pixels have no meaning in the world of print and, similar to the application of points to the on-screen environment, print applications provided with a pixel measurement will simply try to guess the size at which the font should appear on paper, with erratic results.

Ems

The em is a relative font measurement, where one em is equal to the height of the letter "M" in the default font size. Where CSS is concerned, 1em is seen to be equal to the user's default font size, or the font size of the parent element when it differs. If you use ems (or any other relative unit) for all your font sizing, users will be able to resize the text, which will comply with the text size preferences they have set in their browsers. For example, imagine I create a declaration that sets text within the <p> tag to 1em, as is shown in the following CSS:

p {
 font-size: 1em;
}

A user with an Internet Explorer 6 browser in which text size is set to Medium will see the paragraph shown in Figure 2.1.

Figure 2.1. The font-size is set to 1em and text size is Medium.

If the users have their text set to Largest, the 1em text will display as shown in Figure 2.2.

Figure 2.2. The font-size is set to 1em and text size is set to Largest.

As a designer, this gives you less control over the way users view the document. However, it means that users who need a very large font size, for instance, can read your content.

Ems values can be set using decimal numbers. For example, to display text at a size 10% smaller than the user's default (or the font size of its parent element) you could use:

p {
 font-size: 0.9em;
}

To display the text 10% larger than the default or inherited size:

p {
 font-size: 1.1em;
}

Exes

The ex is a relative unit measurement that corresponds to the height of the lowercase letter "x" in the default font size. In theory, if you set the font-size of a paragraph to 1ex, the uppercase letters of the text should be the same height as the letter "x" would have been if the font size had not been specified.

Unfortunately, modern browsers don't yet support the typographical features needed to determine the size of an ex precisely. They usually make a rough guess for this measurement. For this reason, exes are rarely used at this time.

Percentages

p {
 font-size: 100%;
}

As with ems and exes, font sizes that are set in percentages will honor users' text size settings and are resizable by the user. Setting the <p> tag to 100% would display your text at users' default settings for font size (as would setting the font size to 1em). Decreasing the percentage will make the text smaller:

p {
 font-size: 90%;
}

Increasing the percentage will make the text larger:

p {
 font-size: 150%;
}

Keywords

You can also size text using absolute and relative keywords.

Absolute Keywords

There are seven absolute keyword sizes for use in CSS, as follows:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

These keywords are defined relative to each other, and browsers implement them in different ways. Most browsers display medium at the same size as unstyled text, with the other keywords resizing text to varying degrees. Internet Explorer 5 (and version 6, depending on the document type), however, treats small as being the same size as unstyled text.

These keyword measurements are considered absolute in that they don't inherit from any parent element. Yet, unlike the absolute values provided for height, such as pixels and points, they do allow the text to be resized in the browser, and will honor the user's browser settings. The main problem with using these keywords is the fact that, for example, x-small-sized text may be perfectly readable in one browser, and miniscule in another.

Relative Keywords

Relative keywords—larger and smaller—take their size from the parent element, in the same way that em and % do. Therefore, if you set your <p> tag to small using absolute keywords, and you simply want emphasized text to display comparatively larger, you'd add the following to the style sheet:

Example 2.1. relative.css

p {
 font-size: small;
}
em {
 font-size: larger;
}

The following markup would display as shown in Figure 2.3, because the text wrapped in the <em> tag will display larger than its parent—the <p> tag.

Example 2.2. relative.html (excerpt)

<p>These <em>stuffed peppers</em> are lovely as a starter, or as a
 side dish for a Chinese meal. They also go down well as part of
 a buffet and even children seem to like them.</p>

Figure 2.3. The emphasized text displays larger than its containing paragraph.

Relative Sizing and Inheritance

When you use any kind of relative sizing, remember that the element inherits its starting size from its parent element, then adjusts its size accordingly. This is fairly easy to understand in layouts in which elements are not nested in a complex manner; however, this inheritance pattern can become problematic in nested table layouts in which the parent element is not always obvious—things can seem to inherit very strangely indeed! The following example demonstrates this.

My style sheet contains the following code, which sets td to display text at 80%. This is slightly smaller than the user's default font size, but they will be able to resize it:

Example 2.3. nesting.css

td {
 font-size: 80%;
}

On a page in which there are no nested table cells, the text will display consistently at that slightly smaller size. However, in a nested table layout, the text within each nested table will display at 80% of the font size of its containing table.

Example 2.4. nesting.html (excerpt)

<table>
 <tr>
   <td>This is a table
     <table>
       <tr>
         <td>This is the second table
           <table>
             <tr>
               <td>This is the third table</td>
             </tr>
           </table>
         </td>
       </tr>
     </table>
   </td>
 </tr>
</table>

The example markup above will display as in Figure 2.4. As you can see, the text becomes progressively smaller in each nested table.

Figure 2.4. The display demonstrates the use of relative font sizing within nested tables.

Discussion

When choosing which method of sizing text to use, it's best to select one that allows all users to resize the text, and that ensure that the text complies with the settings users have chosen in their browsers. Relative font sizing tends to work well with CSS layouts and simple table-based layouts, but it can be tricky to implement in a complex nested table layout because of the way the elements inherit sizing. If you decide that your only option is to size fonts using an absolute unit of measurement, consider developing a style sheet switcher to allow users to change the font size from within the interface of your site.