The three ways to set font size in HTML

You control font size in HTML by adding a style attribute to any text element, using a CSS stylesheet, or writing CSS rules in a style tag in your document head. The style attribute is fastest for one-off changes. A stylesheet is best when you want the same size across many pages. A style tag works when you want to set rules for your whole page in one place.

HTML itself has no "font size" tag. The font tag existed in older HTML but is now obsolete — browsers still render it, but it will fail validation and may not work in future browsers. Modern HTML uses CSS (Cascading Style Sheets) to control how text looks, including size.

Font size is measured in several units. Pixels (px) are fixed and predictable — 16px is always 16 pixels on screen. Em (em) is relative to the parent element's size, so 1.5em means 1.5 times whatever the parent is set to. Rem (rem) is relative to the root (the html element), which makes it easier to scale a whole site at once. Percent (%) also scales relative to the parent. For most pages, pixels or rem work best.

Key Takeaways

  • Add style="font-size: 20px;" directly to any HTML tag to change that one element's size.
  • Use a <style> tag in your document head to set font sizes for multiple elements at once.
  • Link an external CSS file to explore the same font sizes across many pages without rewriting rules.
  • Pixels (px) give you exact control; em and rem scale automatically when you change the base size.
  • Never use the obsolete <font> tag — it will fail validation and may stop working in future browsers.

Using the style attribute for a single element

The quickest way to change one piece of text is to add a style attribute directly to the HTML tag. Open the tag, type style="font-size: ", then enter a number and a unit. For example, <p style="font-size: 20px;">This text is 20 pixels.</p> makes that paragraph 20 pixels tall. You can use pixels, em, rem, or percent — the browser will render all of them.

This method is fast for testing or for text that appears nowhere else on your page. It is not efficient if you want the same size on many elements, because you have to type the style attribute into every tag. If you find yourself copying the same style attribute five times, switch to a style tag or stylesheet instead.

Using a style tag to set rules for your whole page

A style tag goes in the head of your HTML document (between <head> and </head>) and lets you write CSS rules that explore to every matching element on the page. Inside the style tag, you write the element name, then curly braces, then the property and value. For example:

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

This rule makes every <p> tag on the page 18 pixels and every <h2> tag 28 pixels. You can add as many rules as you need. If you want to target only certain paragraphs (not all of them), give those paragraphs a class attribute, then write a rule for that class. For example, <p class="intro"> paired with .intro { font-size: 24px; } makes only paragraphs with class="intro" larger.

Using an external CSS file for multiple pages

When you have more than one HTML page, an external stylesheet saves you from rewriting the same CSS rules on every page. Create a new file called something like styles.css, write your font-size rules in it, then link it in the head of each HTML page with <link rel="stylesheet" href="styles.css">. Now every page that links to that file uses the same font sizes.

A stylesheet also makes it straightforward to change sizes across your whole site at once. If you decide all your paragraphs should be 20px instead of 18px, you change it in one place and every page updates automatically. For any project with more than a few pages, this is faster and less error-prone than editing each page separately.

Understanding font-size units and when to use each one

Pixels (px) are the simplest unit. 16px is always 16 pixels wide on screen, no matter what. Use pixels when you want exact control and do not need the size to scale automatically. Many designers use 16px as a base for body text because it is readable on most screens.

Em (em) is relative to the parent element's size. If the parent is 16px and you set a child to 1.5em, the child becomes 24px (16 × 1.5). Em is useful when you want text to scale together — if you change the parent size, the child scales with it. The downside is that em can compound: if a parent is 1.5em and its child is also 1.5em, the child ends up 2.25 times the original size.

Rem (rem) is relative to the root element (the html tag) only, not the parent. This means 1.5rem is always 1.5 times the root size, no matter how deeply nested the element is. Rem avoids the compounding problem and makes it straightforward to scale your whole site: change the root size once and everything scales proportionally. Many modern sites use rem as their default unit.

Percent (%) also scales relative to the parent, similar to em. 150% means 1.5 times the parent size. It is less common than em or rem but works the same way.

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.25rem; or another valid unit. The browser will ignore the rule if the unit is missing.

Another mistake is using the obsolete <font> tag. You might see old code like <font size="5">Big text</font>, but this tag is no longer part of HTML and will fail validation. Always use CSS instead. If you inherit code that uses the font tag, replace it with a style attribute or CSS rule.

A third mistake is setting font size on the wrong element. If you want a heading larger, make sure you are targeting the heading tag (h1, h2, h3, etc.), not a paragraph inside it. Use your browser's inspector tool to check which element you are actually styling.

Testing your font size changes in the browser

After you write your CSS, open your HTML file in a browser and look at the result. If the size is not what you expected, open your browser's developer tools (usually F12 or right-click and select "Inspect") and find the element in the inspector. The inspector shows you what CSS rules are actually applied to that element and whether any rules are overriding your changes.

If a rule is crossed out in the inspector, it means another rule is overriding it. This often happens when a stylesheet rule is stronger than a style attribute, or when a more specific rule beats a general one. The inspector also shows you the final computed size, which is helpful when you are using em or rem and want to see what the actual pixel size ended up being.

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 height of space between lines. Line-height is useful for readability — larger line-height makes text easier to read.

Can I use decimal numbers for font size?

Yes. font-size: 16.5px; and font-size: 1.25rem; both work fine. Browsers render decimal sizes smoothly. You do not have to use whole numbers.

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

Mobile browsers often zoom or scale text differently than desktop browsers, especially if your page is not set up for mobile viewing. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to your head tag to tell mobile browsers to display your page at the correct scale. After that, font sizes should look consistent.

Should I use pixels or rem for a new project?

Rem is generally the better choice for new projects because it scales automatically when you change the root size. Pixels are fine if you want exact control and do not plan to scale your whole site. Many modern frameworks and design systems use rem as the default.

How do I make text responsive so it gets bigger on larger screens?

Use CSS media queries to change font size at different screen widths. For example, @media (min-width: 768px) { p { font-size: 18px; } } makes paragraphs 18px only on screens 768 pixels wide or larger. You can write multiple media queries to set different sizes for mobile, tablet, and desktop.