Measurement Units in CSS

Posted on: May 13, 2009

CSS provides a variety of options when it comes to the measurement of Text such as height, width, size etc. There are four types of measurement units. Pixels(px), Points(pt), Percentage(%) and Ems(em). We will cover these four famous types in detail here.

Unit: Pixels

Pixels define an element’s size using a specific humber of pixels. This is very convenient when designing for digital displays, since it gives you exact control over the size of the element, allowing you to make exact calculations of width and height for your design. However, there are several downsides to using pixels you should be aware of: First, setting a font’s size using pixel units does not allow the user to resize that font using their browser settings. When you set a font’s size to 12 pixels, it will always have a height of 12 pixels, regardless of what the user has set the default font size in their browser to. This is an accessibility issue that, if you choose to use pixels to set your font sizes with, should be dealt with using other means (for example, allowing the user to choose from two or more different style sheets). Secondly, when it comes to print media, pixels have no real value. If you design a document for print, it’s up to the device to guess what you meant in terms of physical size. Although you can usually preview a document and make changes before printing, if your document is primarily designed for print, then you may want to look at one of the other unit options.

Unit: Ems

Ems are a relative measurement unit. One ‘Em'(1em) is equal to the height of the capital letter “M” in the default font size. When applied in CSS, the Em represents either the user’s default font size, or the size of the parent element’s font size, if one is available. When using Ems for sizing fonts, the fonts will resize according to the browser’s default font size setting. That is, if the upper-most definition of the font size is defined by Ems (or any other relativee unit of measurement), and every successive unit set in every descendent element is also defined using a relative unit, then the text on the entire page will be user-resizeable. If the parent of the element using Ems to size its fonts defines its own font size using absolute units (such as Pixels or Points), then the font of that element will ‘snap’ to that parent’s font’s size, instead. This means that setting descending element font sizes to Ems does not mean they will be user-resizeable if their parent element’s font isn’t resizeable. Ems are set to decimal units, like 1em, 0.9em, and 1.1em. These units can be thought of as percentages of the parent element, where the top-most level is set to the browse default font size. For example, if the browser’s font size is set to ‘Normal’, then setting the font-size of the BODY element to 1.1em will mean that the font size inside the BODY element will be 110% the size of the browser’s ‘Normal’ font size. If the user then set their browser’s font setting to ‘Large’, then the font size inside the BODY element will be 110% the size of the browser’s ‘Large’ font size. Now suppose that the BODY element’s font-size was set to 10px, and the P element’s font-size was set to 0.9em. This means that any text within P elements will be 9px, regardless of what the user set their browser’s font setting to.

Unit: Exes

Exes are similar to Ems, in that they are a relative unit of measurement that defines 1 unit to be equal to the size of the letter “x” in the default font size. Most other properties that apply to the Em unit of measurement apply to the Ex unit of measurement. However, most browsers do not support this unit of measurement properly, and it is not recommended for use in documents intended for browsers.

Units: Points and Picas

These units are print media units of measurments. A point (1pt) equals 1/72 of an inch, while a pica (1pc) equals 1/6 of an inch. Documents intended for printed media will be able to tell the device exactly what the intended size is for these units. Digital displays, however, will have to guess, somewhat arbitrarily, how to convert these units into pixels, and there is no real uniform way of doing so. Since points were used since the early days of the web, most browsers have a set relation between pixels and points, but this is inherently wrong. Remember that small displays today can have high resolutions, so determining how large an ‘inch on the display’ would be is almost impossible across devices. Documents designed to be displayed primarily on the web should avoid using these units.

Unit: Percentages

When assigning percentage units (%) to a property that isn’t font-size or line-height, that value always relates to the parent block of that element. When assigning percentage units to the font-size or line-height properties, they act like the Em unit, where 100% equals 1em. If you set the font-size property of an element to 100%, and that element’s parent block is the BODY element, the result will be the same as setting the font-size to 1em — namely, the size of the text will become the browser’s default font size. It’s important to remember that percentage values mean different actual absolute values when assigned to the font-size and line-height properties, and when assigned to everything else.


It will be up to you to decide which units to assign to which properties, and to take into consideration accessibility, media type, different display resolutions, and compatibility, among other things. As a general rule, if you don’t assign relative-only values to all of your fonts, you should provide a means to change the style sheet for your pages, so that the font size may be changed by the user. Also remember that when designing a page that will fit the entire browser window, to mind each element’s size in terms of whether it’s relative or not, since stretchable designs can ‘break’ in certain resolutions if their elements weren’t matched properly along the way.

Article from: Guistuff


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


%d bloggers like this: