View Full Version : ems for font and div widths

07-05-2010, 06:19 PM
Once again, in an effort to do things "properly" (thanks all those who contributed to my questions about total width of a web page), I am trying to get my head around where to use and why use ems as measurements for fonts and page size. I am struggling to get my head around this subject and thought I would have a look at the standard dreamweaver template layouts but am now even more confused.

Can anyone point me at a definitve article or website that deals with this subject in a straight forward and understandable way please?

Many thanks


07-05-2010, 08:14 PM
For setting type sizes, ems are handy because they are relative. Say you set the overall font size in the body style to 87.5%. The default font size for the page becomes 14 pixels - 16 pixels (the browser default) times .875 = 14 pixels).

Just a note before I move on. A bug in IE (what else) requires you to specify the font-size in the body style as a percentage - rather than in ems - if you are going to use ems in the rest of the document.

Then you can set the h1 tag to 1.5 ems, the h2 to 1.2 ems, etc. Now, if you want to change all the font sizes (say make them larger) you only have to change the setting in the body style and the size of all other objects will be adjusted as well.

In addition, type sized in pixels does not resize when the user enlarges the type size setting in Internet Explorer (which, even though it's inconvenient, actually makes sense). Type sized in ems can be resized by the user.

Using ems for other html objects is a bit more problematic.

On the one hand:

It's nice because, if the user resizes the type in their browser, the page layout stays intact (which can be an issue with horizontal menus especially).

On the other hand:

images are sized in pixels, so some odd things can happen to your layout anyway.
If the user resizes the type your layout might expand to be too wide for the page and require horizontal scrolling.
It takes a lot of effort to use ems for page layout and make them work.

So most people choose to use ems only for font-sizing and stick with pixels for layout.

07-06-2010, 02:08 AM
on a completely irrelevant point using ems on images makes them resizable on ie but like dwcourse says i would stick to font sizes