How to Increase Font Size in HTML?

To increase font size in HTML, the modern and recommended way is to use the CSS font-size property. This can be applied using inline styles, internal CSS, or external CSS. The <font size=""> tag is obsolete and should not be used in modern HTML.

1. Using Inline CSS

Add the style attribute directly to an HTML element with the font-size property. You can use units such as px, em, rem, %, or predefined keywords like large, x-large, etc.

<p style="font-size: 24px;">
    This paragraph uses 24px font size.
</p>
<h1 style="font-size: 2em;">
    This heading is 2 times its parent 
    element's font size.
</h1>
<span style="font-size: x-large;">
    This is extra large text.
</span

2. Using Internal CSS

Define font size in a <style> block within your HTML’s <head> section. This applies the style to all matching elements on the page:

xml
<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            font-size: 36px;
        }

        .large-text {
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <h1>This heading is 36px.</h1>
    <p class="large-text">
        This paragraph uses 2rem font size.
    </p>
</body>

</html>

3. Using External CSS

Write your font size rules in a separate CSS file and link it to your HTML. This is best for consistent, maintainable styling across multiple pages:

Filename: styles.css

p { font-size: 18px; }
h2 { font-size: 28px; }

Filename: index.html

<link rel="stylesheet" href="styles.css">

4. Font Size Units

px: Fixed pixels — font-size: 20px;
em: Relative to the parent — font-size: 1.5em;
rem: Relative to the root <html> — font-size: 2rem;
%: Percentage of parent size — font-size: 120%;
Keywords: Predefined sizes — small, large, x-large, etc.

5. Example With JavaScript (Optional)

Increase font size interactively for accessibility:

<p id="demo">Resizable Text</p>
<button onclick="document.getElementById('demo').style.fontSize='32px'">
    Make Bigger
</button>

6. Accessibility Tips

Use rem or em units for responsiveness and better accessibility.
Avoid fixed pixel sizes for whole sites, as this can hinder scalability for users needing larger text.
Default body text should be at least 16px for readability.

Deprecated Method

Do not use the <font size=""> tag. It is outdated and not supported in modern HTML. Use CSS font-size instead.