The three ways to set font size in HTML

You change font size in HTML using the style attribute, CSS in a style tag, or a separate CSS file. The style attribute works for a single element. A style tag in your HTML head works for the whole page. A CSS file works across multiple pages and is the standard approach for real projects.

HTML itself has no font-size command — the language only marks up content. All sizing happens through CSS, which is the styling layer that sits on top of HTML. This separation means you can change how something looks without touching the HTML structure.

Key Takeaways

  • The style attribute lets you set font size on one element: <p style="font-size: 18px;">
  • A style tag in your HTML head applies font size rules to the whole page or to specific elements you target with selectors.
  • Font size can be measured in pixels (px), ems (em), rems (rem), or percentages (%), and each unit behaves differently when the user changes their browser settings.
  • Pixels give you exact control but ignore user preferences; ems and rems scale with user settings and are better for accessibility.
  • The font-size property works on any element that contains text, including paragraphs, headings, links, buttons, and list items.

Using the style attribute for a single element

The quickest way to change one element's font size is to add a style attribute directly to the HTML tag. Open the tag, type style=, then put your CSS inside quotes. For example: <p style="font-size: 18px;">This text is 18 pixels.</p>

This approach works for testing or for one-off changes, but it gets messy fast. If you have ten paragraphs and want them all the same size, you have to type the style attribute ten times. If you later decide to change that size to 20 pixels, you have to edit all ten tags. For anything beyond a single element, use a style tag or a CSS file instead.

The style attribute accepts any CSS property. You can combine multiple properties with a semicolon: <p style="font-size: 18px; color: blue;">

Using a style tag to format multiple elements

A style tag goes in the head section of your HTML file, above the opening <body> tag. Inside it, you write CSS rules that apply to elements throughout the page. To set all paragraphs to 16 pixels, write:

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

This rule applies to every <p> tag on the page. You can also target specific elements by giving them a class or id attribute. For example, if you want some paragraphs to be larger, add class="large" to those tags, then write a rule for that class:

<style> p { font-size: 16px; } .large { font-size: 20px; } </style>

The dot before large tells the browser you are targeting a class. If you use an id instead (which should be unique to one element), use a hash: #header { font-size: 24px; }

Understanding font-size units: pixels, ems, rems, and percentages

Font size can be measured in different units, and each one behaves differently. Pixels (px) are fixed — 18px is always 18 pixels on screen, regardless of user settings. This gives you exact control but means users who have set their browser to use larger text will not see your change reflected.

Ems (em) are relative to the font size of the parent element. If the parent is 16px and you set a child to 1.5em, the child becomes 24px. This is useful for scaling text within components, but it can get confusing when you nest elements deeply. Rems (rem) work the same way but always measure from the root element (the html tag), so they are more predictable. Percentages (%) also scale from the parent, so 150% means 1.5 times the parent's size.

For accessibility, rems and ems are better than pixels because they respect the user's browser settings. If someone has set their browser to use 20px as the default instead of 16px, text sized in rems will scale up automatically. Text sized in pixels will not.

Using a separate CSS file for multiple pages

For a website with more than one page, create a separate CSS file (usually named style.css) and link it in the head of each HTML file. This way, you write your font-size rules once and they apply everywhere. In your HTML head, add:

<link rel="stylesheet" href="style.css">

Then in your style.css file, write your rules as you would in a style tag, but without the tags themselves:

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

This approach scales well. If you need to change all paragraph text from 16px to 18px, you edit one line in one file, and the change appears on every page that links to that CSS file. Most real websites use this method.

Setting font size on different HTML elements

Font size works on any element that contains text. Headings (h1 through h6) usually have their own default sizes — h1 is larger than h2, which is larger than h3 — but you can override them. Links (a tags), buttons, list items, and table cells all accept font-size rules. Divs and spans, which are generic containers, also accept it if they hold text.

Headings already have semantic meaning (h1 is the most important, h6 is the least), so changing their size does not change their importance to search engines or screen readers. You can make an h3 look like an h1 with CSS, but it will still be an h3 in the document structure. For accessibility, keep the visual hierarchy roughly aligned with the semantic hierarchy — do not make an h6 larger than an h1.

Common mistakes and how to avoid them

The most common mistake is forgetting the unit. font-size: 18; does not work — you must write font-size: 18px; or font-size: 1.125rem; The browser will ignore a size without a unit.

Another mistake is using pixels for everything and then wondering why users with accessibility settings do not see the change. If you want your site to respect user preferences, use rems or ems for body text and headings, and reserve pixels for decorative elements or icons where exact sizing matters.

A third mistake is setting font size on a parent element and expecting it to cascade down forever. It does cascade to children, but only one level deep in some cases, and the behavior changes depending on which unit you used. If you want consistent sizing across a whole section, target each element type explicitly or use a class.

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 in CSS: p { font-size: 16px; line-height: 1.5; } Line-height is often measured as a multiple (1.5 means 1.5 times the font size) rather than a fixed unit.

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

Yes. Divs and spans are generic containers and accept any CSS property, including font-size. The size applies to any text inside them, unless a child element overrides it with its own font-size rule.

Should I use pixels or rems for my website?

Use rems for body text, headings, and any text users might want to resize. Use pixels only when you need exact control and the size does not affect readability — for example, an icon or a decorative element. Rems respect user browser settings and are better for accessibility.

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

Use media queries in your CSS. For example: p { font-size: 16px; } @media (min-width: 768px) { p { font-size: 18px; } } This sets paragraphs to 16px on small screens and 18px on screens 768 pixels wide or larger.

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

The child's rule wins. If a paragraph is set to 16px but a span inside it is set to 20px, the span will be 20px and the rest of the paragraph will be 16px. CSS specificity determines which rule applies when there is a conflict.