Many people who are trying to learn CSS get confused with the topic of static vs relative font sizes. I hope this quick visual guide helps clear up this confusion:
Static
When you define a static font size you are telling the browser the exact size you want each letter, no matter what.
Units: px, in, cm, mm, pt, pc
**Note: Pixels (px) are technically a relative size, since what the user sees may be different depending on their DPI, viewing device, etc, however, I wouldn’t worry about that too much.
This DIV’s text is 22px (twice the normal size)
This sub-DIV’s text is 44px (four times the normal size)
Relative
A relative font size depends on the font size set by the parent element. 1 EM or 100% always equal the size set by the parent.
Units: em, %
This DIV’s text is 2em (twice the normal size)
This sub-DIV’s text is also 2em (four times the normal size)
Please subscribe, or else I will cry. Do you really want to make a programmer cry?
Leave a Reply