20px
×
20px
= 100%
15.2px
×
15.2px
= 57.76%




20px × 20px 

The Real Meaning of font-size: 76%

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 24%, we make both 24% shorter, and 24% narrower. The net reduction in visible area from specifying font-size: 76% is therefore 42.24%.

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

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

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

font-size: 60% font-size: 70% font-size: 80%


Parent page
Valid HTML 4.01!
Last Modified
2005.07.04
© Felix Miata
Felix's Home