It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
1em = 12pt = 16px = 100%--------------------------------------------------------------------------------------
<body style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<div style="font-size:1em;">I am the web designer</div> /* here 1em=12px because body font-size is set to 12px. */
<div style="font-size:1.2em;">I am the web designer</div> /* here 1em=14px because body font-size is set to 12px. */
</body>
--------------------------------------------------------------------------------------
1em = 12pt = 16px = 100%--------------------------------------------------------------------------------------
<body style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<div style="font-size:1em;">I am the web designer</div> /* here 1em=12px because body font-size is set to 12px. */
<div style="font-size:1.2em;">I am the web designer</div> /* here 1em=14px because body font-size is set to 12px. */
</body>
--------------------------------------------------------------------------------------
No comments:
Post a Comment