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 style attribute to a tag, using a <style> block in your page's head section, or linking to an external CSS file. The browser reads these instructions and displays text at the size you specify. Most people start with the style attribute because it works when ready and requires no setup.

HTML itself has no font-size command — the language only marks up what text is (a heading, a paragraph, a list item). CSS, which stands for Cascading Style Sheets, is the tool that controls how it looks. Once you know where to put the instruction, changing size takes one line.

Key Takeaways

The style attribute lets you set font size on a single tag: <p style="font-size: 18px;">
A <style> block in your page's <head> section controls size for all tags of one type at once.
Font size can be measured in pixels (px), points (pt), em units, or percentages — pixels are the easiest to understand and most common on the web.
Relative sizes like em and percentage scale with the parent element, so they work better on responsive sites that change size on mobile.
Heading tags (<h1> through <h6>) already have built-in sizes, but you can override them with your own style.

Using the style attribute for a single element

The fastest way to change one piece of text is to add style="font-size: [size]" directly inside the opening tag. Replace [size] with a number and a unit. Here is a paragraph set to 20 pixels:

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

The browser reads this and displays the paragraph at 20 pixels. You can use this on any tag — paragraphs, headings, list items, links, or spans. If you want to change the size of just one word, wrap it in a <span> tag and add the style there:

The style attribute works when ready and does not require any other setup. The downside is that if you have 50 paragraphs and want them all the same size, you have to type the style 50 times. That is where a style block becomes useful.

Using a style block to control multiple elements at once

A <style> block lives in the <head> section of your page (the part before the visible content starts). Inside it, you write rules that explore to every tag of a certain type. Here is an example:

This rule says: every <p> tag on this page should be 18 pixels. You do not add anything to the individual paragraphs — the style block handles it. If you later decide paragraphs should be 20 pixels instead, you change one line and all paragraphs update at once.

You can write rules for any tag. Here is a style block that sets sizes for headings and paragraphs together:

The style block is cleaner than repeating the style attribute everywhere, and it is the standard way to design a page. Most real websites use this approach or an external CSS file.

Pixels, points, em, and percentages: which unit to use

Font size needs a unit — a number alone means nothing. The four most common units are pixels (px), points (pt), em, and percentages (%). Each behaves differently, and the choice matters if your page needs to work on phones and tablets.

Pixels (px) are the simplest. One pixel is one dot on the screen. font-size: 16px; means the text is 16 dots tall. Pixels are fixed — they do not change based on anything else. Most websites use pixels for body text because the size stays predictable.

Points (pt) are an older unit from print. One point is 1/72 of an inch. You see points in word processors like Microsoft Word. On the web, points behave almost like pixels and are less common. Stick with pixels unless you have a reason to use points.

Em is a relative unit. One em equals the font size of the parent element. If a paragraph is 16 pixels and you set a span inside it to font-size: 1.5em;, the span becomes 24 pixels (16 × 1.5). Em is useful because it scales — if you later change the paragraph to 18 pixels, the span automatically becomes 27 pixels. This makes responsive design easier.

Percentages (%) work the same way as em. font-size: 150%; means 150 percent of the parent size. A 16-pixel paragraph with a 150% span inside it produces a 24-pixel span. Percentages and em are interchangeable — use whichever feels clearer to you.

Overriding built-in heading sizes

HTML heading tags — <h1>, <h2>, <h3>, and so on — come with built-in sizes. An <h1> is usually around 32 pixels, an <h2> around 28 pixels, and smaller headings scale down from there. These defaults exist so headings stand out without you having to do anything.

You can override these sizes with your own style. If you want an <h2> to be smaller than normal, add a style rule:

Now every <h2> on your page is 20 pixels instead of the browser default. You can also use the style attribute on a single heading:

<h2 style="font-size: 20px;">A smaller heading</h2>

Overriding heading sizes is common when you are designing a page and the default sizes do not fit your layout. Just remember that headings exist to show structure — making an <h2> smaller than a paragraph can confuse readers about what is important.

Common mistakes and how to avoid them

The most frequent error is forgetting the unit. font-size: 18; does not work — the browser ignores it because 18 what? Always include px, pt, em, or %. The second mistake is putting the style block in the wrong place. It must go in the <head> section, not in the body where your visible content is.

Another common problem is using a unit that is too large or too small by accident. If you write font-size: 200px;, the text becomes enormous and may break your layout. If you write font-size: 8px;, the text becomes hard to read. For body text, 14 to 18 pixels is standard. For headings, 24 to 48 pixels is typical, depending on the heading level.

Finally, do not mix units in a way that confuses you. If you set a paragraph to 16 pixels and then use em inside it, remember that 1em = 16 pixels in that context. Writing font-size: 2em; makes the text 32 pixels, not 2 pixels. Write it down if you need to — the math is straightforward but straightforward to mess up when you are building a page.

When to use an external CSS file instead

For a single page or a small project, a style block in the head works fine. But if you are building a website with many pages, you should move your styles to a separate CSS file. This file contains all your style rules and is linked from every page.

To link a CSS file, add this line in your page's <head>:

Then create a file called styles.css in the same folder and write your rules inside it:

p { font-size: 16px; }h1 { font-size: 32px; }

Now every page that links to styles.css uses the same font sizes. If you change the size in the CSS file, it updates everywhere at once. This saves time and keeps your design consistent across your whole site. For learning, a style block is fine. For a real project, an external CSS file is the professional approach.

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: font-size: 16px; line-height: 1.5; makes text 16 pixels tall with 1.5 times that space between lines. Line-height is useful for readability — tight spacing makes long paragraphs hard to read.

Can I use font-size on a div or other container?

Yes. If you set font-size: 20px; on a <div>, all text inside that div becomes 20 pixels unless you override it with a smaller rule. This is useful for grouping related content and controlling its size all at once.

Why does my font size look different on mobile than on desktop?

Browsers on phones and tablets zoom out to fit the page, which makes text smaller. To fix this, add a viewport tag in your <head>: <meta name="viewport" content="width=device-width, initial-scale=1">. This tells the browser to respect your font sizes instead of zooming. You can also use em or percentage units, which scale better across devices.

Is there a maximum or minimum font size I should use?

There is no hard limit, but readability matters. Text smaller than 12 pixels is hard to read on most screens. Text larger than 72 pixels is rarely necessary unless you are making a poster or banner. For body text, 14 to 18 pixels is the sweet spot. For headings, scale up from there based on importance.

Can I change font size with JavaScript?

Yes. JavaScript can read and change the style attribute on any element: document.querySelector("p").style.fontSize = "20px"; changes all paragraphs to 20 pixels. This is useful if you want to let users adjust text size with a button, but for static pages, CSS is simpler and faster.

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.