Specifying consistent and user friendly font sizes
Pixels
- body{font-size: 14px}
- No space between number and px
- Sets fixed size
Percentages
- body{font-size: 14px;}
h1{font-size: 150%}
- Sets size relative to another font size
- Sets size relative to parent element
EM
- font-size: 1.2em;
- Like percentages
- Another relative unit of measure
- Specify a scaling factor
- Font will be 1.2 times bigger than its parent element
Keywords
- browser defined sizes
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Specify font sizes that will produce consistent results in most browsers
- Choose a keyword, medium, and set it as the font size in the body rule.
- This sets default font size for the page
- Set font sizes of other elements relative to the body font size using em or percentages.
- Both do the same thing
Specifying fonts relatively allows easy change of font size in the whole page/site by simply changing the body font size.