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 and web design.

Quick Answer: How to Change Font Size in HTML

The modern way to change font size in HTML is with the CSS font-size property, applied using the style attribute. The old <font size=""> tag is obsolete and should not be used.

Syntax:<element style="font-size: value;">Your text</element>

Example:

<p style="font-size: 18px;">This text is 18 pixels tall.</p>
<h1 style="font-size: 2rem;">This heading is twice the root font size.</h1>

You can use various units like pixels (px), em, rem, or percentages (%). For managing styles across an entire website, it is best practice to define font sizes in an external CSS file rather than using inline styles.

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 HTML5 uses CSS for styling, including font sizing. The CSS font-size property offers far more flexibility and control than the old <font> tag, and it's one of the most commonly used CSS properties.

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 HTML 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. You can also combine font sizing with other styling options like font-style and background-color for enhanced visual impact.

<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. Most browsers have a default font size of 16px, which serves as a good baseline.

<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 and Containers

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

You can also apply font sizing to container elements like a div:

<div style="font-size: 18px;">
  <p>All text inside this div inherits the font size.</p>
  <span>Including this span element.</span>
</div>

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.

Key Takeaways for Changing HTML Font Size

• Always Use CSS: The modern and correct way to change font size is with the CSS font-size property. The <font> tag is obsolete.
• Inline Style for Quick Changes: To change the size of a single element, use the style attribute: <p style="font-size: 16px;">.
• Use Relative Units for Scalability: For accessible and responsive design, prefer relative units like rem and em over fixed units like px. rem is often the best choice for overall consistency.
• External CSS is Best Practice: For any project with more than one page, define font sizes in an external .css file to ensure consistency and easy maintenance.
• Prioritize Readability: Ensure your base font size for body text is at least 16px and that users can zoom or resize text without breaking your website's layout.