One of the most confusing aspects of web design is the determination of the font-size unit of CSS. There is no web designer who has not had this problem or got confused. There are 5 types of font size units for use in web design. These are – px, pt,% (percent), em and rem. The subject of measurement is different in these 5 types of units. The way they work is also different.
However, there is so much debate about which unit is more suitable or which unit is better to work in that it is difficult to choose which unit to specify. According to each designer, one unit is more effective. So before you choose, you should know the usage, working method and advantages and disadvantages of all the units so that you can work by choosing what you like without blindly using the unit taught by your coding teacher. However, in this case, keep in mind that it is not convenient to do your own work, but choose the type of unit that will create less error. So let’s not know about the current 5 running units.
5 units of font size (5 units to declare font-size):
px (pixel unit):
This is a very common unit, especially for web design. There is no match for those who work to convert the design to the web pixel perfect. But this unit has a big problem that very few designers notice. But the problem seems very obvious to me at least. The problem is –
Everyone knows that now almost all tabs or similar devices have a width of 1024 pixels or in some cases more. But you know, 1024 pixels is the resolution of a small desktop monitor. Speaking of which, the 1024 pixel desktop monitor is 14 inches whereas the display size of many tabs is 8 inches. So you can understand that 1024 pixels are shown in 6 inches. That means a display smaller than half the size for the same resolution. Now imagine if a 12-pixel text could be seen better on a 14-inch monitor than on a small 6-inch display. If you still don’t understand, try browsing the same design on two monitors, then you will understand.
So if you have to use the pixel unit to make your design pixel perfect or for any other reason, then look at this issue. Take a look at the size of the font used on a large monitor, it is not a problem to see it on a small device. And if possible, use a font that replaces a font that looks as small as it can be seen clearly. And the rules for using this font size unit are as follows:
font-size: 14px;
pt (point unit):
It is basically more popular in print media. 1 point is 1 part of 72 of 1 inch. It’s about the size of a pixel. However, the difference from pixels is that you can measure with a scale using this unit, but not in the case of pixels. This means that if you print an image 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 in this case. The use of this unit is as follows:
font-size: 14pt;
percent (%) (percent units):
In the case of px and pt, the problem with tabs or small devices can be solved with the use of percent units. The root font has a default size for any device. This means that if the font-size: 100% means 12 pixels on a large screen of 1024 pixels, it is usually more in the case of small devices. That means in that case the font-size: 100% can be 14 pixels. Then there was no problem with the tab in this case. However, in all cases, the root value is not calculated. In this use, any sub-element relates to its parent element. This means that if you give the font size of a ul 120%, it will probably be 14.4 pixels. But if there is a ul in any li inside it, then the font size of that ul will be 16.28 pixels and if there is another ul inside it, then its font size will be 20.84 pixels. How? The first ul was 120%, now if 100% = 12 px then 120% = 1.2 * 12px = 14.4px. This time, in the case of the next ul, it will not compare with the original font but with its parent element. So in this case the font size of the parent is 14.4px so its font size will be 14.4 * 1.2 = 17.28px, thus later again 17.28 * 1.2 = 20.74px; So understandably, it also has limitations. However, in this case, it should be used as follows:
font-size: 120%;
em (EM unit):
EM is a popular unit for use on the web. It is widely used. Its type of work is much like a percentage. 1 em = current font size. So you can understand that EM also has problems with sub-elements like a percentage. Even after that EM has become quite popular. There was no doubt about its popularity if the rem did not come. Its use is as follows
font-size: 1em;
rem (REM unit):
Personally, this is my favorite unit. Because it solves all my problems. Although sometimes I use rem and em mix for fonts. Its unit system is like em and%. The only difference is that it always relates to the root font size. That means 100% = 1rem of the device or browser. In other words, the problem of parent and child has been solved after it came. Although many designers are not yet aware of this unit. The font-size in the rem unit is:
Font size too: 1 RAM;
So if you have read this post, you must understand which font size unit is more reasonable to use or which is better for you.