web-profile

css font-size

1em = 12pt = 16px = 100%.

Let’s see what happens with font-size of child elements if you increase the base font size (body font-size) from 100% to 120%:

Font-size with em

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect.

Font-size with rem

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

Leave a Reply

Your email address will not be published.