The three ways to set font size in HTML

You control font size in HTML using the CSS property font-size, not through HTML tags alone. HTML provides the structure (what text is a heading, what is body text), but CSS handles the visual size. You can set font size inline on a single element, in a <style> block at the top of your page, or in a separate CSS file that applies to many pages.

The most common approach for beginners is to use a <style> block in the <head> section of your HTML document. This keeps your sizing rules in one place and makes them easy to change later. If you are building a larger site, a separate CSS file is cleaner, but the principle is identical.

Key Takeaways

  • Font size is set with the CSS property font-size, not with HTML tags — HTML structures content, CSS styles it.
  • You can write font-size rules in a <style> block in your page's <head>, or inline on individual elements using the style attribute.
  • Common units are pixels (px), which are fixed, and em or rem, which scale relative to a base size.
  • Headings (<h1> through <h6>) have default sizes set by browsers, but you can override them with your own CSS rules.

Using a style block to set font size for multiple elements

The cleanest way to manage font sizes across your page is to write CSS rules in a <style> block inside the <head> section. This approach lets you target all paragraphs, all headings, or specific classes of elements with one rule.

Here is a basic example:

<head>   <style>     p { font-size: 16px; }     h1 { font-size: 32px; }     h2 { font-size: 24px; }   </style> </head> <body>   <h1>My Heading</h1>   <p>This paragraph will be 16 pixels.</p> </body>

In this example, every <p> tag on the page will display at 16 pixels, and every <h1> at 32 pixels. If you later decide paragraphs should be 18 pixels instead, you change it once in the style block and it updates everywhere.

Setting font size on individual elements with inline styles

If you need to change the size of just one element, you can add a style attribute directly to the tag. This is called an inline style and overrides any rule in your <style> block.

<p style="font-size: 20px;">This paragraph is 20 pixels.</p> <p>This paragraph uses the default or style block size.</p>

Inline styles are useful for quick one-off changes, but they become hard to maintain if you use them everywhere. If you find yourself writing the same style attribute on many elements, move it to a <style> block instead.

Understanding font size units: pixels, em, and rem

HTML accepts several units for font size. Pixels (px) are the simplest: 16px is always 16 pixels on screen, regardless of any other settings. This makes them predictable but inflexible if a user wants to zoom or change their browser's base text size.

Em (em) is relative to the font size of the element's parent. If a parent is 16px and you set a child to 1.5em, the child will be 24px. This is useful for scaling text proportionally, but it can get confusing when elements are nested deeply.

Rem (rem) stands for "root em" and is relative to the base font size of the entire page, usually set on the <html> tag. Most developers prefer rem because it is predictable: 1.5rem is always 1.5 times the root size, no matter where the element sits in the page structure.

<style>   html { font-size: 16px; }   p { font-size: 1rem; } /* 16 pixels */   h1 { font-size: 2rem; } /* 32 pixels */ </style>

Overriding browser default sizes for headings

Browsers apply built-in sizes to heading tags: <h1> is usually around 32px, <h2> around 24px, and so on down to <h6> at roughly 13px. These defaults vary slightly between browsers, but the hierarchy is consistent.

If you want your headings to be a different size, write a CSS rule that targets them. Your rule will override the browser default:

<style>   h1 { font-size: 48px; }   h2 { font-size: 28px; } </style>

You can also use classes to create multiple heading styles. For example, you might want some headings to be large and others smaller:

<style>   .large-heading { font-size: 48px; }   .small-heading { font-size: 20px; } </style> <body>   <h1 class="large-heading">Main Title</h1>   <h2 class="small-heading">Subtitle</h2> </body>

Using external CSS files for larger projects

Once your page grows beyond a few elements, keeping all your CSS in a <style> block becomes unwieldy. A better approach is to write your CSS in a separate file and link to it from your HTML.

Create a file called styles.css and write your font-size rules there:

/* styles.css */ p { font-size: 16px; } h1 { font-size: 32px; } h2 { font-size: 24px; }

Then link to it in the <head> of your HTML:

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

Now every HTML page that links to styles.css will use the same font sizes. If you change a size in the CSS file, it updates across all your pages at once.

Common mistakes and how to fix them

The most frequent error is forgetting to include a unit. Writing font-size: 16 without px, em, or rem will not work — the browser will ignore it. Always include the unit.

Another mistake is nesting font-size rules so deeply that you lose track of what size an element will actually be. If you use em units and an element is inside a parent that is inside another parent, each with its own font-size, the math compounds. Using rem instead of em, or using pixels for critical sizes, avoids this confusion.

A third common issue is setting font size on the wrong element. If you want a link inside a paragraph to be larger, you must target the link tag, not the paragraph:

/* This does not work as intended */ <p><a href="#">Click here</a></p> <style> p { font-size: 20px; } </style> /* Sizes the paragraph, not the link */ /* This works */ <style> a { font-size: 20px; } </style> /* Sizes the link */

Frequently Asked Questions

Can I use the <big> or <small> tags to change font size?

The <big> and <small> tags exist in HTML but are outdated and should not be used. Modern browsers still render them, but they are not semantic and do not give you precise control. Use CSS font-size instead.

What font size should I use for body text?

Most websites use 14px to 18px for body text, with 16px being a common default. The right size depends on your font choice and how much text is on the page. If text feels cramped or hard to read, try increasing it by 2px and see if it helps.

How do I make font size responsive on mobile devices?

Use relative units like rem or em instead of pixels, and set a base font size on the <html> tag. You can also use media queries in CSS to change font sizes at different screen widths, but that is a more advanced technique.

Does font size affect how search engines rank my page?

Font size itself does not affect search rankings. Search engines care about content quality and structure, not visual styling. However, if your text is too small to read, visitors leave quickly, which can indirectly affect how search engines view your page.