Relative measurement is a much wiser choice than absolute measurement in HTML5 and CSS3 web development. You can use these schemes to change sizes in relationship to the standard size.
Named sizes
CSS has a number of font size names built in:
xx-small
x-small
small
medium
large
x-large
xx-large
It may bother you that there's nothing more specific about these sizes: How big is large? Well, it's bigger than medium. That sounds like a flip answer, but it's the truth. The user sets the default font size in the browser, and all other font sizes should be in relation to this preset size. The medium size is the default size of paragraph text on your page.
Percentage (%)
The percentage unit is a relative measurement used to specify the font in relationship to its normal size. Use 50% to make a font half the size it would normally appear and 200% to make it twice the normal size. Use the % symbol to indicate percentage, as shown here:
p {
font-size: 150%;
}
Percentages are based on the default size of ordinary text, so an tag at 100% is the same size as text in an ordinary paragraph.
Em (em)
In traditional typesetting, the em is a unit of measurement equivalent to the width of the “m” character in that font. In actual web use, it's really another way of specifying the relative size of a font. For instance, 0.5 ems is half the normal size, and 3 ems is three times the normal size. The term is used to specify this measurement.
p {
font-size: 1.5em;
}
Here are the best strategies for font size:
Don't change sizes without a good reason. Most of the time, the browser default sizes are perfectly fine, but there may be some times when you want to adjust fonts a little more.
Define an overall size for the page. If you want to define a font size for the entire page, do so in the tag. Use a named size, percentage, or ems to avoid the side effects of absolute sizing. The size defined in the body is applied to every element in the body automatically.
Modify any other elements. You might want your links a little larger than ordinary text, for example. You can do this by applying a font-size attribute to an element. Use relative measurement if possible.
