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 text tags, using CSS (Cascading Style Sheets), or writing style rules that apply to whole pages or sections. The method you choose depends on whether you want to change one word, a paragraph, or everything on the page at once.

The oldest method — the size attribute — works directly in HTML tags like <font size="5">, but modern web development avoids this because it mixes content with appearance. CSS is the standard now because it separates what you're saying from how it looks, making pages easier to update and maintain.

Most real websites use CSS because a single change to your stylesheet updates font size across dozens of pages instantly. But if you're learning or building something small, inline styles (CSS written directly in a tag) work fine and show you exactly what's happening.

Key Takeaways

CSS is the modern standard for changing font size; use the font-size property with measurements like pixels (px), ems (em), or percentages (%).
Inline styles let you change one element's size by adding style="font-size: 24px;" directly to an HTML tag.
Internal stylesheets in the <head> section let you set rules for all paragraphs, headings, or other tags at once.
External CSS files are best for larger projects because one file controls the look of your entire website.
Pixels (px) give you exact control; ems (em) and percentages scale relative to parent elements, which is useful for responsive design.

Using inline styles to change one element

An inline style is CSS written directly inside an HTML tag. To make a single paragraph larger, add style="font-size: 24px;" to the opening tag:

<p style="font-size: 24px;">This paragraph is 24 pixels tall.</p>

The number before px is the size in pixels. You can use any number: 12, 18, 32, 48, or whatever fits your design. Inline styles work on any tag — headings, links, list items, divs, spans — anywhere you want to override the default size for that one element.

This method is quick for testing or small projects, but it gets messy fast. If you have ten paragraphs and want them all 20 pixels, you'd write the same style ten times. A stylesheet is cleaner because you write the rule once and it applies everywhere.

Setting font size for entire tag types with internal CSS

An internal stylesheet lives in the <head> section of your HTML file and sets rules for all tags of a certain type. This code makes every paragraph on the page 18 pixels:

Put this between <head> and </head>, before the <body> tag. Now every <p> tag on that page will be 18 pixels unless you override it with an inline style.

You can write rules for multiple tag types in one stylesheet. This example sets sizes for paragraphs, headings, and links all at once:

Internal stylesheets work well for single-page projects or when you want different pages to have different default sizes. For websites with many pages, an external stylesheet is better because you update the size once and it changes everywhere.

Using an external CSS file for multiple pages

An external stylesheet is a separate file (usually named style.css) that holds all your CSS rules. Your HTML file links to it, so one stylesheet can control the look of your entire website.

Create a file called style.css and write your font-size rules in it:

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

Then link to it in the <head> of every HTML page:

Now all your pages use the same font sizes. If you want to make every paragraph 18 pixels instead of 16, you change it once in style.css and the update appears on every page that links to it. This is why external stylesheets are standard for real websites.

Choosing between pixels, ems, and percentages

Pixels (px) are the simplest: font-size: 24px; means exactly 24 pixels, no matter what. Use pixels when you want precise control and you know the exact size you want.

Ems (em) are relative to the parent element's size. If the parent is 16 pixels and you set a child to font-size: 1.5em;, the child will be 24 pixels (1.5 times 16). Ems are useful because if you later change the parent size, the child scales automatically. A common pattern is to set the body to 16 pixels and then use ems for everything else.

Percentages (%) work the same way as ems — they're relative to the parent. font-size: 150%; means 150 percent of the parent size. Percentages and ems are especially helpful for responsive design, where your page needs to look good on phones, tablets, and desktops.

For learning and small projects, pixels are easiest. For professional websites that need to work on many screen sizes, ems or percentages are better because they scale automatically.

Using classes and IDs to target specific elements

If you want some paragraphs to be 16 pixels and others to be 24 pixels, use classes or IDs to target them separately. A class is a label you can apply to multiple elements; an ID is unique to one element.

In your CSS, define a class like this:

.large-text { font-size: 24px; } .small-text { font-size: 12px; }

Then in your HTML, add the class name to any tag:

<p class="large-text">This paragraph is large.</p> <p class="small-text">This paragraph is small.</p> <p>This paragraph uses the default size.</p>

Classes are more flexible than IDs because you can use the same class on many elements. IDs are useful when you want to style one specific element on a page, like a header or footer. In CSS, target an ID with a hash: #header { font-size: 20px; }

Frequently Asked Questions

What's the difference between the font tag and CSS font-size?

The <font> tag is old HTML that mixes content with appearance. Modern HTML and CSS separate them: HTML describes what something is (a paragraph, a heading), and CSS describes how it looks (size, color, spacing). Browsers still support <font>, but web developers avoid it because CSS is more powerful and easier to maintain.

Can I use font-size on a div or span?

Yes. A <div> or <span> has no default size, so font-size sets the size for any text inside it. This is useful for grouping text that should all be the same size without using a specific tag like <p> or <h1>.

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

The child's size overrides the parent's. If a <div> is 20 pixels and a <p> inside it is 16 pixels, the paragraph will be 16 pixels. This is why ems are useful: if the child is 1.5em, it will always be 1.5 times whatever the parent is, even if the parent changes.

How do I make font size responsive on mobile devices?

Use ems or percentages instead of pixels, or use media queries in CSS to set different sizes for different screen widths. A media query looks like @media (max-width: 600px) { p { font-size: 14px; } } and applies those rules only on screens 600 pixels wide or smaller. This lets you make text smaller on phones and larger on desktops.

Is there a default font size in HTML?

Most browsers default to 16 pixels for body text and scale headings from there. <h1> is usually about 32 pixels, <h2> about 24 pixels, and so on. You can override these defaults with CSS, but the browser defaults are a good starting point if you're not sure what size to use.

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.