The Three Ways to Set Font Size in HTML
You change font size in HTML by using CSS — the styling language that controls how text looks. HTML itself only marks up what text is (a heading, a paragraph, a list item); CSS controls the size. You can write CSS in three places: inside a style attribute on the tag itself, in a <style> block at the top of your page, or in a separate CSS file. Most of the time, a <style> block is the clearest approach for small projects.
The most common way to set size is the font-size property. You give it a number and a unit — usually pixels (px), which are fixed sizes, or em, which scale relative to the parent element. A paragraph at 16px will always be 16 pixels wide on screen. A paragraph at 1.5em will be 1.5 times the size of its parent element's font.
Key Takeaways
- Use the CSS property font-size with a value like 16px, 1.2em, or 120% to control how large text appears.
- Write CSS inside a <style> tag in your HTML document's head, or in a separate .css file linked to your HTML.
- Pixels (px) give you fixed sizes; em and percentages scale based on the parent element, which is useful for responsive design.
- Use semantic HTML tags like <h1>, <h2>, and <p> for headings and body text, then style them with CSS rather than trying to fake sizes with different tags.
Using a Style Block to Change Font Size
The clearest way for beginners is to put a <style> block in the <head> section of your HTML document. Inside it, you write a rule that targets the tag you want to change, then set the font-size property.
Here is a real example:
<!DOCTYPE html> <html> <head> <style> p { font-size: 18px; } </style> </head> <body> <p>This paragraph will be 18 pixels.</p> </body> </html>
The rule p { font-size: 18px; } says: "Every <p> tag on this page will have a font size of 18 pixels." You can do the same for headings, links, or any other tag. If you want different paragraphs to be different sizes, give them a class name and style the class instead.
Using Classes to Set Different Sizes
When you need some text larger and some smaller, use classes. A class is a label you attach to a tag, then style in your CSS. Here is how:
<style> .large-text { font-size: 24px; } .small-text { font-size: 12px; } </style> <p class="large-text">This is big.</p> <p class="small-text">This is small.</p>
The dot before the class name in CSS (.large-text) tells the browser you are styling a class, not a tag. In the HTML, you add class="large-text" to the tag you want to style. You can use the same class on many tags throughout your page.
Pixels, Em, and Percentages: Which Unit to Use
Pixels (px) are the simplest: 16px is always 16 pixels, no matter what. Use pixels when you want exact control and your page does not need to scale for different screen sizes.
Em is a relative unit. One em equals the font size of the parent element. If a paragraph's parent (usually the body) is set to 16px, then 1em in that paragraph is 16px. If you set a paragraph to 1.5em, it will be 1.5 times the parent's size. This is useful for responsive design because if you change the base size, everything scales with it.
Percentages work the same way as em: 100% is the parent's size, 150% is 1.5 times the parent. Many developers prefer percentages because they are easier to read.
For most websites, start with pixels for simplicity. As you learn more, em and percentages become powerful tools for making your page adapt to different devices.
Inline Styles: Changing Size on a Single Tag
You can also set font size directly on a single tag using the style attribute. This is called an inline style.
<p style="font-size: 20px;">This paragraph is 20 pixels.</p>
Inline styles work, but they are harder to maintain because the styling is scattered throughout your HTML instead of collected in one place. If you later want to change the size of all your paragraphs, you would have to edit each one. A <style> block or a separate CSS file is almost always better.
Using a Separate CSS File
As your project grows, move your CSS to its own file. Create a file called styles.css and put all your CSS rules in it. Then link it to your HTML in the <head> section:
<head> <link rel="stylesheet" href="styles.css"> </head>
In your styles.css file, write your rules without the <style> tags:
p { font-size: 16px; } h1 { font-size: 32px; }
This approach keeps your HTML clean and makes it straightforward to reuse the same styles across multiple pages. If you have a website with ten pages, one CSS file controls the font size on all of them.
Common Font Size Values and What They Look Like
Here are sizes that work well for different parts of a page:
| Element | Typical Size | Notes |
|---|---|---|
| Body text (paragraphs) | 14px to 18px | Larger sizes are easier to read on mobile devices. |
| Small text (captions, labels) | 12px to 14px | Do not go below 12px; it becomes hard to read. |
| Headings (h1) | 28px to 48px | Main page title; should stand out clearly. |
| Subheadings (h2, h3) | 20px to 28px | Section titles; smaller than h1 but larger than body text. |
| Links | Same as body text | Use color and underline to distinguish, not size. |
These are starting points. Adjust based on the font you choose and how your page looks. Always test on a phone to make sure text is readable.
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: p { font-size: 16px; line-height: 1.5; } makes paragraphs 16 pixels tall with 1.5 times that much space between lines. Good line-height makes text easier to read.
Can I use font-size on a div or span?
Yes. A <div> or <span> has no default size, so setting font-size on it works the same way as on a paragraph. Span is inline (sits next to other text), while div is a block (takes up a full line). Both accept font-size in CSS.
Why does my font size not change when I add CSS?
Check that your CSS rule targets the right tag or class name. If you wrote p { font-size: 20px; } but your text is in a <div>, the rule will not explore. Also check that your <style> block is in the <head>, not the body, and that you saved the file.
Is it better to use px or em for font size?
Pixels are simpler to learn and understand. Em is better for responsive design because sizes scale together. Start with pixels. Once you are comfortable, try em for a project and see which you prefer.
How do I make text bigger on mobile devices?
Use media queries in CSS. A media query lets you write different rules for different screen sizes. For example: @media (max-width: 600px) { p { font-size: 18px; } } makes paragraphs 18 pixels on screens smaller than 600 pixels wide. This is a more advanced topic, but it is the standard way to make responsive text.