Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to change font size in HTML?
To change the font size in HTML, use the CSS font-size property. You can apply it using the style attribute for inline styles, internal CSS with the <style> tag, or external CSS files. HTML5 does not support the deprecated <font> tag, so CSS is the modern approach.
Keep in mind that inline styles using the style attribute override any global styles set in <style> tags or external stylesheets.
Using Inline Styles
The simplest method is using the style attribute directly on HTML elements:
<!DOCTYPE html>
<html>
<head>
<title>HTML Font Size</title>
</head>
<body>
<h1 style="color: red; font-size: 40px;">Large Heading</h1>
<p style="color: blue; font-size: 18px;">This is demo text</p>
<p style="font-size: 12px;">Small text</p>
</body>
</html>
Using Internal CSS
For better organization, use the <style> tag in the <head> section:
<!DOCTYPE html>
<html>
<head>
<title>HTML Font Size with CSS</title>
<style>
h1 { font-size: 36px; }
p { font-size: 16px; }
.small-text { font-size: 12px; }
</style>
</head>
<body>
<h1>Styled Heading</h1>
<p>Regular paragraph</p>
<p class="small-text">Small paragraph</p>
</body>
</html>
Font Size Units
CSS offers several units for font sizing:
| Unit | Description | Example |
|---|---|---|
| px | Pixels (fixed size) | font-size: 16px; |
| em | Relative to parent element | font-size: 1.2em; |
| rem | Relative to root element | font-size: 1.5rem; |
| % | Percentage of parent | font-size: 120%; |
Example with Different Units
<!DOCTYPE html>
<html>
<head>
<title>Font Size Units</title>
<style>
.pixels { font-size: 20px; }
.em-unit { font-size: 1.5em; }
.rem-unit { font-size: 1.2rem; }
.percentage { font-size: 150%; }
</style>
</head>
<body>
<p class="pixels">20px font size</p>
<p class="em-unit">1.5em font size</p>
<p class="rem-unit">1.2rem font size</p>
<p class="percentage">150% font size</p>
</body>
</html>
Conclusion
Use CSS font-size property to control text size in HTML. Choose pixels for fixed sizes, or em/rem units for responsive designs that scale with user preferences.
Updated on: 2026-03-15T22:17:10+05:30
134K+ Views
Advertisements