How to Change Font Size in HTML
What you’ll build or solve
You’ll change the size of text across a full page or specific elements using CSS.
When this approach works best
Changing font size works best when you:
Learn HTML on Mimo
- Adjust heading hierarchy for better structure.
- Improve readability across your layout.
- Make small UI text, like labels or legal notes smaller.
- Fine-tune typography inside components.
This approach is a bad idea if you use the deprecated <font size=""> attribute or hardcode inconsistent values throughout your project.
Prerequisites
- A code editor
- A browser
- Basic understanding of HTML and CSS selectors
No additional setup is required.
Step-by-step instructions
Step 1: Change font size for the whole page
Use the font-size property on the body element to control the base text size.
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Font size example</title>
<style>
body {
font-size:18px;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This text is slightly larger than default.</p>
</body>
</html>
You can use:
pxfor fixed sizingemfor scaling relative to the parentremfor scaling relative to the root (html)
Many developers prefer rem because it scales predictably across the page.
Example with rem:
CSS
html {
font-size:16px;
}
body {
font-size:1rem;
}
What to look for:
Headings (h1 to h6) have browser defaults that may not match your design. Override them directly if needed.
Step 2: Change font size for specific elements
Target elements by tag name or class when you need more control.
PHP
<h1>Main heading</h1>
<pclass="small">Fine print text</p>
<style>
h1 {
font-size:32px;
}
.small {
font-size:12px;
}
</style>
You can style any element the same way. Only the selector changes.
Step 3: Use inline styles for quick tests
Inline styles are useful for one-off changes or quick experiments.
CSS
<pstyle="font-size:20px;">
Temporary size change
</p>
If you repeat the same style more than once, move it into a class:
<pclass="large">First</p>
<pclass="large">Second</p>
<style>
.large {
font-size:20px;
}
</style>
Examples you can copy
Example 1: Clear heading hierarchy
CSS
<h1>Main Title</h1>
<h2>Section Title</h2>
<p>Paragraph text.</p>
<style>
h1 {
font-size:2.5rem;
}
h2 {
font-size:1.75rem;
}
p {
font-size:1rem;
}
</style>
Using rem keeps everything proportional.
Example 2: Small legal text
JavaScript
<pclass="legal">
Terms and conditions apply.
</p>
<style>
.legal {
font-size:0.75rem;
color: #555;
}
</style>
Example 3: Scalable component
JavaScript
<divclass="card">
<h3>Profile</h3>
<p>Short description.</p>
</div>
<style>
.card {
font-size:1rem;
}
.cardh3 {
font-size:1.25rem;
}
</style>
This keeps text proportional inside the component.
Common mistakes and how to fix them
Mistake 1: Using the <font> tag
What you might do
<fontsize="5">Text</font>
Why it breaks
The <font> tag is deprecated and mixes structure with styling.
Fix
JavaScript
<spanclass="big">Text</span>
<style>
.big {
font-size:20px;
}
</style>
Mistake 2: Using only pixels everywhere
What you might do
CSS
body {
font-size:14px;
}
Why it causes issues
Fixed pixel sizes do not scale well when users zoom or change base settings.
Fix
CSS
html {
font-size:16px;
}
body {
font-size:1rem;
}
rem units scale more predictably.
Mistake 3: Unexpected scaling with em
What you might do
CSS
.parent {
font-size:1.5em;
}
.child {
font-size:1.5em;
}
Why it breaks
em units compound based on the parent size. Nested elements become larger than expected.
Fix
CSS
.child {
font-size:1.5rem;
}
rem avoids compounding issues.
Troubleshooting
If font size does not change, check selector specificity in DevTools.
If the text looks inconsistent, inspect inherited styles.
If nested elements appear too large, check for stacked em values.
If changes seem ignored, verify your CSS file is linked correctly.
If layout breaks after resizing text, check for fixed height containers that do not adapt to content size.
Quick recap
- Use
font-sizeto control text size. - Apply it to
bodyfor global scaling. - Target specific elements with selectors.
- Use inline styles only for quick tests.
- Prefer
remfor predictable scaling.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot