How to Change the Font Size in HTML?

Changing the font size in HTML helps control the readability and visual hierarchy of your content. Earlier, the <font> tag with the size attribute was commonly used for this purpose. However, with the introduction of HTML5, the <font> tag has been deprecated and is no longer recommended. Today, over 90% of modern websites use CSS's font-size property to adjust text size effectively and maintain consistent styling across the webpage.

Using HTML<font> tag

The <font> tag contains a font size attribute to set or change the size of the text content.

Example: The size attribute can take values from 1-7 and the text size increases from 1 to 7.

<font size="7">
	Hello GeeksforGeeks!
</font>

Output

Note: The <font> tag in HTML has been depreciated with the newest version of HTML5. Now CSS "font-size" property is used to change the size of the text in HTML.

Using CSS font-size Property

The font-size property is used to change the font size (text size). This property takes font size values in px, em, rem, percentage, ... format. It offers greater flexibility, responsiveness, and separation of concerns.

Syntax

<p style="font-size: 24px;"> Sample Text </p>

Example: Changing the font size using CSS property directly within HTML tags (Inline CSS).

<p style="font-size: 20px;">This text is 20px.</p>
<p style="font-size: 25px;">This text is 25px.</p>

Output

Note: We can set or change the font size using Internal or External CSS.

Change Font Size of Some Words within Same Paragraph

Sometimes we need to highlight some words or character of a paragraph. In that case, we use span element and use font-size property to change the font size of a particular word.

Example: Changing the font-size of some words within paragraph.

<p>Welcome to <span style="font-size: 20px;">GeeksforGeeks</span></p>

Output

Change Font Size of a &lt;Div&gt; Element

The CSS font-size property is also used to change the font size of a div element. This property is useful to change the font size of any element.

Syntax

<div style="font-size: 20px"> Div Content </div>

Example: Change the font size of div content.

<div style="font-size: 25px;">GeeksforGeeks</div>
<div>Welcome to <span style="font-size: 20px;">GeeksforGeeks</span></div>

Output