The three ways to set font size in HTML
You change font size in HTML by adding a style attribute to a tag, using a CSS stylesheet, or writing CSS inside a <style> block. The most common method for beginners is the style attribute, which lets you change one element at a time. For a whole page or website, a stylesheet is faster and cleaner.
HTML itself has no font-size tag. The language only marks up what text is — a heading, a paragraph, a list item. CSS, the styling language, controls how it looks. This separation means you can change the size of every heading on your site from one place instead of editing each one individually.
All three methods use the same measurement units: pixels (px), em, and percent (%) are the most practical. Pixels are fixed sizes (16px is 16 pixels wide). Em and percent scale with the browser's default size, so text stays readable if someone zooms in or has set their browser to larger text.
Key Takeaways
- The style attribute method works when ready: add style="font-size: 20px;" inside any opening tag to change that one element.
- A CSS stylesheet in your <head> section controls the size of all matching elements at once, so you change one rule instead of many tags.
- Pixels (px) give you exact sizes; em and percent (%) scale with the reader's browser settings and are better for accessibility.
- Heading tags (<h1> through <h6>) and paragraph tags (<p>) have built-in default sizes that you override with CSS.
Using the style attribute to change one element
The quickest way to change a single piece of text is to add style="font-size: [size];" directly inside the opening tag. Here is a paragraph at 18 pixels:
<p style="font-size: 18px;">This text is 18 pixels.</p>
Here is a heading at 32 pixels:
<h1 style="font-size: 32px;">Large heading</h1>
This method works on any tag: paragraphs, headings, links, list items, and spans. The size takes effect when ready when you save and reload the page. The downside is that if you have ten paragraphs and want them all at 18 pixels, you have to type the style attribute ten times.
Using a stylesheet to change all matching elements at once
A CSS stylesheet lets you write one rule that applies to every matching tag on the page. Put a <style> block in the <head> section of your HTML file, before the </head> closing tag. Inside it, write the tag name, then curly braces, then the rule:
<style>p { font-size: 18px; }</style>
This rule makes every <p> tag on the page 18 pixels. Now if you have fifty paragraphs, they all change with one line of code. You can write rules for headings, links, and any other tag:
<style>h1 { font-size: 32px; }h2 { font-size: 24px; }p { font-size: 16px; }</style>
If you want to change the size of only some paragraphs — say, the ones in a sidebar — use a class. Give those paragraphs a class name, then write a rule for that class:
<p class="sidebar">This is sidebar text.</p><style>.sidebar { font-size: 14px; }</style>
Notice the period before the class name in the CSS rule. That tells the browser you are targeting a class, not a tag.
Linking to an external stylesheet
If you have many pages, put your CSS in a separate file and link to it from each page. Create a file called styles.css and write your rules in it:
h1 { font-size: 32px; }h2 { font-size: 24px; }p { font-size: 16px; }
Then in the <head> of each HTML page, add a link tag:
<link rel="stylesheet" href="styles.css">
Now every page that links to styles.css uses the same sizes. If you change the font size in the stylesheet, it updates on all pages at once. This is how real websites stay consistent.
Pixels, em, and percent: which unit to use
Pixels (px) are the simplest: 16px is always 16 pixels, no matter what. They are good for learning and for elements that need to stay exactly the same size, like buttons or icons.
Em is a relative unit based on the parent element's size. If the parent is 16px and you set a child to 1.5em, it becomes 24px (16 × 1.5). Em is useful because if you change the parent size, the child scales with it. A common pattern is to set the body to 16px, then use em for everything else.
Percent (%) works the same way as em: 150% of the parent size. It is easier to read than em for some people.
Em and percent are better for accessibility because they respect the reader's browser settings. If someone has set their browser to use larger text, em and percent scale up with it. Pixels do not. For body text and headings, em or percent is the professional choice.
Common font sizes and what they look like
| Size | Common use | Notes |
|---|---|---|
| 12px or 0.75em | Small text, captions, fine print | Hard to read on mobile; use sparingly |
| 14px or 0.875em | Labels, metadata, secondary text | Readable but noticeably smaller |
| 16px or 1em | Body text, paragraphs | The browser default; good baseline |
| 18px or 1.125em | Larger body text, readability focus | Easier to read, especially on mobile |
| 24px or 1.5em | Subheadings, <h3> tags | Noticeably larger, draws attention |
| 32px or 2em | Main headings, <h1> tags | Large and prominent |
| 48px or 3em | Page titles, hero sections | Very large; use for emphasis only |
Frequently Asked Questions
Can I change font size with just HTML tags, no CSS?
No. HTML has no font-size tag. The old <font> tag did this decades ago, but it is obsolete and no browser supports it anymore. CSS is the only way. You can use the style attribute (which is CSS written inside HTML) or a stylesheet, but you need CSS either way.
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. A small font-size with large line-height gives you tall spacing between lines. They work together: 16px font with 1.5 line-height is readable; 16px font with 1 line-height is cramped.
Why does my font size look different in different browsers?
Browsers have different default sizes, and some users have changed their browser settings. Use em or percent instead of pixels so your text scales with the reader's preferences. Also check that you are not accidentally inheriting a size from a parent element — a paragraph inside a div might be smaller if the div has a smaller font-size set.
How do I make text responsive so it gets bigger on large screens?
Use media queries in CSS. Write one rule for small screens and another for large screens. For example: p { font-size: 16px; } @media (min-width: 768px) { p { font-size: 18px; } } makes paragraphs 16px on phones and 18px on tablets and desktops.
Should I use the style attribute or a stylesheet?
Use a stylesheet for anything you will use more than once. The style attribute is fine for one-off changes while you are learning, but stylesheets are cleaner, faster to edit, and easier to maintain. Professional websites always use stylesheets.