Previous Message
Next Message

Does anyone know the diference?

Sent by tedd on 26 March 2006 03:03


>Does anyone know the difference between the following two units of
>measurements:
>
>3em
>3pt
>
>This is normally used in setting margins.  I just want to know which is
>bigger and is there a simple relation like converting from inches to
>centimetres etc etc.

Jay:

Both are measurements and can used for setting everything, not just 
margins -- however, I find it's not "best" to mix them together, but 
some do.

Back to your questions.

3pt means 3 points, which is means different things to different 
people working with different browsers with different Machines with 
different OS with different screen resolutions with different fonts 
-- confused yet?

Well basically, you can look at a point as being a pixel on your 
screen. A pixel is a pixel, some will say, but how the computer uses 
the pixel to display things is an entirely different matter.

For example, let's look at how different systems display text.

We all know, or should know, that text sizes (outside of a computer) 
are based upon a point system.

I won't go back to the history and development of the point from 1737 
to today, but the end result was that the "American pica" measures 
0.1660 inches -- just under one sixth of an inch (often called a pica 
point), which is a tiny bit less than 1/72 of an inch.

Now, I won't go back to the Apple ][ days either -- however -- we did 
work with pixel and point sizes back then in our very limited High 
Res memory block for graphics.

By time Apple developed the Mac (before PC's of similar vein), they 
were well aware and wanted to make their graphic monitors as close as 
possible to the printed word. As such, they chose 72 pixels per inch. 
If you will note, the "WYSIWYG" phrase was coined by Mac long before 
PC's -- not bragging, just fact.

When the PC's followed, for whatever their reason (I think it had 
something to do with VESA and VGA specifications for monitors, or 
cost), M$ chose 96 pixels per inch.

So, in terms of raw pixels, most Windows user see text that's about 
33 percent larger than the same text as seen on a Mac and the same 
thing goes for anything that's dependant upon pixels. That's the 
reason why most Window-made web sites look tiny on a Mac.

Unfortunately, because of Mac's minor, yet strong grasp, of 3 percent 
of the market, the remaining 97 percent is forcing Mac to change 
their WYSIWYG standards. The dpi (or ppi) thing in Mac's now depends 
upon what system you are using, which includes 72, 85, 90, 93, and 
110 dpi.

Now, what's 3em?

That's stands for 3 ems. There has been much written about ems (you 
can Google it if you want), but basically an em is a measurement that 
originated from the width of the widest letter in typesetting, which 
was "M" -- I suppose that's where the word "em" came from.

Now, people look at an em as the height of the letter "M", which is 
still about the same. If you want more detail, plus a lot more 
confusion, please review:

http://www.w3.org/TR/REC-CSS2/syndata.html#em-width

And less confusion here:

http://www.answers.com/topic/em

Everyone see's ems a bit differently. On my Mac, an em is basically 
16 pixels. On Windows machines, it's about 13 pixels.

So, to answer your question,

3px = 3 pixels on your monitor.
3em = 36 pixel to 48 pixels depending upon your monitor, OS, et al.

The conversion factor of changing your pixels to inches, as you can 
see, depends upon the resolution of your monitor. So, I suggest that 
you test it by making an image in Photoshop, where you know exactly 
what the pixel dimensions are, and then view the image via your 
browser, and measure it yourself on your machine with ruler in hand. 
I did that with mine, and I am happy to say that my screen images fit 
perfectly with a ruler and with my printer and with every other piece 
of graphic software I own -- "What I see is what I get" on my 
flat-panel tandem 17 inch monitors.

Oh, one last thing, not all font-families treat ems the same. One 
font may look big at 1 em while another may look smaller -- that's 
because the width/height of the letter "M" changes in each font set.

So, welcome to the world measurement.

Also, please read any replies to my post, because if I'm wrong in any 
way whatsoever, the list will be more than happy to point that out. 
If that happens, then that information may be useful to you as well.

HTH's

tedd

-- 
--------------------------------------------------------------------------------
http://sperling.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: