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
Set the font size with CSS
The font-size property in CSS controls the size of text in your web pages. You can specify font sizes using various units and keyword values to create visual hierarchy and improve readability.
Syntax
font-size: value;
Font Size Values
The font-size property accepts several types of values:
- Keywords: xx-small, x-small, small, medium, large, x-large, xx-large
- Relative keywords: smaller, larger
- Units: pixels (px), percentages (%), em, rem
Example: Different Font Size Values
<!DOCTYPE html>
<html>
<head>
<title>Font Size Examples</title>
</head>
<body>
<p style="font-size: 10px;">This font size is 10 pixels</p>
<p style="font-size: small;">This font size is small</p>
<p style="font-size: medium;">This font size is medium</p>
<p style="font-size: large;">This font size is large</p>
<p style="font-size: 150%;">This font size is 150% of parent</p>
<p style="font-size: 1.5em;">This font size is 1.5em</p>
</body>
</html>
Using CSS Classes
Instead of inline styles, it's better practice to use CSS classes:
<!DOCTYPE html>
<html>
<head>
<style>
.heading { font-size: 24px; }
.subheading { font-size: 18px; }
.body-text { font-size: 14px; }
.small-text { font-size: 12px; }
</style>
</head>
<body>
<h1 class="heading">Main Heading</h1>
<h2 class="subheading">Subheading</h2>
<p class="body-text">This is regular body text.</p>
<p class="small-text">This is small text for footnotes.</p>
</body>
</html>
Font Size Units Comparison
| Unit | Description | Example |
|---|---|---|
| px | Fixed pixel size | font-size: 16px |
| % | Percentage of parent element | font-size: 120% |
| em | Relative to parent font size | font-size: 1.2em |
| rem | Relative to root font size | font-size: 1.2rem |
Conclusion
The font-size property offers flexible ways to control text size using keywords, pixels, percentages, and relative units. Choose the appropriate unit based on your design needs and responsive requirements.
Updated on: 2026-03-15T23:18:59+05:30
336 Views
Advertisements