HTML Font Size: Syntax, Usage, and Examples

Adjusting HTML font size helps you control how readable, structured, and visually appealing your web content is. Whether you're designing headlines, styling paragraphs, or creating responsive layouts, understanding how to change font size in HTML is a core skill in web development.

How to Change Font Size in HTML

In older versions of HTML, developers used the <font> tag with a size attribute to set text size. For example:

<font size="4">This is size 4 text.</font>

However, this approach is outdated and not recommended anymore. Modern HTML uses CSS for styling, including font sizing. The CSS font-size property offers far more flexibility and control than the old <font> tag.

Using Inline CSS to Change Font Size

One of the simplest ways to change font size HTML is by using the style attribute directly on an element:

<p style="font-size: 20px;">This paragraph uses 20px font size.</p>

You can define the font size using different units:

• Pixels (px): Fixed size. Example: 16px
• Em (em): Relative to the font size of the parent element. Example: 1.2em
• Rem (rem): Relative to the root element. Example: 1rem
• Percentage (%): Relative to parent element’s size. Example: 150%

Each unit has its place. Pixels give exact control, while ems and rems help with scalability and responsive design.

When to Adjust Font Size in HTML

Adjusting font size in HTML improves content hierarchy, visual appeal, and readability. Here's when and why you’d change it:

Creating Visual Hierarchy

Larger font sizes draw attention. Use bigger sizes for headings and smaller ones for body text.

<h1 style="font-size: 36px;">Main Heading</h1>
<p style="font-size: 16px;">Standard body text.</p>

Making Text More Readable

If your users struggle with small fonts, increasing size can enhance usability—especially on mobile or for accessibility.

<p style="font-size: 18px;">This text is easier to read for everyone.</p>

Responsive Design

You might want to make fonts adjust to the screen size. Using relative units like em, rem, or media queries helps:

<style>
  body {
    font-size: 1rem;
  }

  @media (max-width: 600px) {
    body {
      font-size: 0.9rem;
    }
  }
</style>

This technique ensures your layout works on both desktop and mobile screens.

Examples of Font Size HTML in Action

Let’s walk through examples that show how to increase font size or adjust it in various contexts.

Changing Paragraph Font Size

<p style="font-size: 18px;">This paragraph has an 18px font size.</p>

You can also use relative units:

<p style="font-size: 1.2em;">This paragraph’s size scales with its parent.</p>

Styling Headings and Subheadings

<h2 style="font-size: 28px;">Section Title</h2>
<h3 style="font-size: 22px;">Subsection</h3>

This keeps your content organized and easy to navigate.

Font Size in Lists

<ul style="font-size: 16px;">
  <li>Item One</li>
  <li>Item Two</li>
</ul>

You can control font size HTML for list items collectively or individually.

Using CSS Classes for Font Sizing

Instead of repeating inline styles, define CSS classes and apply them to elements.

<style>
  .small-text {
    font-size: 14px;
  }

  .large-text {
    font-size: 24px;
  }
</style>

<p class="small-text">This is smaller text.</p>
<p class="large-text">This is larger text.</p>

This approach keeps your code clean and reusable.

Learn More About Adjusting Font Size in HTML

How to Adjust Font Size in HTML Using Style Tags

You can use a <style> block to define consistent font sizes across your document.

<style>
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  p {
    font-size: 16px;
  }
</style>

This method separates content from design, which is considered a best practice in modern web development.

How Do I Change Font Size in HTML Emails?

In HTML emails, inline CSS is still widely used due to inconsistent email client support.

<p style="font-size: 16px;">This font size works in most email clients.</p>

Always test your email templates in various clients to ensure consistent appearance.

Font Size in HTML Paragraphs

To adjust font size HTML paragraph elements, apply inline or class-based CSS:

<p style="font-size: 20px;">Larger paragraph text for emphasis.</p>

Or:

<p class="intro">This paragraph follows class-based sizing.</p>

<style>
  .intro {
    font-size: 18px;
  }
</style>

Font Size Scaling with Viewport Units

You can make font sizes responsive using vw (viewport width) or vh (viewport height):

<h1 style="font-size: 5vw;">This heading scales with screen size.</h1>

This technique is great for landing pages or banners where the text needs to stand out and stay visible on any screen size.

HTML Increase Font Size with JavaScript

You can use JavaScript to dynamically adjust font size:

<p id="text">Click the button to enlarge this text.</p>
<button onclick="document.getElementById('text').style.fontSize='24px'">Enlarge</button>

Or toggle font sizes for accessibility options:

<button onclick="increaseFont()">Increase Font Size</button>

<script>
  function increaseFont() {
    document.body.style.fontSize = "larger";
  }
</script>

This offers users a way to control their reading experience.

Accessibility and Font Size

When changing font size HTML styles, consider users with low vision or dyslexia. Always aim for a default size of at least 16px for body text. Allow resizing without breaking the layout, and use relative units (em or rem) when possible.

Avoid setting text in fixed sizes smaller than 12px, as this can hurt readability. Make sure your font choices also have good line spacing and contrast.

Using rem units makes it easier for users to zoom in without causing layout problems:

body {
  font-size: 1rem; /* default 16px */
}

Best Practices for Font Sizing

• Use headings (h1, h2, etc.) for structure, not just size
• Stick to relative units like em, rem, or % for flexibility
• Keep your base font size readable on all screens
• Use CSS classes to manage styles across multiple elements
• Avoid inline styles for long-term projects—use external CSS

Adjusting font size in HTML plays a big role in how users experience your site. Whether you're writing a blog, building a dashboard, or creating marketing pages, the ability to scale and structure your text effectively matters. You can start simple with inline styles or go deeper with responsive, accessible styles using CSS and JavaScript.

So the next time you need to change font size HTML styles or improve legibility, you’ll know exactly how to do it.