Using Font Size

From CSS Discuss

Jump to: navigation, search

This is a summary of Using Keywords , Using Pixels , Using Points , Using Ems , and Using Percentages .

Also see: Avoiding Hacks

Summary

Method Advantages Disadvantages
Keywords Not influenced by nearby font sizes so easier to manage Limited choices, only 7 sizes
Pixels Consistent across browsers Fixed size disregards user needs. Physical size is smaller as display resolution is increased. IE/Win buggy, see Force Font Size.
Points Good for print style sheets (but with possible user accessibility problems) Inconsistent (e.g. between PC and Mac) on screen; depends upon system DPI, which is rarely set close to reality on a PC.
Ems Relative sizing Cascade bugs in IE (fixes available)
Percents Relative Sizing Cascade math requires a little more thought than non-relative sizes
Ems w/ Percent Base Relative sizing / Good browser support / Centralized control in the CSS file Easily overridden by user stylesheet

Examples

Method Code
Keywords p { font-size: x-large; }
Pixels p { font-size: 18px; }
Points p { font-size: 12pt; }
Ems p { font-size: 1.2em; }
Percents p { font-size: 85%; }
Ems w/ Percent Base body { font-size: 80% } p { font-size: 1em; }
Personal tools