The Principles of Beautiful Typography

There are numerous ways to set font size, but because I think in pixels, my favorite approach involves setting a font size of ten pixels on the body element, and em units for the rest of the document. The default font size in most browsers is 16 pixels. And since the em is relative to the parent element's font size, the default size of one em is 16 pixels, too. So, if you wanted a page's paragraph text to display at 12 pixels, you'd have to set the font size of the paragraph to 0.75em; if you wanted 35-pixel h1 headlines, you'd have to set them to 2.19em. (If you're wondering how I came up with those numbers, I divided the pixel size that I wanted by 16, then rounded to the nearest hundredth of an em.)

I don't know about you, but I can't do decimal division in my head. Nor do I like having to drag out my calculator every time I want to set a font size in my CSS file. That's where the following 62.5% body font size trick comes in. By changing the font size of the body element, the value of one em essentially becomes ten pixels. This makes the math associated with using em-based font sizes a simple matter of moving a decimal point. In this scenario, 12 pixels is equal to 1.2 ems, and 35 pixels is equal to 3.5 ems:

body {          
 font-size: 62.5%;          
}          
p {          
 font-size: 1.2em;          
}          
h1 {          
 font-size:3.5em;          
}

This method allows me to have the pixel-by-pixel accuracy that I want as a designer, gives Internet Explorer 6 users the ability to resize the text as they see fit, and keeps me a safe distance from my calculator.

Using Punctuation and Special Characters

When you type text into any reasonably modern word processing program, even though your keyboard key shows that ubiquitous ASCII double quote symbol, you see nice "curly" opening and closing punctuation marks when you hit it. These special quotes can't be found on your keyboard, as the key in Figure 4.27 shows. But word processing programs understand that when you put something in quotes, you want nice left and right quotes, and it replaces the characters you typed in with the correct ones. The same goes with apostrophes. Have you ever seen an ASCII apostrophe like the one on your keyboard in a book or brochure? Of course not. What we usually see in printed material is a closing single quote. In fact, there exists a vast array of characters that aren't represented on a standard keyboard, though these characters show up on web pages and in printed material.

Now, that's all well and good for people using word processors. But for those of us typing text into an HTML document, there's no system to automatically replace the characters from our keyboards with their grammatically correct equivalents. Depending on which type of character encoding your web site uses, when you paste these characters directly into an HTML document, you may see a bunch of gibberish on the rendered page. Also, the inclusion in text of characters that are used by HTML, like < and >, will wreak havoc in your page, as they cause the beginning or ending of HTML code.

For these reasons, a series of special codes or entities has been created?we type these into our HTML documents to produce correct punctuation marks and just about any special character that we could need. The examples in Table 4.1 are just a sample of the many HTML character codes that exist. The code on the far left is known as an entity name or keyword. For instance, to produce a copyright symbol in your document, enter copy directly into your HTML; you'll see a © in the rendered page. Each of these entities also has a numerical equivalent; the numerical equivalent of copy is #169 which produces the same symbol. For a more complete list of codes and their alternative entity numbers, check out W3Schools' HTML Entities page.

Table 4.1 Sample list of HTML character entity references

That's it for this chapter! To find out more on The Principles of Beautiful Web Design, check out the Table of Contents and Reader Reviews.