Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Gaining More Cross-Browser Consistency with Font Sizes

Problem

You want the size of type to be consistent across different browsers and operating systems.

Solution

Set the font-size in the body element to 62.5%:

body {
 font-size: 62.5%;
}

Then set the font-size in the inherited form and table elements to 1em for Internet Explorer for Windows:

input, select, th, td {
 font-size: 1em;
}

Now the font sizes in your document will be equivalent to 10 pixels for each 1 em unit. For example, if you add the body declaration in the first part of the Solution, this rule sets the font size for a paragraph to 19 pixels:

p {
 font-size: 1.9em /* displays text as 19 pixels */
}

Discussion

Because browser displays vary due to different operating systems and video settings, setting type in a fixed (or absolute) value doesn’t make much sense. In fact, it’s best to avoid absolute measurements for web documents, unless you’re styling documents for fixed output. For example, when you create a stylesheet to print a web document, absolute length units are preferred. For more on creating stylesheets for printing, see Chapter 11.

Using pixels

Although pixels appear to consistently control the size of typography in a web document across most platforms and browsers, it’s not a good idea to use pixels when designing for web typography.

The main issue in regard to setting type size in pixels isn’t one of accurate sizing, but of accessibility. People with poor vision might want to resize the type to better read the document. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required