20px
×
20px
= 100%
16px
×
16px
= 64%





20px × 20px 

The Real Meaning of font-size: 80%

CSS font "sizes", for simplicity, refer only to height. However, everything we see on a computer display has two dimensions, height and width. Any text we reduce by 20%, we make both 20% shorter, and 20% narrower. The net reduction in visible area from specifying font-size: 80% is therefore 36%.

The quick brown fox jumped over the sleeping dog. 80%
The quick brown fox jumped over the sleeping dog. 100%

The quick brown fox jumped over the sleeping dog. 16px
The quick brown fox jumped over the sleeping dog. 20px

60% 70%

Parent

Valid HTML 4.01!
Last Modified
2005.03.25
© Felix Miata
Felix's Home