About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

Lesson 2 - Part 6: 10 Important CSS Properties: Font Size & The CSS Units


Font Size CSS Property

The font-size property of css is used to define size of the text. 

Syntax: font-size: value

Example: If we want to change size of the text "Make this world a better place to live" to 18px, the css for this text container element would be font-size: 18px.

Here, we have defined the font-size in px. There are other units like em, rem, vh, vw and % which can be used for the font-size. Let us see what these units are:

Px, Em, Rem, Vh, Vw and %

All the units other than px are relative units i.r their value changes relative to the parent element or the viewport width/height.

1. Pixel (Px): This is an absolute unit to define the size of any element. The size of the element defined in pixel doesn't change with change in the screen size. That's why while making responsive website or web applications it is not recommended to use px as the element size remains the same even in smaller screen with the same screen resolution. 

2. Em: Em is a unit to set font-size relative to the parent element. Here, the parent element refers to the HTML element inside which the text exists. 

Do the below activity as shown in the image to see how em works:

Image 2.6.1 Html code and the CSS code example for unit em

Image 2.6.2 Computed font-size for em based on the parent element's font-size

As shown in the Image 2.6.2, the computed font-size is 16px as by default most of the browsers sets the font-size of body to 16px. Now, try changing the font-size of body tag and see how it makes a difference in the font-size of H1 tag.

3. Rem: Rem sets the font-size relative to the size of the root element i.e HTML tag. Try changing the font size of H1 from 1em to 1rem and then see the difference by changing the font-size of the body tag. It won't affect the font-size of H1. Now, change the font-size of the root element H1, it will change the size of H1 too.

4. Viewport Height (vh): It sets the size of an element relative to the viewport height. Thus, vh is used whenever we want the size of an element to change as the viewport's height changes. Consider the below example:

Change the font-size in the above example to 5vh and then watch how the font-size reduces when we minimize the browser window and reduce the height of the browser screen i.e the view port as shown in the below images:

Image 6.2.3 Example of viewport height unit

Image 6.2.4 Decrease in the computed font-size value as the height reduces


Image 2.6.5 Imcrease in the computed font-size as the height increases

5. Viewport Width (vw): vw sets the size of an element relative to the viewport width. To test this, change the font-size in the above example from 5vh to 5vw and see how it affects by changing the browser window's width

6. Percentage (%): Sets the size relative to the immediate parent element. For example: If we set the font-size of body tag to 20px and set the font-size of H1 to 50%, the computed value for the font-size of H1 would be 10px. There would be no affect on the font-size of H1 by changing the font-size of html tag.

Note: vw and vh are typically used whenever an element is supposed to cover full viewport width and height respectively. Em and Rem are only used for setting the font-size. If you want to convert px to em while setting the font-size, this website can be used.

Subscribe to Be a full stack .NET developer by Email