CSS font-size units
- Introduction
- What is font size
- Font size units
- What are the 4 units of font sizes
- Conclusion
Introduction
Hello guys, in this article I will about CSS font size units. The important for a text is its size. CSS has font-size properties similar to the H1-H6 tag you use in HTML. You can use this property to customize the title and paragraph size to your liking. If you use the H1 tag in HTML, the default size is apply. But You can use font-size property in CSS, the value you give is apply. The attractiveness of the website is the font size and font family. So, you have to give it as correct. Let’s see the more css font size units as follows.
What is font size
This is a CSS property and it allows you to change the text size. It is used to specify the size of the font that means size of the text. If you can use font-size property to an HTML element you can specify the value in pixel units. If you use the tag or attribute in the HTML, the sizes you expected will not come up. That is, if you write the code in CSS, you can set the size to suit you. You can set the total font-size for the <body> tag and then set the font-size for each element individually.
CSS font size units
In CSS they are two values in one is absolute length and other one is relative length. Absolute length means that the value we give appears to be the same on all screens. Absolute length is a unit that does not adjust the value to fit the screen size The absolute units are cm(centimeters), mm(millimeters), in(inches), px(pixels), pt(points) and pc(picas). And the relative length is a unit that adjusts the value to fit the screen size. The relative lengths are %(percentage), Vmax, Vmin, vh, vw, rem, em, ch and ex.
What are the 4 units of font sizes in CSS
In font-size units you can assign various values that are xx-small, x-small, smaller, small, medium, large, larger, x-large and xx-large. You can also give fixed length like points, pixels and percentage. Many developers can use pixel and percentages for font-size, because that’s where we can set the size of the font we think. Look at the table below and understand the difference between the units
Note:16px = 1cm (px to cm Ex: 10px/16px = o.625em)
| Font size | (Pixel) | (em) | (Percentage %) |
| xx-small | 9px | 0.575em | 57% |
| x-small | 10px | 0.625em | 62% |
| small | 13px | 0.8125em | 81% |
| medium | 16px | 1.0em | 100% |
| large | 18px | 1.125em | 125% |
| x-large | 24px | 1.5em | 150% |
| xx-large | 32x | 2.0em | 200% |
Syntax:
<html> <head> <title>Anchor tag in HTML</title> </head> <style type="text/css"> .name1{ font-size: medium; } .name2{ font-size: 20px; } .name3{ font-size: 150%; } .name3{ font-size: 1em; } </style> <body> <div class="name1">Hello Everyone</div> <div class="name2">Hello Everyone</div> <div class="name3">Hello Everyone</div> <div class="name3">Hello Everyone</div> </body> </html>
Pixel units(px):
font-size:15px;
The pixel is a small dot in your display. When you use pixels you need to see how many dots are on your screen, For that you need to see the resolution in the display setting. You multiply your resolution value, you know how many dots are on your screen. The 1px= 1/96th of 1in(inches). It is the absolute length. If you give an HTML element a value of 100px, it will only display a value of 100px on any mobile screen or computer screen. It cannot not adjust to the screen. You can only use it for font-size. If you use pixel when mentioning width it will not be responsive. Therefore, you can use this pixel unit if you want all the screens to be fixed.
Percentage(%)
font-size: 150%;
It is also used to create responsive website. You can first give the width of the whole page as a percentage and then to each element. It is the relative length, it means percentage adjusts to the size of the relative screen. For example, we will set the width value to 100%, which will be adjusted to fit any screen size you see. You can use this for anything you want. Many developers use the percentage unit to create a responsive site. It is mainly used for widths and are pretty easy to understand. \
em unit:
font-size: 1,2em;
Em full form is “emphemeral unit”. The unit of 1em value is the default 100%, 2em value is 200%. But it have one disadvantage ,If we create a nested list in CSS and set the list to font-size em in general, the first list will appear as a larger and the nested list as smaller. The work (em) measurement is done by keeping the font-size in the body element (ex: 1em = your body font-size).If 2em then multiply that css font size units by two and take the value. The default font size is 16px, which is why we take 1 = 16px. If you change the font-size value in the body tag then the em measurement will also change. Ex: If you change the body font-size = 20px and set the div font size = 1em , it will become 1em = 20px.
Conclusion:
This article will help you understand how important units. Font-size has each unit has its own uses. The last thing I want to ask you, Are you abusing these css font size units unknowingly? and Are you using it without knowing the difference between pixel and percentage. I hope this article was very helpful to you.
