There are many properties in CSS that are assigned a value such as length, size, width, or height. In CSS, you express these values using one of many types of
units of measurement. CSS provides you with nine units with which to define the value of properties that require some sort of measurement.
You should note that you can use each of these units to define the size of anything, even if the unit itself is derived from a
font's size. You'll have to decide for yourself which elements should be sized using which units, but there is nothing preventing
you from sizing elements using whichever measurement type you choose.
|pt||points (72 points = 1 inch)||font-size: 18pt|
|pc||picas (12 points = 1 pica)||font-size: 2pc|
|em||1em is equal to the current font size||letter-spacing: 5em|
|ex||relative to a font's x-height.||line-height: 3ex|
Point, Pica, Inch, Centimeter, and Millimeter
These units are typical used for printing. 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 size is for these units. Digital displays (your monitor), will have to estimate how to convert these units
into pixels. Documents designed to be displayed on the web should avoid using these units.
Pixels define an element's size using a specific number of pixels. This is very convenient when designing for displaying information on
digital monitors since it gives you exact control over the size of the element. There are several disadvantages to using pixels you should note.
Setting a font's size using pixel units does not allow the user to resize that font using their browser. 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. Printing
a document with sizes set in pixels may appear slightly differ from printer to printer since a pixel has no real size.
When assigning percentage units to a property that is not a font-size or line-height, that value always relates to the parent
block of that element, such as when assigning the width property, for example. When assigning percentage units to the font-size or
line-height properties, they act like the em unit, where 100% equals 1em.
When ems are used in CSS, the em represents either the user's default font size, or the size of the parent element's font size.
Ems are set to decimal units, such as 0.9, 1em, 1.1em, etc. These units can be thought of as percentages of the parent element or
default font size, where 1.1 would equal to 110%.
An ex is similar to an em, as an em is also a relative unit of measurement that defines 1 unit to be equal to the size of the
letter "x" in the default font size. Please note that most browsers do not support this unit of measurement so using this unit should
be avoided for use in web pages.
Recommended Books & Training Resources