Just brushing up on my CSS, and looking through the w3schools site I noticed that you can specifiy the font-size to be 150%. But 150% of what? Is that relative to the area the text is in?

The font-size value specifies the size of the font used to display the text. There are four types of values that can be used for font-size:
Value Example absolute-size { font-size: large; } relative-size { font-size: smaller; } length { font-size: 12pt; } percentage { font-size: 150%; } absolute-size values are words specifying definite font sizes. Possible values are: xx-small, x-small, small, medium, large, x-large and xx-large. Although the exact font size represented by, say, large, may vary from browser to browser, you can be sure that large will always be bigger than medium, for example.
relative-size values are relative to the inherited or default font size. Possible values are: larger and smaller. For example, if the inherited font size (from a parent style) is large, a relative-size of larger will set the font size to x-large.
length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS Units reference.
percentage values are relative to the parent element's font size. For example, if the inherited font size is 12pt and a percentage value of 150% is specified, the resulting font size will be 18pt. See the CSS Units reference for details.








got from http://www.elated.com/articles/css-font-properties/

Ahh I see! Figured it'd be something like that. cheers!

The "default" font size in today's browsers is 16px. I always specify a base font size on the body in my css as 100.1% (to handle rounding errors). Then I specify my font sizes for all my elements from there.

I specify it as 62.5% in the body selector in order to force browsers to use 1em as 10px; and using em over px/pt/name/% for font-sizes throughout.

Technically, I should also be using em for all measures, but it gets messy.

Originally Posted by Mooofasa

I specify it as 62.5% in the body selector in order to force browsers to use 1em as 10px; and using em over px/pt/name/% for font-sizes throughout.

Technically, I should also be using em for all measures, but it gets messy.

You're losing me there...

em goes as follows:
1.00 em is 100%
1.01 em is 101%
etc.
Also note: if I was to use the 'zoom' feature on my browser or set my default to something either larger or smaller that em and percent would work out well since it'd take the base of my browser as its base. So 150% would be 150% of my 12pt if I changed it to 12 point, etc. Points and pixels though would stay the same in most browsers (I think that IE8 may screw this up as it zooms pictures that have a width and height given as well as text). That is the good and the bad about pts and pxs, if I have trouble reading (I do) and you make it too small I can't change it without overriding it. It also keeps it from becoming too big and overflowing the screen or its part and screwing up layout.

Originally Posted by Spud In Disguise

You're losing me there...

body{font-size: 62.5%;}

Will make browsers use 1em the equivalent of 10px.

Measurements in your CSS; Height, Width, Positioning, Padding, Border, Margin, and Font-Size should be done using EM to ensure it scales best throughout user desktop resolutions. However there's an issue when declaring the font-size and the other measures (i.e. width) in the same selector.