font-size

The font-size property sets the size of the text. and have a number of different units and methods with which to set the exact size. They are:

Units. For example, points, picas, pixels, ems, exes, millimetres, centimetres, and inches
Percentages
Keywords

Points and picas

In the good old days of paper, you traditionally defined the font size in points: 10pt, 12pt, 14pt and so on. Desktop Publishing and Word processing packages use point sizes. There are (more or less) 72 points in an inch so a 12 point font is 1/6th tall.

Style sheets also allow you to set point sizes:

{font-size: 12pt;}

You can also use picas. A picas equals 12 points.

The big problem which stands in the way of points or being a good unit for screen text is that you can’t cahnge the font size using your browser's font size buttons. This is a big problem for lots of people, especially those with impaired eyesight.

You should also be aware that fonts look bigger on a PC than on a MAC. Both operating systems translate points into pixels to display the text on a screen. To do this, they each use a scaling factor and these factors (what a surprise) are different. For example, you can read Arial 8pt on a PC but it is very difficult to read on a Mac.

Pixels

Everybody that has used a graphics package has worked in pixels. A pixel is one picture element on the display monitor. So, you can set the font size in pixels:

h2 {font-size: 43px; }

The good thing is that pixels offer reliable control and consistant scaling across devices. However, there are some drawbacks:

Most Windows machines are set at 96 dpi, while most Macintosh machines are set at 72 dpi. So, a font set at 72px will be 1 inch (approximately) tall on a Macintosh and three quarters of an inch tall on a Windows machine
If you set the font size in pixels, users can't change the size. Not even if they change the font size setting in the browser. Could give people with poor eye-sight a problem if your font is small
If you use pixels, your pages may not print properly. The browser may decide that a pixel is the same as a printer dot so 18 pixels will look very small on a 600dpi printer

Ems and exs

Ems are units of measurement based on the width of the letter "m" in a particular font. Ems set the size of text relative to whatever parent tag the text is contained in. In the case of most pages, this is the <body> tag so the font is sized relative to the standard size of the browser.

For instance:

body {font-size: 1em; }
h1   {font-size: 1.5em; }

Relative text sizes can vary across browsers, but the text they output can be resized through your browser, which is what you should be aiming for.

0.8em is roughly the same size as <font size="-1">.

Internet Explorer 3 isn't very clever. It treats em units as pixels. This can make text impossible to read.

You can also use ex. An ex unit is the height of the letter x (ex).

Percentages

Another way to set a relative value is to use a percentage value. This sets the font size as a percentage A percentage value specifies an absolute font size relative to the parent element's font size. For example:

h1 {font-size: 200%;}

I read somewhere that you could use 70% for size 1, 84% for size 2, 100% for size 3, 120% for size 4, 150% for size 5, 200% for size 6 and 300% for size 7.

Not all browsers will be able to display the size you choose. Each browser will make a "best guess" to come up with something approximating your choice. In other words - 75% and 80% might look exactly the same. Then again, they might not.

Keywords

There are a number of keywords that you can use to size your text without having to get into measuring things out with units. They're less precise, but friendly and helpful when the text size isn't entirely critical. There are seven of these keywords, and they work similarly to the old <font size> values.

You can use the following keywords to give an absolute size (xx-small, x-small, small, medium, large, x-large or xx-large). For example:

{font-size: xx-large;}

The CSS2 specification suggests scaling factor of 1.2 so if the medium font is 12pt, the large font could be 14.4pt. Note. In CSS1, the suggested scaling factor was 1.5.

One problem: the W3C left open the values to apply to the keywords so the browsers display text differently. For example, one browser could set medium to 12pt and another might set it to 10pt. Guess what? Internet Explorer outputs smaller text than Netscape across the platforms when you use a keyword. Internet Explorer assumes that medium corresponds to the old size 3 and Netscape that medium is the old size 4.

You can also use keywords to set a relative size of larger or smaller. These values adjust the font size to one less than or one greater than the current size. Be careful though because sizes are cumulative. For example:

ul {font-size: smaller;}

This makes the font size of unordered lists smaller than the parent tag. That’s OK until you get a nested list. Each successive level gets smaller. Tables could give you a problem too.

Length units

If you prefer, you can set the font size in millimetres, centimetres, inches.

For example:

{font-size: 1in;}
{font-size: 5cm;}