font-size

value: <absolute size > | <relative-size> | <length> | <percentage> | inherit
initial value: medium
inherited: yes
percentages: refer to the inherited font size
applicable to: all elements

The font-size property corresponds to the "em square" which is a concepts that harks back to the days of type setting.Basically, the font-size property will tell the browser what size to make the font or type on the screen.

The font-size of text on a web page is not as straightforward as it may seem as this size will be different for different font-families and the em size of the font is in relationship to its parent or ancestor elements. The font-size can also be displayed differently on different computers depending on how the users had adjusted the settings for font display. Some fonts will not scale nicely except in set sizes.

Any element can have the font-size property assigned to it, but it really only effects the text within that element. A <div> can have a font-size applied, and all of the text contained in that <div> such as heading text, paragraph text, list text, etc., will be affected by this setting accordingly.

Understanding the possible values for the font-size property

The browser or user agent that displays the web page will have set sizes computed for the fonts. Any font-size setting will effect the size of the font in relationship to the set sizes of the browser, except <length> when it sets the height in pixels.


<absolute-size>

This value is a range defined by the browser or user agent as shown below:

xx-small, x-small, small, medium, large, x-large, xx-large

This gives the developer a set range of font-sizes to display. The default size for fonts is medium.

Example:

p.legaltext {font-size: x-small}

This is the standard size for <p> text.

This is the <p class="legaltext"> size.


<relative-size>

The <relative -size> value will set the font-size in relationship to the parent element. There are two possibilities for <relative-size>, [larger] and [smaller], that's it.

Example:

h2.subhead {font-size: smaller}

This is a standard <h2> font size
This is set to be [smaller]


<length>

The <length> value is a number, a whole integer or a decimal value, that is followed by an identifies such as px, em, ex, rem or %.

px: To set the <length> in px will set the x-height of the font to that set height, no matter what the parent value is or how the screen size is displayed.

em: This sets the font-size relative to the font-size that is inherited, either from the browser (user agent) or from a value set for a parent or ancestor element.

ex: This sets the "ex" height of the relavent font. Remember, that certain font-families will be displayed larger or smaller even if they have the same "ex" value.

rem: This value is new with the introduction of CSS3 and not all older browsers will support it. It sets the height in relation to the root em for the HTML document, and is not affected by the em value of the parent.

%: This sets the font size in relation to the parent element, it is similar to em

Example:

h1.pxvalue {font-size: 20px;}
h1.emvalue {font-size: 1.4em;}
h1.exvalue {font-size: 1.4ex;}
h1.remvalue {font-size: 1.4rem}
h1.percentvalue {font-size: 140%;}

This is standard <h1> for this page.
This is <h1 class="pxvalue">ABC xyz
This is <h1 class="emvalue> ABC xyz
This is <h1 class="exvalue">ABC xyz
This is <h1 class="remvalue">ABC xyz
This is <h1 class="remvalue">ABC xyz