October 13, 2008 at 07:14CSS Font-Size: em vs. px vs. pt vs. percent
- Transfer
One of the more confusing aspects of CSS is the use of the font-size attribute to scale text. Using CSS, you can resize text in the browser using four different units. Which of these four units is best for the web? This is a question that has spawned a variety of discussions and criticisms. Finding the final answer is difficult because the question itself is complex.
1. “Ems” (em): “em” is a scalable unit used in web documents. “Em” is equal to the current font-size, for example, if the font-size in the document is 12pt, 1em is 12pt. "Em" is scalable in nature, so 2em will be equal to 24pt, 0.5em will be equal to 6pt, etc. The use of “em” is becoming increasingly popular in web documents due to scalability and the ability to use it on mobile devices.
2. Pixels (px): “px” have a fixed size of units that are used on screens (for example, for reading on a computer screen). One pixel equals one dot on the computer screen (the smallest element of the resolution of your screen). Many web designers use px in web documents in order to get a pixel-perfect representation of their website displayed in a browser. One of the problems with using px is that these units do not allow zooming for visually impaired readers or mobile devices.
3. Points (pt): “pt”, traditionally used in print media (everything that should be printed on paper, etc.). One pt equals 1/72 of an inch. "Pt", like "px", have a fixed unit size and cannot scale.
4. Percents (%): Units in% are similar to "em", with the exception of a few fundamental differences. Firstly, the current font-size is 100% (i.e. 12pt = 100%). When using "%", your text becomes fully scalable for mobile devices and user convenience (accessibility).
It will be easy to understand the difference between font-size units when you see them in action. Typically, 1em = 12pt = 16px = 100%. When using these font sizes, let's see what happens when you increase the base font size (using the CSS body selector) from 100% to 120%.
Font-size change from 100% to 120%.
As you can see, “em” and “%” increased the font size, while “px” and “pt” did not. Setting the absolute size for your text can be simple, but it’s much better for your visitors to use scalable text that can be displayed on any device or any machine. For this reason, the units “em” and “%” are preferable to use for text in a web document.
We found out that the units “px” and “pt” are not the best for web documents, which forces us to use “em” and “%”. In theory, the units “em” and “%” are identical, but in practice they have slight differences, which are important to consider.
In the above example, we used percent-based font-size as the base unit (in the body tag). If you change your base font-size unit from "%" to "em" (that is, body {font-size: 1em;}), you should not notice the difference. Let's see what happens when “1em” is our base unit, and when the client changes the “Font Size” in their browser settings (this feature is provided in many browsers, for example, Internet Explorer).
Font size,
When the text size is set to “medium” in the client’s browser, then there is no noticeable difference between “em” and “%”. However, if the parameter is changed, the difference becomes very large. When installing “Smallest”, “em” is much smaller than “%”, and when installing “Largest”, on the contrary, “em” is displayed much larger than “%”. Although many argue that units in “em” scale as intended, in practice the text in “em” scales too sharply, and the smallest text becomes illegible on some machines.
In theory, “em” units are the new and upcoming Internet font size standard, but in practice, “%” units allow users to display text more consistently and conveniently. When changing client settings, the text in "%" changed in reasonable proportions, which allows designers to maintain readability, accessibility, and design.
Winner : percentage (%).
Meet the units
1. “Ems” (em): “em” is a scalable unit used in web documents. “Em” is equal to the current font-size, for example, if the font-size in the document is 12pt, 1em is 12pt. "Em" is scalable in nature, so 2em will be equal to 24pt, 0.5em will be equal to 6pt, etc. The use of “em” is becoming increasingly popular in web documents due to scalability and the ability to use it on mobile devices.
2. Pixels (px): “px” have a fixed size of units that are used on screens (for example, for reading on a computer screen). One pixel equals one dot on the computer screen (the smallest element of the resolution of your screen). Many web designers use px in web documents in order to get a pixel-perfect representation of their website displayed in a browser. One of the problems with using px is that these units do not allow zooming for visually impaired readers or mobile devices.
3. Points (pt): “pt”, traditionally used in print media (everything that should be printed on paper, etc.). One pt equals 1/72 of an inch. "Pt", like "px", have a fixed unit size and cannot scale.
4. Percents (%): Units in% are similar to "em", with the exception of a few fundamental differences. Firstly, the current font-size is 100% (i.e. 12pt = 100%). When using "%", your text becomes fully scalable for mobile devices and user convenience (accessibility).
So what is the difference?
It will be easy to understand the difference between font-size units when you see them in action. Typically, 1em = 12pt = 16px = 100%. When using these font sizes, let's see what happens when you increase the base font size (using the CSS body selector) from 100% to 120%.
Font-size change from 100% to 120%.
As you can see, “em” and “%” increased the font size, while “px” and “pt” did not. Setting the absolute size for your text can be simple, but it’s much better for your visitors to use scalable text that can be displayed on any device or any machine. For this reason, the units “em” and “%” are preferable to use for text in a web document.
"Em" vs "%"
We found out that the units “px” and “pt” are not the best for web documents, which forces us to use “em” and “%”. In theory, the units “em” and “%” are identical, but in practice they have slight differences, which are important to consider.
In the above example, we used percent-based font-size as the base unit (in the body tag). If you change your base font-size unit from "%" to "em" (that is, body {font-size: 1em;}), you should not notice the difference. Let's see what happens when “1em” is our base unit, and when the client changes the “Font Size” in their browser settings (this feature is provided in many browsers, for example, Internet Explorer).
Font size,
When the text size is set to “medium” in the client’s browser, then there is no noticeable difference between “em” and “%”. However, if the parameter is changed, the difference becomes very large. When installing “Smallest”, “em” is much smaller than “%”, and when installing “Largest”, on the contrary, “em” is displayed much larger than “%”. Although many argue that units in “em” scale as intended, in practice the text in “em” scales too sharply, and the smallest text becomes illegible on some machines.
Verdict
In theory, “em” units are the new and upcoming Internet font size standard, but in practice, “%” units allow users to display text more consistently and conveniently. When changing client settings, the text in "%" changed in reasonable proportions, which allows designers to maintain readability, accessibility, and design.
Winner : percentage (%).