How to Change the Font Size using HTML and CSS


When changing the font size in HTML, what are you going to do? Are you worried about this?

This time, I will explain two ways to change the font size using the <font> tag in HTML. Additionally, I will explain how to change the font size with CSS, which is recommended for character decoration. Please refer to it for a more comprehensive understanding.

The process of modifying font size in HTML can greatly impact the appearance and readability of your content. Whether you choose to employ the <font> tag or delve into CSS, understanding these techniques will empower you to craft visually appealing and engaging web pages. Embracing CSS for font size adjustments grants you greater flexibility and consistency across your site, contributing to an enhanced user experience.

So, let’s delve into the details of these font size manipulation methods and dispel any concerns you might have about this crucial aspect of web design. By the end of this article, you will be equipped with the knowledge and confidence to confidently control font sizes and create captivating typography for your digital creations.

Change font size in HTML

How to use font size

In HTML, the <font> tag is used to change the font size, color, and type of text. To change the size, specify the size with the size attribute in the <font> tag.

How to specify the size

Regarding the size specification method, specify the character size with a number from 1 (minimum) to 7 (maximum) in size=””. In addition to this, you can also specify relative to the standard font size, such as -1, +1.

The standard font size is 3, so specifying -1 will set the font size to 2, and +1 will set the font size to 4. Make sure the resulting size is in the range 1-7, even if you specify it relatively.

Example: how to set font size using Html font size tag:

Change the font size

Important point

You can change the font size of the text using the <font> tag in HTML like this, but since HTML is basically used to express structure and content, it is recommended to use CSS to describe text decoration. It has been.

Change the font size with CSS

If you want to change the font size with CSS, specify “size (px or em)” in the “font-size” property. In the case of px, the size is specified in vertical pixels, so 15px to 20px is recommended for the main text of the web page.

em is specified as a scale factor for the current font size. For example, if the current font size is set to 10px and 2.0em is used, the font size will be 20px.

Example: how to set font size using css font size property:

Change the font size

Change Font Size Within the Same Paragraph

To change the font size within the same paragraph, you can use HTML and CSS. HTML allows you to structure the content, and CSS is used for styling. Specifically, you can use the <span> element along with the style attribute to apply different font sizes within a paragraph. Here’s an example:

In this example, the first span element will have a font size of 16 pixels, while the second span element will have a font size of 24 pixels. You can adjust the font size values as needed. The text within the <span> element will inherit the other styles, such as font family, color, etc., from the surrounding paragraph.

Change the font size

If you want to apply this styling through CSS rather than inline styles, you can use classes like this:

HTML and CSS code:

By using CSS classes, you can apply the same font size and color styles to multiple elements throughout your HTML document easily.

Change the font size


Changing the font size using HTML and CSS is a straightforward process that allows web developers to control the appearance of text on a webpage. By combining HTML tags with CSS properties, you can easily adjust the font size to create a more visually appealing and user-friendly experience for your website visitors.

If you learned something new then do check out more articles in the above category, or if you have any questions then you can ask in the comment box. I would love to reply to every single one of your comments.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button