Home GS Explained CSS font-size Units – Everything you need to know

CSS font-size Units – Everything you need to know

by Snehashis Mukherjee

One of the things that are most confusing when it comes to web design is the definition of CSS font-size units. There is no web designer who has never been confused or confused about this matter. There are three types of font size units available for use in web design. These are – px, pt,% (percent), em and rem. In this type of unit, the subject of measurement is different. Their working style is also different.

However, the debate over which of these units is more useful or better to work on a unit is so high that it is difficult to select a specific unit. According to many designers, one unit is more efficient. So before choosing, you should know all the unit’s uses, procedures, and advantages, without having to use your coding teacher’s instructional unit as blind. You can work out what you like. But in this case, be aware that the advantage of doing your own work is not choosing such a unit, but rather choosing the type of unit that will produce the least error. So let’s know about the current most used units:

Units to declare font-size in CSS

px (pixel unit):

This is a very common unit, especially for web design. For those who convert a design to the website. This CSS unit can do the job perfectly without any error. But this unit has a major problem that very few designers notice. But the problem seems very obvious to me at least. The problem is –

Use of PX in CSS

Everyone is aware that almost all tabs or devices of this type are wide by 1080 pixels or more in some cases. But you know, the resolution of the small monitor of the desktop is 1080 pixels. Now the point is, the desktop monitor of a 1080-pixel is 14-inch, But most of the mobile phones are having a display size of 6 inches. You can understand the difference between the 14-inch and 6 inches. All the contents of 14 inches are shown in 6 inches. That is, smaller to half the size of the display for the same resolution. Now imagine if a text of 12 pixels is better seen on a 14-inch monitor, what would it look like on a small 6-inch display. If you do not yet browse the same design on two monitors, then you can understand.

So if you have to use a pixel unit to perfect your design pixel or for any other reason, then focus on this. See how much size fonts you use on a large monitor, it is not a problem to see it on a smaller device. And if possible, use a font that replaces the font that will be seen as small as possible. The rules for using this font size unit are as follows:


Check Out top 10 Visual Studio Code Extensions For Web Developers.

pt (point unit):

This CSS font-size unit is basically more popular in print media. 1 point is 5 percent of 5 inches. It’s a lot like pixels in size. However, the difference from pixels is that using this unit allows you to measure with scale but not in pixels. That is, if you print an image made in pixels, you can no longer measure how many pixels it contains. The problem I am talking about in the case of pixels with the screen of the tab also exists. The usage of this unit is as follows:


Percent (%) (percentage units):

In the case of px and pt, problems with tabs or small devices can be solved by using the percentile unit. The root font has a default size for any device. Suppose if a large screen of 1080 pixels font-size: 100% means 12 pixels, then this is usually the case for smaller devices. That means, in that case, the font-size: 100% maybe 14 pixels. So no problem with the tab in this case. However, in all cases, it is not the root value that will be calculated. It also relates to a sub-element with its parent element.

That means if you give a ul’s font size of 120%, it might be 14.4 pixels. But if there is an ul on a li, the font size of that ul will be 17.28 pixels and if it has another ul inside it, then its font size will be 20.74 pixels. How? First up was 120%, now if 100% = 12 px then 120% = 1.2 * 12px = 14.4px. This time, in the case of Ul, it will compare the parent font with its parent element. That is, in this case the parent’s font size is 14.4px, so its font size will be 14.4 * 1.2 = 17.28px, thus 17.28 * 1.2 = 20.74px later; So you understand, it has its limitations. However, in this case, it should be used as follows:

FONT-SIZE: 120%;

How to become a web developer

em (EM unit):

EM is a popular unit for use on the web. It is widely used. Its working style is very much like a positive one. 1 em = current font size. There is a problem with sub-element like EMA positive in the air. Despite this, EM has become quite popular. There was no doubt about its popularity if the rem didn’t come. Its use is as follows:


rem (REM unit):

Personally, if I say my favorite unit, it is. Because it solves all my problems. Although sometimes I use the font case rem and em mix. Its unit system is like em and %. The only difference is that it always correlates with the root font size. That means 100% = 1rem of the device or browser. That is, the problem of parent and child issues has been solved since it arrived. Although many designers are not yet aware of this unit. The CSS font-size on the rem unit is as follows:

Top 10 Google Chrome Extensions for Web Developers


Learn CSS from Here


So if you read this post, you can definitely understand which font size unit to use or which one is best for you. Hopefully, this post will be of great use to your web design career.
If you like this article then please share this post to all the web developers and designers so that they can clear their confusion. Thanks.

Related Posts


Ankit Kumar December 18, 2019 - 10:34 AM

Useful article, will help freshers to avoid confusion.

Aashish December 29, 2019 - 4:04 PM

Nice way to explain


Leave a Comment