the difference between px and em for font-size

The articles I’ve read that talk about px and em all say px is an absolute unit while em is a relative unit. “Absolute” seems easy to understand. That is related to screen resolution. But what is “relative”? Relative to what? I headed into w3schools which is my favorite site to learn web development knowledge, for the course on CSS font. But this time, w3schools disappointed me. I was not surprised w3schools repeats the “absolute” and “relative” story. But then it says “To allow users to resize the text (in the browser menu), many developers use em instead of pixels.”, and “However, with the em size, it is possible to adjust the text size in all browsers.”. It makes me think the following two lines would have different effects when re-sizing the  text.

<span style="font-size:1em;">aab</span>
<span style="font-size:16px;">aab</span>

I thought the text in the first line would resize when I resize through browser’s menu and the text in the second line would not resize. Then I tried to resize by clicking the View/ Zoom/Zoom In(Out) menu item(the shortcuts are Ctrl+ and Ctrl-,respectively). The result is beyond my expectation. Both text resize! Confused, I searched google for the explanation on the difference between em and px. Then I got this article.  It says “there is no better way to explain this than having visuals”, and gives us an image showing the effects of the usage of em and px. But I just can not understand that image. The picture has several titles showing different percentage values of font-size. But I do not know what elements the font-sizes are applied to. He is talking about em and px in font-size, why does the percentage form of font-size appear? Then I got this article. Here I got to know the percentage font-size is set for the body element, not the text in question. After reading it carefully, I began to understand what the em and px really mean. em is  the base font-size while px is a pixel of the screen. What is the base font-size? The base font-size is the font-size of the text in question if there’s not a font-size style. The default base font-size can be configured in browser’s settings.

base font-size
base font-size

If you don’t set the font-size for text, the text’s font-size is the base font-size which is 16px by default. If you change the default base font-size in the above settings, the text set with em font-size would change its size because the 1 em now means a different size and is always equal to the base font-size. But text set with px font-size does not change its size because the px unit does not change, 1px is always a pixel on the screen. None of the tutorials tells you where to change the base font-size. Instead, they set the font-size of the element(body) that is the parent of the text in question to a percentage value.  When they alter the percentage to different values, the font-size of the parent is set to different values. The text in question inherits its parent’s font-size and its base font-size is changed so the em unit changes value, which leads to the re-sizing of the text with em font-size style.

Comments are closed, but trackbacks and pingbacks are open.