You might have seen this following piece of code in some theme’s style.css file.
#content h2 { font-size:1.4em;}
or this
#content h2 { font-size:14px;}
or this
#content h2 { font-size:10pt;}

What is the difference between all of these ? which one is better ?

In reality, there is nothing like ‘one is better than the other’, but it depends more on the context where it is applied.

‘1em’ means the size of the character ‘M’ for the given font when the browser displays the page at the normal text size.
(Similarly 1ex = size of character ‘X’)

‘1px’ means 1 pixel size. if your monitor’s display is set to 800 by 600 resolution, that means it displays 800 pixels horizontally, and 600 pixels vertically.

‘1pt’ means 1 point size. This is a fixed size across all fonts = 1/72 of an inch. Fixed size fonts might be usable in some cases but not for all.

Q : so what are Relative units for font ?

A : something like ‘em’, ‘ex’, ‘px’ etc

Q : What are Fixed units for font ?

A : something like ‘pt’, ‘in‘, ‘cm‘, ‘mm‘ etc

Q : What is the advantage of having a Relative Size set for a font ?

With every modern browser, you have the capability to change the text size of a given web page you are viewing.
If you are using Firefox, it is available in the toolbar (View > Text Size > Increase ) or in Internet Explorer, it is available in toolbar (View > Text Size > Larger )

If your website’s CSS defines the page element’s font-size in relative units (such as em, ex or px), then the browser will show the page in a bigger font size.
else, the page always shows up with the same sized font, no matter what you change in the browser settings.

So, if you want to have a web page, that is readable by those people with minor visual impairment, you should use relative units for the font size.
If you are a theme author, you make sure, your theme uses them as much as possible, so the sites using your theme are accessible to everyone.

Thats all folks, for now.

Further Reading:
1. W3C’s Tips.
2. CSS2 Syntax