How to Change Font Size in HTML

The three ways to set font size in HTML

You can change font size in HTML using the style attribute, a style tag, or an external CSS file. The style attribute works on a single element. The style tag controls multiple elements at once. An external CSS file lets you set sizes across your entire website from one place.

Most websites use CSS (Cascading Style Sheets) rather than HTML tags alone, because CSS keeps your sizing rules separate from your content and makes changes faster. But all three methods work, and which one you choose depends on whether you are sizing one word, one page, or many pages.

Font size is measured in pixels (px), em, or percent (%). Pixels are the simplest: 16px is a common default. Em and percent scale based on the parent element's size, which is useful if you want text to resize automatically on different devices.

Key Takeaways

The style attribute changes font size for one element: <p style="font-size: 20px;">
A style tag in the head section changes font size for all matching elements on one page.
An external CSS file with a .css extension lets you set font sizes for your entire website in one place.
Pixels (px) are the easiest unit to understand; em and percent scale based on parent elements.
Most modern websites use CSS files because they are faster to update and keep code organized.

Using the style attribute on a single element

The quickest way to change one piece of text is to add a style attribute directly to the HTML tag. Open your tag, type style="font-size: ", then add a number and a unit (px, em, or %). Close the quote and finish the tag.

Here is a real example. If you want a paragraph in 24-pixel text, write:

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

For a heading in 18 pixels:

<h1 style="font-size: 18px;">My Heading</h1>

This method works for any HTML tag: paragraphs, headings, links, list items, and more. The downside is that you have to type the style attribute every time you want that size. If you have ten paragraphs and want them all 20px, you will type the same thing ten times.

Using a style tag to control multiple elements

A style tag sits in the head section of your HTML file (above the body) and lets you set rules for all matching tags on that page. Inside the style tag, you write the tag name, then curly braces, then the font-size property.

Here is the structure:

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

Now every <p> tag on that page will be 18 pixels. You can add more rules below it. If you want headings to be 28 pixels and links to be 16 pixels, add them like this:

<style> p { font-size: 18px; } h1 { font-size: 28px; } a { font-size: 16px; } </style>

The style tag is faster than the style attribute when you have many elements of the same type. But it only affects the current page. If you have ten web pages and want them all to use the same font sizes, you will have to copy the style tag into each one.

Using an external CSS file for your whole website

An external CSS file is a separate document with a .css extension that holds all your styling rules. You link to it from the head section of your HTML file, and then every page that links to it uses the same sizes.

First, create a new file and name it something like styles.css. Inside it, write your font-size rules exactly as you would in a style tag, but without the tags themselves:

p { font-size: 18px; } h1 { font-size: 28px; } a { font-size: 16px; }

Save the file in the same folder as your HTML files. Then, in the head section of each HTML page, add a link tag that points to it:

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

Now every page that links to styles.css will use those font sizes. If you want to change all your paragraph text from 18px to 20px, you change it once in the CSS file, and the change appears on every page when ready. This is why most websites use external CSS files.

Understanding pixels, em, and percent

Pixels (px) are fixed sizes that do not change. If you set a heading to 28px, it will always be 28 pixels on every screen. This is straightforward and predictable, but it does not scale automatically on phones or tablets.

Em is a relative unit based on the parent element's size. If the default text size is 16px and you set a heading to 1.5em, the heading will be 24 pixels (16 × 1.5). If you later change the default to 18px, the heading automatically becomes 27 pixels (18 × 1.5). Em is useful for responsive design, where text needs to resize for different devices.

Percent (%) works the same way as em. A font size of 150% means 1.5 times the parent size. The difference between em and percent is mostly technical; both scale based on what comes before them.

For learning, pixels are easiest. For professional websites that need to work on phones and desktops, em or percent are better choices.

Common mistakes and how to fix them

The most common mistake is forgetting the unit. If you write font-size: 20 instead of font-size: 20px, the browser will ignore it. Always include px, em, or %.

Another mistake is putting the style tag in the wrong place. It must go in the head section, between <head> and </head>, not inside the body. If you put it in the body, it may still work in some browsers, but it is not correct HTML.

If you use an external CSS file and the sizes do not appear, check that the file path in the link tag is correct. If your CSS file is in a folder called css, the link should say href="css/styles.css", not just href="styles.css".

Finally, remember that font size is inherited. If you set a paragraph to 18px and put a <strong> tag inside it, the strong text will also be 18px unless you set a different size for strong tags specifically.

When to use each method

Use the style attribute when you are sizing a single element that is different from everything else on the page. For example, if one paragraph needs to be bigger than the rest, use style="font-size: 24px;" on just that paragraph.

Use a style tag when you are building a single page and want to set sizes for all paragraphs, headings, and links at once. This keeps your HTML cleaner than typing style attributes everywhere.

Use an external CSS file when you have multiple pages or expect to change sizes later. This is the professional approach because it keeps styling separate from content and makes updates fast.

Frequently Asked Questions

What is the default font size in HTML?

Most browsers use 16 pixels as the default size for body text. Headings are larger by default: h1 is usually around 32px, h2 around 26px, and so on. You can override these defaults with your own CSS.

Can I use font size to make text smaller than the default?

Yes. You can set font-size to any number: 10px, 12px, 14px, or smaller. Very small text (below 12px) can be hard to read on screens, so use it sparingly.

Does font size work the same way in all browsers?

Yes. The font-size property is part of the CSS standard and works the same in Chrome, Firefox, Safari, and Edge. The only difference is that some browsers let users change the default size in their settings, but your CSS will still explore.

What happens if I use both a style attribute and a style tag for the same element?

The style attribute wins. If you set a paragraph to 18px in a style tag but then add style="font-size: 24px;" to one paragraph, that paragraph will be 24px. This is called specificity: more specific rules override general ones.

Can I change font size with just HTML tags, no CSS?

The old HTML tag <font size="5"> existed but is no longer supported in modern HTML. CSS is the correct way to change font size now. All modern websites use CSS for this reason.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.