The Three Ways to Set Font Size in HTML

You change font size in HTML by using the style attribute on an element, by writing CSS in a style tag, or by linking to an external CSS file. The most direct method for a single element is the style attribute: write <p style="font-size: 20px;">Your text here</p> and the paragraph will display at 20 pixels. For multiple elements or an entire page, CSS in a style tag or external file is cleaner and faster to maintain.

HTML itself has no font-size command. The font tag (which older websites used) is now obsolete and browsers no longer support it reliably. CSS—the language that controls how HTML looks—is the standard way to control size, color, spacing, and every other visual property. Learning CSS is learning how to make HTML look the way you want.

Key Takeaways

  • Use the style attribute directly on an element for a one-time size change: <p style="font-size: 20px;">
  • Write CSS inside a <style> tag in the head of your HTML to control font size for multiple elements at once.
  • Font size can be measured in pixels (px), em units (em), percentages (%), or other units; pixels are the simplest to start with.
  • Use CSS classes to explore the same font size to many different elements without repeating the style attribute on each one.
  • Relative units like em and % scale based on the parent element's size, making them useful for responsive designs that work on phones and desktops.

Using the Style Attribute for a Single Element

The style attribute is the quickest way to change one element's font size right now. Open your HTML file and find the tag you want to resize—a paragraph, heading, link, or any other element. Inside the opening tag, add style="font-size: 20px;" and replace 20 with whatever size you want. Here is a real example:

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

The number before px is the size in pixels. Larger numbers make text bigger; smaller numbers make it smaller. A typical paragraph on a website is 16 pixels. Headings are often 32 pixels or larger. If you are not sure what size to try, start with 18 or 20 and adjust from there.

The style attribute works on any HTML element: headings, paragraphs, links, list items, table cells, and more. If you have many elements to resize, the style attribute becomes repetitive fast. That is when CSS in a style tag becomes useful.

Using CSS in a Style Tag to Resize Multiple Elements

When you need to change the font size of many elements—or all paragraphs, or all headings—write CSS in a <style> tag inside the <head> section of your HTML. This way you write the rule once and it applies everywhere.

Here is the structure:

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

This code makes every <p> tag 18 pixels, every <h1> tag 36 pixels, and every <h2> tag 28 pixels. You write the tag name (without angle brackets), then curly braces, then the property font-size: and the size you want, then a semicolon. If you add more paragraphs to your page later, they automatically get 18 pixels without you having to add style attributes to each one.

Using CSS Classes to Control Font Size Without Repeating Code

CSS classes let you create a reusable style that you can explore to any element. This is useful when you want some paragraphs to be 18 pixels and others to be 24 pixels, or when you want to resize elements of different types (a paragraph and a heading) to the same size.

First, define the class in your style tag:

<style> .large-text { font-size: 24px; } .small-text { font-size: 14px; } </style>

Then add the class name to any element using the class attribute:

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

Class names start with a dot in the style tag but not in the HTML tag itself. You can use the same class on as many elements as you want, and changing the size in the style tag updates all of them at once.

Understanding Pixels, Em, Percentages, and Other Size Units

Pixels (px) are the simplest unit and the best place to start. One pixel is one dot on the screen. font-size: 16px; means the text is 16 dots tall. Pixels are absolute—they do not change based on anything else.

Em (em) is a relative unit based on the parent element's size. If the parent is 16 pixels and you set a child to font-size: 1.5em;, the child becomes 24 pixels (16 × 1.5). Em is useful for responsive design because if you change the parent size, all children scale with it automatically. 1em equals the parent's size; 0.5em is half; 2em is double.

Percentages (%) work the same way as em. font-size: 150%; means 150 percent of the parent's size. 100% is the parent's size; 50% is half; 200% is double.

Rem (rem) is like em but always relative to the root (the <html> tag) instead of the when ready parent. This makes it more predictable in complex layouts. Most modern websites use rem for this reason.

For learning and small projects, pixels are fine. For websites that need to work well on phones and large screens, em, rem, or percentages are better because they scale automatically.

Linking to an External CSS File

As your HTML grows, keeping all CSS in a style tag becomes messy. Professional websites separate CSS into its own file. Create a file called styles.css in the same folder as your HTML file, then write your CSS rules inside it:

p { font-size: 18px; } h1 { font-size: 36px; } .large-text { font-size: 24px; }

In your HTML file's <head> section, add a link tag that points to the CSS file:

<head> <link rel="stylesheet" href="styles.css"> </head>

The href attribute should match the name and location of your CSS file. Now your HTML file uses all the styles from styles.css. This approach keeps your HTML clean and makes it straightforward to reuse the same CSS file across many HTML pages.

Common Mistakes and How to Avoid Them

A frequent mistake is forgetting the unit. font-size: 20; does not work; you must write font-size: 20px; or font-size: 1.25em; or another valid unit. The browser will ignore the rule if the unit is missing.

Another mistake is using the old <font> tag, which looks like <font size="5">Text</font>. This tag is obsolete and does not work reliably in modern browsers. Always use CSS instead.

If your font size change does not show up, check that your style tag is inside the <head> section, not the body. Also check that you spelled font-size correctly (with a hyphen, not an underscore). CSS is case-sensitive for some things but not for property names, so font-size, Font-Size, and FONT-SIZE all work—but fontsize without the hyphen does not.

Frequently Asked Questions

What is the default font size in HTML?

Most browsers set the default to 16 pixels for body text. Headings have their own defaults: <h1> is usually 32 pixels, <h2> is 24 pixels, and so on. You can override these defaults with CSS.

Can I change font size for the entire page at once?

Yes. Write body { font-size: 18px; } in your style tag, and all text on the page becomes 18 pixels unless you override it with a more specific rule. This is a good way to set a baseline size for your whole site.

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. They are separate properties. You might set font-size: 16px; and line-height: 1.5; to make text readable with breathing room between lines.

Should I use pixels or em for a professional website?

Em or rem are better for professional sites because they scale automatically on different devices. Pixels work fine for learning and small projects. Many modern sites use a mix: pixels for the root size and em or rem for everything else.

How do I make text bigger on mobile phones?

Use relative units like em or rem instead of pixels, or use CSS media queries to set different sizes for different screen widths. A media query looks like @media (max-width: 600px) { p { font-size: 14px; } } and applies the rule only on screens narrower than 600 pixels.