Using Font Size
From CSS Discuss
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; }
|
