How to Change Font Size in HTML

The two ways to set font size in HTML

You change font size in HTML by using the style attribute or a CSS stylesheet. The style attribute lets you change size on a single element right in the tag itself. A stylesheet lets you set sizes for whole groups of elements at once, which is why developers use it for real projects.

Both methods use the same underlying instruction — a CSS property called font-size — but they live in different places. The style attribute is faster for testing one thing. The stylesheet is faster when you have fifty things to change.

HTML itself has no font-size command. HTML only marks up what something is — a heading, a paragraph, a list. CSS is the language that controls how it looks. This separation is why the two approaches exist.

Key Takeaways

The style attribute changes font size on one tag: <p style="font-size: 20px"> makes that paragraph 20 pixels tall.
A stylesheet in the <head> section changes size for all matching tags at once, so you write the rule once instead of repeating it.
Font size can be measured in pixels (px), points (pt), ems (em), or percentages (%), and pixels are the most common choice for web pages.
Heading tags like <h1> and <h2> already have built-in sizes, but you can override them with either method.

Using the style attribute for a single element

The style attribute goes inside the opening tag of any HTML element. Write the word style, then an equals sign, then your CSS rule in quotes. The rule is font-size: followed by a number and a unit, then a semicolon.

Here is a paragraph that is 24 pixels tall:

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

Here is a heading that is 18 pixels tall:

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

You can put multiple CSS rules in one style attribute by separating them with semicolons. This example sets both the font size and the color:

<p style="font-size: 20px; color: blue">Large blue text</p>

The style attribute is useful when you are testing something or changing one specific element. It is not useful when you have ten paragraphs that should all be the same size, because you would have to type the same rule ten times.

Using a stylesheet to change multiple elements

A stylesheet is a block of CSS rules that lives in the <head> section of your HTML page, inside a <style> tag. Write the name of the HTML tag you want to change, then open curly braces, then write your CSS rules inside, then close the braces.

This stylesheet makes all paragraphs 18 pixels tall:

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

Now every <p> tag on the page uses that size without you having to add a style attribute to each one. If you later decide paragraphs should be 20 pixels instead, you change it in one place and all paragraphs update.

You can write rules for multiple tags in the same stylesheet:

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

Stylesheets also let you target elements by class or ID, which means you can have two different paragraph styles on the same page. A class is a label you add to a tag. Write class="name" in the opening tag, then in the stylesheet write .name { } with a period in front.

<p class="large">This paragraph is big.</p><p class="small">This paragraph is small.</p><style>.large { font-size: 20px;}.small { font-size: 12px;}</style>

Understanding font-size units

Pixels (px) are the most common unit for web pages. One pixel is one dot on the screen. A font size of 16px means the text is 16 dots tall. Pixels are predictable — 16px looks the same size on every device that displays the page.

Points (pt) are an older unit borrowed from printing. One point is 1/72 of an inch. You see points in word processors like Microsoft Word, but they are less common on websites because they do not scale well on different screen sizes.

Ems (em) are relative to the parent element's font size. If the parent is 16px and you set a child to 1.5em, the child becomes 24px. Ems are useful when you want sizes to scale together, but they can be confusing when you have nested elements.

Percentages (%) work the same way as ems — they are relative to the parent. A size of 150% means 150 percent of the parent's size. Like ems, percentages are useful for responsive design but require you to think about what the parent size is.

For learning and for most websites, stick with pixels. They are straightforward and predictable.

Overriding built-in heading sizes

HTML heading tags — <h1>, <h2>, <h3>, and so on — come with built-in sizes. An <h1> is large, an <h2> is smaller, and so on. Browsers explore these sizes automatically even if you do not write any CSS.

You can override a heading's built-in size using either method. With a style attribute:

<h1 style="font-size: 20px">This heading is smaller than normal</h1>

Or with a stylesheet:

<style>h1 { font-size: 20px;}</style>

When you override a heading's size, the heading still means the same thing to screen readers and search engines — it is still a top-level heading. You are only changing how it looks. This is important because the semantic meaning (what the tag represents) is separate from the visual style (how it appears).

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: 1.5em or another valid unit. The browser will ignore the rule if the unit is missing.

Another mistake is putting the style tag in the wrong place. The <style> tag must go in the <head> section, not in the <body>. If you put it in the body, it still works, but it is not the correct place and can cause problems in complex pages.

A third mistake is misspelling the property name. It is font-size, not fontsize or font_size. CSS is strict about spelling.

If your font size change is not showing up, open your browser's developer tools by pressing F12 or right-clicking and selecting "Inspect". Look at the element in the inspector and check whether your CSS rule is there. If it is there but crossed out, something else is overriding it. If it is not there at all, check your spelling and your tag placement.

Frequently Asked Questions

What is the difference between font-size and font-weight?

Font-size controls how tall the letters are. Font-weight controls how thick or bold they are. They are two separate CSS properties. You can have large thin text or small bold text by changing them independently.

Can I use font-size on any HTML tag?

Yes. Font-size works on paragraphs, headings, lists, links, divs, spans, and any other tag that contains text. It does not work on tags that do not display text, like <meta> or <link>.

What happens if I set font-size on a parent and child element?

The child's font-size overrides the parent's. If you set a paragraph to 16px and a span inside it to 20px, the span is 20px and the rest of the paragraph is 16px. If you use ems or percentages, the child's size is calculated from the parent's size.

Is there a standard font size for web pages?

Most browsers default to 16px for paragraph text. Many websites use 16px or 18px for body text because it is readable on most screens. Headings are usually larger — 24px to 48px depending on the heading level.

Can I change font size with JavaScript?

Yes. You can use JavaScript to change the style attribute or add and remove classes, which changes the CSS that applies. But for static font sizes that do not change, 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.