Using Ems

From CSS Discuss

Jump to: navigation, search

Ems and Percentages are considered the "best" units for sizing fonts and layouts in CSS. They do not have the disadvantages of Using Pixels and Using Points . They are resizable in all Web browsers that support resizing, they are specified relative to the user's font size preferences, and can therefore adapt to the viewer's screen.

Part of: Using Font Size


A word of caution concerning Internet Explorer

Be careful using ems. Internet Explorer for Windows flummoxes text in descendants of body which have a font-size set to less than 1em ("0.5em", for instance). Please note that this applies only to the Font Size and Line Height properties. For all other properties for which ems are suitable (margins, padding, width and height, among others) the bug does not apply. Note that even though em and percent are theoretically just two different nomenclatures for specifying fractions, the bug does not apply to percentages, since they are calculated according to the dimensions of parent elements.

The other problem with ems in IE is the resizing of them. If for instance you set the root element (either <body> or <html>) to font-size:1em, then just setting View > Text Size to "smaller" can cause the text to become unreadably small. The solution to both IE problems though is simple.

Ems with Percents

If you set:

body { font-size: 101%; }

Then you can use ems in the rest:

p { font-size: 1.0em; line-height: 1.3; }

This stops IE from going micro (keeps the text more or less legible when the user sets his/her font size to smallest...), from the Sane CSS Sizes page.

Please note that ANY rational percentage can be set on the <body> element and it will have the same effect. The page listed above has a breakdown of what different percentages look like across browsers. Many web authors prefer to set to 76% or 81%, for a smaller-but-still-readable look across browsers.

See Also

Browser support and further recommendations

Francois Jordaan tested the "Ems with Percents" approach in the most commonly-used PC browsers and doctypes. Results summarised here. Three conclusions:

  • MsIEsix must be in Standards, not Quirks mode (no comment before the Doc Type )
  • TABLE { font-size: inherit; } is required for ((Gecko)) if an HTML 4 doctype is used
  • It fails badly in the ancient ((Opera)) 5.12. If this browser is to be supported, workarounds or an alternative approach should be found

Problems sizing form elements? Try one of the following: input, select {font-size:inherit;} /*only works in Gecko browsers*/ input, select {font-size:100%;}

Personal tools