How to change font size in html

HTML is just like an MS-Word and Google docs document but the difference is HTML documents show content over the browser. Now as we format text on MS-Word and Google docs, HTML also allows us to format text in HTML documents with the help of CSS properties.

So in this write-up, we will see how to change font size in HTML:

• using pixels
• using percentage %
• according to screen size
• using ephemeral unit value

How to change the font size in HTML using the font-size property?

In HTML, font size can be changed by the CSS’s font-size property. The font-size property supports a list of options to change the font-size according to some criteria. This section describes the list of possible options of font-size property to change the font-size in HTML.

– using pixels (px)

We can change the font size with the help of the CSS font-size property and set its value in pixels. A pixel is a measuring unit to specify the height, width, font-size, etc used by web developers. 1 pixel represents the 1/96th part of an inch on a screen. The following practical example will show the use of this property with pixel values. By default, the font size is 16 pixels.

Code:

In this code, we write two paragraphs and change the size of one paragraph to 25px using the CSS font-size property.

Output:

The output shows that the font size is successfully changed in pixels.

– using percentage %

We can also change the font size by setting the value of the CSS font-size property in percentage against the HTML document body size that means when we give value in percentage it will go. Let’s look at the following example to understand better.

Code:

In this code, we create two paragraphs and change the size of the second paragraph using CSS font-size property and set its value to 150 percent.

Output:

This output shows that we have successfully changed the font size by specifying the value in percentage.

– set the font size as per the screen size

Font size can also be changed dynamically. That means our font size changes according to the screen size dynamically. To change font-size according to the screen we use vw (Viewport Width). The following example shows the use of vw values in CSS font-size property.

Code:

In this code, we create two paragraphs and change the size of one paragraph by using vw value which will resize the text according to the screen size.

Output:

The output shows that the paragraph with normal text size remains static whereas the paragraph that uses vw value to change the font size resizes itself according to the screen.

– Using the ephemeral unit value

We can change the font size by using the CSS font-size property and set its value to em. Here 1em is said to be equal to the HTML document body’s current font size. By default, the normal HTML document font size is 16 pixels so we can say that 1em=16 pixels. The following practical example showcases the use of em unit.

Code:

In this code, we have changed the size of the paragraph by using the CSS font-size property and set its value to 2 em which is equal to 32 pixels.

Output:

This output shows that we have changed the font size using the em value of the CSS font-size property.

Here you go! You can now successfully change the font size in HTML by using any of the above mentioned methods.

Conclusion

In HTML, we can change the size of the font by using the CSS font-size property and set its values in pixels, percentage, viewport width, and ephemeral unit. In this article, we have gone through all the value sets that can be used with the CSS font-size property to change the size of the font in HTML. The pixels, percentage, and em are the fixed values whereas the viewport option manipulates the font according to the screen size.