The three ways to control text size in HTML
Text size in HTML is controlled through CSS, not through HTML tags alone. You have three practical routes: use the font-size property in a style attribute on individual elements, write CSS rules in a <style> block in your page head, or link to an external CSS file. Most developers use one of the last two because they let you change sizes across your whole site at once.
HTML itself has semantic tags like <h1>, <h2>, and <p> that come with default sizes built in by your browser. But those defaults are a starting point, not a limit. You override them with CSS whenever you need different sizes.
Key Takeaways
- The font-size property in CSS controls text size, measured in pixels (px), ems (em), or percentages (%).
- Inline styles using style="font-size: 18px" change one element at a time and are useful for quick tests but hard to maintain across a whole site.
- A <style> block in your page head lets you set sizes for all paragraphs, headings, or other tags in one place.
- External CSS files are the standard approach for larger projects because one file controls text size across every page.
- Relative units like em and % scale with the parent element, while px is fixed and does not change when users adjust their browser settings.
Using inline styles for single elements
The quickest way to change one piece of text is to add a style attribute directly to the HTML tag. Write style="font-size: 18px" inside the opening tag, replacing 18 with whatever size you want in pixels.
Here is a real example:
<p style="font-size: 18px">This paragraph is 18 pixels tall.</p>
This works immediately and is useful for testing or one-off changes. The downside is that if you have ten paragraphs and want them all to be 18px, you have to type the style attribute ten times. If you later decide 18px was wrong and want 20px instead, you change all ten. This is why inline styles are fine for learning but not for real projects.
Setting sizes for all tags of one type with a style block
A style block sits in the <head> section of your HTML page and lets you write one rule that applies to every matching tag. Put <style></style> between your </head> tags, then write CSS rules inside.
Here is what that looks like:
<head> <style> p { font-size: 16px; } </style> </head>
Now every <p> tag on that page is 16 pixels. If you want headings to be larger, add another rule:
h1 { font-size: 32px; } h2 { font-size: 24px; }
This approach scales better than inline styles because you write the rule once and it applies everywhere. If you change your mind, you edit one line and every matching tag updates at once.
Using an external CSS file for multiple pages
When you have more than one HTML page, an external CSS file is the standard approach. Create a file called styles.css (or any name you choose), write your font-size rules in it, then link to it from every HTML page.
In your HTML <head>, add this line:
<link rel="stylesheet" href="styles.css">
Then in styles.css, write your rules:
p { font-size: 16px; } h1 { font-size: 32px; }
Now every page that links to styles.css uses those sizes. Change the file once and the change appears on every page. This is why external CSS is used in almost every real website.
Pixels, ems, and percentages: which unit to use
Pixels (px) are the simplest: font-size: 18px means exactly 18 pixels, always. They do not scale when a user changes their browser's text size setting, which can be a problem for accessibility.
Ems (em) are relative to the parent element's size. If the parent is 16px and you set a child to font-size: 1.5em, the child is 24px (16 × 1.5). Ems are useful when you want text to scale together — if you later change the parent to 18px, the child automatically becomes 27px.
Percentages (%) work the same way as ems: font-size: 150% means 150 percent of the parent's size. They are often easier to read than ems.
For most projects, start with pixels for simplicity. As you learn more, ems and percentages become useful for responsive design, where text needs to scale on different screen sizes.
Common sizes and what they are used for
There is no single "correct" size, but here are the ranges you see in practice:
| Element | Typical Size | Why |
|---|---|---|
| Body text (paragraphs) | 14px to 18px | Large enough to read comfortably on screen, small enough to fit multiple lines |
| h1 (main heading) | 28px to 36px | Clearly separates the page title from body text |
| h2 (section heading) | 20px to 28px | Smaller than h1 but still distinct from body text |
| Small text (captions, labels) | 12px to 14px | Visually de-emphasizes secondary information |
These are starting points. Your actual sizes depend on your font choice, your audience, and your design. Test on real devices and ask whether the text is easy to read.
Frequently Asked Questions
Can I change text size without CSS?
Not really. HTML has tags like <big> and <small>, but they are outdated and browsers handle them inconsistently. CSS is the standard way. Even if you only know HTML, learning font-size in CSS takes minutes and is worth it.
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 16px and a <p> inside it is 18px, the paragraph is 18px. If you use relative units like em, the child's em is calculated from the parent, so 1.5em on a child of 16px becomes 24px.
Why does my text size look different in different browsers?
Browsers have different default fonts and rendering engines. A 16px font in Chrome might look slightly different in Firefox. Use a web-safe font like Arial, Georgia, or system fonts to minimize this. Test in multiple browsers during development.
Should I use px or em for a whole website?
Many developers set the body to a base size in px (like 16px) and then use em or % for everything else. This gives you the simplicity of pixels as a reference point while keeping text scalable. For example: body { font-size: 16px; } h1 { font-size: 2em; } makes h1 exactly 32px.