Size Text Without Using Pixels
When sizing text using CSS, the contented choice is usually the predictable pixel absolute measurement. Pixels however is not the best choice due to the fact that an element styled with pixels cannot be made larger using IE and thus causing some serious accessibility issues.
em's are my preferred unit of sizing. They are text units that set the size of text relative to the surrounding text. They are fully resizable, so that if you choose a text size that a user is not comfortable with, they are able to resize the text in their browser so that it becomes readable (the option is under View > Text Size). Default text is set at 1em, so you set other text relative to this value. Set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.
For instance:
CSS
p {
font-size: 0.75em;
line-height: 1.4em;
margin-bottom:1em
}
This CSS code sets the font size of all text in paragraphs to be slightly smaller than a user’s default text size. If you put any text between strong tags, which is already in a paragraph, this text would appear one and a half times the size of the text in its parent element (therefore, 1.5 times the size of text in paragraphs).