[Home]CSS Units

HomePage | RecentChanges | Preferences | Newbie Help

CSS FAQs

See http://www.elsid.co.za/download/css_fontsizes.htm for an excellent demo by Sid Ismail


em

em is a typographical unit of measurement. It is officially equal to the width of the letter 'm' in the current font.

mark sez - Note: in CSS, an em is considered to be the size of the user's default font-size. So, in a default IE install, 1em will be 16px.

ex

ex is like em, but it is equal to the height of the lowercase 'x' in the current font.

mark sez - Note: in CSS, an ex is considered to be half of one em. In a default IE install, 1ex will be 8px.

pt

pt stands for 'point', a typographical unit of measurement equal to 1/72 inch. On 72dpi (dots per inch) media, 12 point text will be 12 dots high (or 12/72 inch); on 96dpi media it will be 16 dots high, but still 12/72 inch. Note that most personal computer operating systems use dpi values as if they corresponded to real inches (which they infrequently do) that actually refer to virtual inches that vary in size according to display resolution and size. For example, 12 point text on a Windows PC using a 17" CRT display and 96 dpi will be about 13/72" tall at 800x600 display resolution, but only about 10/72" tall at 1024x768 display resolution.


px

px stands for 'pixel', the smallest element on a computer screen. It is inadvisable to specify font sizes in pixels because they can't be resized by the sight-impaired who use Internet Explorer, and will be a different real size on a display with a different resolution and/or size.

For some strange reason, CSS uses a slightly different pixel definition. According to http://www.w3.org/TR/CSS2/syndata.html#pixel-units :

  Pixel units are relative to the resolution of the viewing
  device, i.e., most often a computer display. If the pixel
  density of the output device is very different from that of
  a typical computer display, the user agent should rescale
  pixel values.

Further down, they specify the physical size of a px:

 For reading at arm's length, 1px thus corresponds to
 about 0.28 mm (1/90 inch).

And whether any unit can be resized or not, depends on the browser's capabilities, not on the unit itself. Opera for example allows you to "zoom" the whole page, and in Netscape 6 you can easily scale the text size.


Note that points (pt) have no real meaning on the screen - most UAs will render, say, 12pt as 16px (for example), but they don't have to. Likewise, pixels have no meaning on paper, so don't use them for print stylesheets. -- Mark Gallagher


HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited January 10, 2003 6:27 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media