CSS – Font-Sizes: em , px , pt and percent

By | October 18, 2017

While working with CSS, I have often found one of the most confusing aspect of CSS styling is working with font-attributes for text scaling. CSS provides you with four different units to measure size of text ( how its displayed in web browser).

So basically, CSS offers a number of different units for expressing length.

Question is , which of these four units is best suited for the development ? It’s a question that’s spawned a diverse variety of debate and criticism. There is no set answer, or a definitive rule, most likely because the question, itself, is so difficult to answer.

About the Units

1.)  “Ems” (em):

The “em” is a scalable unit that is used in web document media. 1em is equal to the current font-size of the element in question. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

2.) Pixels (px):

Pixels have fixed sizes. One pixel is usually equal to one dot on the screen. Because pixels are fixed sizes, they do not change. This can be a good and bad thing. It allows web developers to make the most accurate, or “pixel-perfect”, rendition of web designs. However, because they are a fixed size, pixels do not size up or down. That means that fonts will be rendered smaller on a screen with higher resolution than on a lower resolution screen.

One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

3.) Points (pt):

Points are traditionally used in print media (anything that is to be printed on paper, etc.). Points are based on an inch on a ruler, and one inch is equal to 72 points.  Points are much like pixels, in that they are fixed-size units and cannot scale in size. Points are very good for setting up a print CSS to overcome that browser issue, but other than that, Its not recommend using points for developing websites.

4.) Percent (%):

Percents are also scalable like ems, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility. Think of it this way: 1.5em is 1.5 times larger, and 150% is 150 percent of the font size. Percents are also good for mobile development because of their scalability. However, they do cascade like ems.

 

Except for points (pt) , all of the units above are good choices for front end web development. Ems and percents are particularly good for mobile web development.

Difference between em , px , pt and percent :

Its easier to understand difference between these four, when you are working live. Basically, font size of a browser is 16px. Hence, 16px = 1 em = 100% = 12pt. 

So, if you increase the base font size of webpage ( using html/body CSS selector ) from 100% to 120%. Both the percentage and em font sizes would get larger ( as they are relative and proportionate in nature), however px and pt would remain even after increasing the font size of base html/body selector of webpage.

Em vs. Percent

We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.

In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).

When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.

Conclusion

In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.

But developing web applications, which have consistent CSS guidelines to use definitive padding and margins across its components, its better to use ems as its comparatively easy to get hold of your font-sizes in equivalent pxs, which helps in applying consistent  padding /margins across application.

So, its depends on your nature of development that which one you choose. But definitely ems and percentages looks better font sizes to use that px and pt in current application development scenarios.