There are many ways to control font size with CSS. Keyword, px, em, %, and pt.
The "Keywords" xx-small, x-small, small, medium, large, x-large, xx-large, smaller, and larger can control
the size of a font.
The first 7 do what you'd think they would do. The last 2, "smaller", and "larger" make the font smaller or
larger based on it's inherent font size.
For example, if you set the font-size of the BODY to "large", and set a DIV within the body to "smaller", then
the DIVs font-size would be medium (one smaller than the body).
Eg. font-size: medium;
PX (pixel) is the most common way (and offers the most control) to change the font size. Setting a font's
pixel size does literally that - controls the height of the font in pixels.
Eg. font-size: 12px;
1 em is equal to the current font-size of the element. So, if the inherent font-size of an element
is 12px, and it's set to 2em, then it would be 24px tall.
EMs are often used for sites that need to allow all the fonts to zoom in or out, because if you change
the body's font-size, the fonts set to EM will change as well.
A common way to use EMs is to set the body to 62.5% because if the default browser font-size is 16, this
makes your new default 10px. From there, if you want an 18px font, you can use 1.8em - 14px
font = 1.4em ... etc.
Eg. font-size: 1.5em;
Percent works like EM, where 200% = 2em. So if the inherent font-size is 12px, and you set the percent to 150%,
your new font-size would be 18px;
Eg. font-size: 150%;
Points (pt) are used for print only. 72pt = 1 inch. Pixels are accurate for screens, points are accurate for
Eg. font-size: 72pt;
[BACK to RESOURCES]