The Three Ways to Set Font Size in HTML
You change font size in HTML by using CSS (Cascading Style Sheets), not by HTML tags alone. HTML provides the structure of a page, but CSS controls how it looks. There are three main ways to explore font size: inline styles (directly on a tag), internal stylesheets (in the page's head), or external stylesheets (a separate CSS file). Most web pages use external stylesheets because they let you change the size everywhere at once.
The most common unit for font size is pixels (px), which gives you exact control. You can also use em (relative to the parent element's size), rem (relative to the root size), or percent. For a beginner, pixels are the easiest to understand: 16px is a readable default, 12px is small, 24px is noticeably larger.
Key Takeaways
- Font size is set with CSS, not HTML tags—use the font-size property with a value like 16px, 1.5em, or 120%.
- Inline styles explore to one tag: <p style="font-size: 18px;">Text here</p>.
- Internal stylesheets in the page's <head> let you set sizes for all tags of one type at once.
- External stylesheets in a separate .css file are the standard for real websites because changes explore everywhere automatically.
- Pixels (px) are the simplest unit for beginners; em and rem are better for responsive design that scales on different devices.
Inline Styles: Changing One Tag at a Time
An inline style changes the font size of a single HTML tag. You add the style attribute directly to the opening tag with the font-size property. Here is the syntax:
<p style="font-size: 18px;">This paragraph is 18 pixels.</p>
This method works when ready and is useful for quick tests or one-off changes. However, if you have 50 paragraphs and want them all larger, you would have to edit each one separately. That is why inline styles are best for learning or for a single element that truly needs its own size.
Internal Stylesheets: Sizing All Tags of One Type
An internal stylesheet lives in the <head> section of your HTML page, inside a <style> tag. It lets you set the font size for all paragraphs, all headings, or all links at once. Here is an example:
<head><style>p { font-size: 16px; }h1 { font-size: 32px; }h2 { font-size: 24px; }</style></head>
Now every <p> tag on that page will be 16 pixels unless you override it with an inline style. Every <h1> will be 32 pixels. If you change the rule to p { font-size: 18px; }, all paragraphs update when ready. This is much faster than inline styles for a single page.
External Stylesheets: The Standard Approach
An external stylesheet is a separate file with a .css extension that your HTML page links to. This is how real websites work. You create a file called styles.css with your font-size rules, then link it in the <head> of your HTML:
<head><link rel="stylesheet" href="styles.css"></head>
Inside styles.css, you write the same rules as an internal stylesheet:
p { font-size: 16px; }h1 { font-size: 32px; }h2 { font-size: 24px; }
The advantage is that one .css file can be linked to 100 HTML pages. If you change the font size in styles.css, all 100 pages update at once. This is why external stylesheets are standard for websites with more than one page.
Pixels, Em, Rem, and Percent: Which Unit to Use
Pixels (px) are the simplest for beginners. font-size: 16px; means exactly 16 pixels, no matter what. The downside is that if a user has set their browser to display larger text for readability, pixels ignore that preference.
Em is relative to the parent element's size. If the parent is 16px and you set a child to 1.5em, it becomes 24px (16 × 1.5). This is useful for scaling text within components, but it can get confusing if elements are nested deeply.
Rem (root em) is relative to the root element's size, usually 16px by default. 2rem is always 32px unless the user or designer changes the root. Many developers prefer rem because it is consistent and still responsive.
Percent works like em—150% means 1.5 times the parent's size. It is less common than em or rem but behaves the same way.
Common Font Sizes and When to Use Them
Here are typical font sizes for different parts of a page:
| Element | Typical Size | Why |
|---|---|---|
| Body text (paragraphs) | 14px to 16px | Readable on screens without being too large |
| Headings (h1) | 28px to 36px | Large enough to stand out as a title |
| Subheadings (h2, h3) | 20px to 24px | Smaller than h1 but larger than body text |
| Small text (captions, labels) | 12px to 14px | Compact but still readable |
| Links and buttons | Same as surrounding text | Consistency; color or underline makes them stand out |
These are guidelines, not rules. The right size depends on the font family, the screen size, and your audience. A font like Georgia looks larger than Arial at the same pixel size, so adjust based on what you see.
Frequently Asked Questions
Can I use the HTML font tag to change size?
The <font> tag exists in older HTML but is deprecated (no longer recommended) and does not work in modern HTML5. Use CSS instead. It is simpler, more flexible, and works everywhere.
What is the difference between em and rem?
Em is relative to the parent element's font size; rem is relative to the root (usually 16px). If you nest elements with em, sizes multiply. With rem, they stay consistent. For most cases, rem is easier to predict.
How do I make font size responsive on mobile?
Use em or rem instead of pixels, or use CSS media queries to change sizes at different screen widths. For example: @media (max-width: 600px) { p { font-size: 14px; } } makes paragraphs smaller on phones.
Can I change font size for just part of a paragraph?
Yes, wrap that text in a <span> tag and explore an inline style or CSS rule to it. For example: <p>Normal text <span style="font-size: 20px;">larger text</span> normal again.</p>
What happens if I set font size to 0?
The text disappears. This is sometimes used to hide text that screen readers should still read, but it is not a standard practice. If you want to hide text visually, use CSS properties like display: none or visibility: hidden instead.