Delicon Blog

Example 1: Text size in pixels

The default text size is a good starting point, but for most people (designers, clients, and their customers) 16px is too large for body text. In our example, the body text was reduced to 12px (pixels).

1. .text p { font-size:14px; }

The result show that Safari and Firefox still resize the text, but IE6 and IE7 do not. In Opera and IE7 the text can be resized by using the page zoom tool, which magnifies the page layout, text and images within.

Example 2: Text size in ems

In this example we will use ems to size the text. The em is a true typographic unit, recommended by the W3C, and affords a precision keywords lack. Working from a default of 16px, the following styles should give the desired text sizes:

1. .text p { font-size:0.75em; /* 16x0.75=12 */ }

The result show that, across all browsers, the text is rendered identically. The text sized in ems, can be also resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.

Frequently used text sizes in ems:

1. font-size:1.125em /* 18 : 16 = 1.125 */
2. font-size:1em /* 16 : 16 = 1 */
3. font-size:0.875em; /* 14 : 16 = 0.875 */
4. font-size:0.75em; /* 12 : 16 = 0.75 */
5. font-size:0.6875em; /* 11 : 16 = 0.6875 */

Example 3: Body sized as percentage

A fix to the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage. So retaining the ems on our content, the following styles were tested:

1. body { font-size:100%; }
2. .text p { font-size:0.75em; /* 16x0.75=12 */ }

The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.

Bookmark to: