Sizing Fonts Using Units of Measurement

Unit Identifier

Corresponding Unit

pt

points

pc

picas

px

pixels

em

ems

ex

exes

%

percentage

Points and Picas
You should avoid using points and picas to style text for display on screen. This unit is an excellent way to set font sizes for print design, as the point measurement was created for that purpose. A point has a fixed size of 1/72 of an inch, while a pica is one-sixth of an inch.

Pixels
Many designers like to set font sizes in pixel measurements, as this unit makes it easy to achieve consistent text displays across various browsers and platforms. However, pixel measurements ignore any preferences users may have set in their own browsers and, in many browsers, font sizes that the designer has dictated in pixels cannot be resized by users. This limitation presents a serious accessibility problem for users who need to make text larger in order to read it clearly.

Ems
The em is a relative font measurement: one em is equal to the height of the capital letter M in the default font size. Where CSS is concerned, 1em is seen to be equal to the user’s default font size, or the font size of the parent element when it is set to something other than the default.
If you use ems (or any other relative unit) to set all your font sizes, users will be able to resize the text, which will comply with the text size preferences they have set in their browsers. As an example, let’s create a declaration that sets the text within a p element to display at a size of 1em:

Exes
The ex is a relative unit measurement that corresponds to the height of the lowercase letter x in the default font size. In theory, if you set the font-size of a paragraph to 1ex, the uppercase letters in the text will display at the height at which the lowercase letter x would have appeared if the font size had not been specified (and the lowercase letters will be sized relative to those uppercase letters).

Unfortunately, modern browsers don’t yet support the typographical features needed to determine the size of an ex precisely—they usually make a rough guess for this measurement. For this reason, exes are rarely used at the time of writing.

Percentages
As with ems and exes, font sizes that are set in percentages will honor users’ text size settings, and can be resized by the user. Setting the size of a p element to 100% will display your text at users’ default font size settings (as will setting the font size to 1em). Decreasing the percentage will make the text smaller

Absolute Keywords
We can use any of seven absolute keywords to set text size in CSS:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large

from: the css anathology (by Rachel Andrew)