How to specify font size with CSS

You can use the font-size property to size text in CSS, for example:

font-size: 12px;

The next table describes the units that you can use to size fonts:

Unit identifier

Corresponding Units

pt Point
pc Picas
px Pixels
em Ems
ex Exes
% Percentages

Point and Picas

In this case we have for example:

p {

font-size: 12pt;

}

You should avoid using points and picas to style text for display on screen when designing for the Web, because measurements of these units have designed to set sizes for print design. A point has a fixed size of 1/72 of an inch, while a pica is 1/6 of an inch. A printed document specified using these units will come out exactly as you intended.

Pixels

In this case we have:

p {

font-size: 10px;

}

Many Web designers like to measure font sizes in pixels, because they achieve consistent displays across various browsers and platforms. On the other hand, pixels ignore any preferences users may have set in their own browsers. This is a serious accessibility problem for those who need to make text larger in order to read it clearly. Therefore, while pixels may seem like the easiest option, pixel measurements should be avoided if another method can be used, particularly for large blocks of content.

Ems

The em is a relative font measurement. One em is equal to the height of  the letter “M” in the default font size. In this case syntax is the following:

p {

font-size: 1em;

}

When you use ems (or any other relative unit) for your entire font sizing, users will be able to resize the text, which will comply with the text size preferences they have set in their browsers. This approach gives you less control over the way users view the document. However, it means that users who need a very large font size, for instance, can read your content.

Ems values can be set using decimal numbers. For example, to display text at a size 10% smaller than the user’s default (or the font size of its parent element) you could use:

p {

font-size: 0.9em;

}

To display the text 10% larger than the default or inherited size:

p {

font-size: 1.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 of the text should be the same height as the letter “x” would have been if the font size had not been specified.

Modern browsers don’t yet support the typographical features needed to determine the size of an ex precisely. For this reason, exes are rarely used at this time.

Percentages

You this case you can set the font size by:

p {

font-size: 100%;

}

As with ems and exes, font sizes that are set in percentages will honor users’ text size settings and are resizable by the user. Setting the <p> tag to 100% would display your text at users’ default settings for font size (as would setting the font size to 1em). Decreasing the percentage will make the text smaller:

p {

font-size: 80%;

}

Increasing the percentage will make the text larger:

p {

font-size: 130%;

}