How to Change Font Size in HTML

The three ways to set font size in HTML

You control font size in HTML by adding a size attribute to your text, or more commonly, by writing CSS (the styling language that works alongside HTML). The simplest method for learning is the inline style — you add a style directly to the tag that holds your text. A more professional approach uses a separate CSS file or a style block at the top of your page, which lets you change font sizes across your whole site at once.

HTML itself has limited built-in sizing options. The <h1> through <h6> tags create headings in descending sizes, and the deprecated size attribute on <font> tags still works in browsers but is no longer recommended. Modern web development uses CSS instead, which gives you precise control and works the same way across all browsers.

Key Takeaways

Inline CSS using style="font-size: 20px" is the quickest way to change one piece of text, and works when ready in any browser.
A <style> block in your HTML head lets you set sizes for multiple elements at once without repeating code.
Font size can be measured in pixels (px), points (pt), percentages (%), or relative units (em), and each works differently depending on your design.
Heading tags <h1> through <h6> automatically set font size, but you can override them with CSS if you need a different size.
External CSS files keep your styling separate from your HTML and make it easier to maintain consistent sizes across many pages.

Using inline styles to change font size on a single element

The fastest 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. For example, <p style="font-size: 18px">This text is 18 pixels</p> makes that paragraph 18 pixels tall. The browser reads this instruction and applies it when ready.

Pixels (px) are the most common unit for web text because they give you exact control. A size of 16px is readable for body text on most screens, while 24px works well for subheadings. You can use any number you want — there is no restriction. This method works in every browser and requires no setup, which is why it is useful for testing or making quick changes while you learn.

The downside is that inline styles clutter your HTML and make it hard to change many elements at once. If you have ten paragraphs and want them all to be 20px instead of 18px, you have to edit each one separately. For anything beyond a single element or a quick test, a style block or external file is more efficient.

Creating a style block to control multiple elements

A style block sits in the <head> section of your HTML page and holds CSS rules for the whole page. You write it once, and it applies to every matching element. For example, this style block makes all paragraphs 16px and all level-one headings 32px:

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

Now every <p> tag on that page uses 16px automatically, without you typing style into each one. If you later decide paragraphs should be 18px, you change it in one place and all paragraphs update. This is much cleaner than inline styles and scales well as your page grows.

You can also target specific elements by giving them a class or id. For instance, <p class="intro"> combined with .intro { font-size: 20px; } in your style block lets you make only the intro paragraph larger while leaving other paragraphs at their default size. This gives you flexibility without cluttering your HTML tags.

Understanding font size units: pixels, points, percentages, and em

Pixels (px) are fixed — 20px is always 20px on any device. They are straightforward and predictable, which is why they are common for web design. Points (pt) are an older unit borrowed from print and are less common on the web; 12pt is roughly 16px, but the conversion is not exact across all browsers.

Percentages (%) are relative to the parent element's size. If a paragraph is 16px and you set a span inside it to 150%, that span becomes 24px. Percentages are useful when you want text to scale proportionally, but they require you to think about what the parent size is. Em works the same way — 1em equals the parent's font size, so 1.5em is 150% of the parent. Em is popular in professional design because it scales smoothly when you change base sizes.

For learning and for most websites, pixels are the easiest choice. They do not require you to track parent sizes or do math. Use percentages or em when you want your design to scale automatically — for example, if you want all text to grow slightly on larger screens without changing every single size value.

Using heading tags for automatic sizing

HTML includes six heading levels, <h1> through <h6>, that come with built-in sizes. <h1> is the largest (usually around 32px by default), and <h6> is the smallest (usually around 13px). You do not have to set a size — the browser applies one automatically. This is useful because headings are semantic, meaning they tell both the browser and screen readers that this text is important.

If the default size does not match your design, you can override it with CSS. For example, h2 { font-size: 24px; } makes all level-two headings 24px instead of the browser default. You can also use inline styles on a single heading: <h2 style="font-size: 28px">. The heading remains semantically correct (screen readers still know it is an h2), but it displays at your chosen size.

Do not skip heading tags just to avoid their default size — use them for structure, then adjust the size with CSS if needed. This keeps your page accessible and properly organized.

Using an external CSS file for consistent sizing across pages

When you have multiple HTML pages, an external CSS file lets you set font sizes once and use them everywhere. Create a file called styles.css, write your font-size rules in it, then link it to each HTML page with a single line in the <head>: <link rel="stylesheet" href="styles.css">.

Now all your pages share the same sizes. If you change p { font-size: 16px; } to p { font-size: 18px; } in styles.css, every paragraph on every page updates automatically. This is how professional websites maintain consistency — they define sizes in one place and never repeat them.

External files also load faster than style blocks because the browser caches them (stores them locally after the first visit). For a single-page project or a quick test, a style block is fine. For anything larger, an external file is the standard approach.

Common mistakes and how to fix them

The most common mistake is forgetting the unit. font-size: 20 does not work — you must write font-size: 20px or font-size: 20pt or another unit. The browser ignores the rule if the unit is missing. Another mistake is using the old <font size="5"> tag, which still works in most browsers but is outdated and will not work in future versions. Use CSS instead.

A third mistake is setting font size too small. Text smaller than 12px is hard to read on most screens, especially for people with vision difficulties. If you need small text, consider using 12px or 14px as a minimum, or use a lighter color or different font to create visual hierarchy without shrinking the size.

Finally, do not assume your chosen size looks the same on all devices. A 16px font on a phone screen looks different from 16px on a desktop monitor because phone screens are denser. Test your page on multiple devices, or use responsive design techniques (like media queries) to adjust sizes for different screen widths.

Frequently Asked Questions

What is the difference between font-size and line-height?

Font-size controls how tall the letters are. Line-height controls the space between lines of text. You can set both separately — for example, font-size: 16px; line-height: 1.5; makes text 16px tall with 1.5 times that height as space between lines. Line-height makes text easier to read, especially in long paragraphs.

Can I use decimal numbers for font size?

Yes. font-size: 16.5px and font-size: 1.25em both work. Browsers accept decimals and will render them as precisely as the screen allows. Decimals are useful when you are scaling text proportionally or fine-tuning sizes for a specific design.

Why does my font size not change when I add a style?

The most common reason is a typo in the CSS — check that you wrote font-size (with a hyphen), not fontSize or fontsize. Another reason is that a more specific rule is overriding yours. For example, an inline style overrides a style block, and a style block overrides an external file. If your change is not showing, check whether a more specific rule exists elsewhere.

What font size should I use for body text?

Most websites use 14px to 18px for body text, with 16px being the most common default. Larger text (18px or more) is easier to read but takes up more space. Smaller text (12px or less) is hard to read for many people. Start with 16px and adjust based on your font choice and how your page looks on different devices.

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.