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
Increase or decrease the size of a font with CSS
The font-size property in CSS controls the size of text elements. You can use various units and keywords to set font sizes, from absolute values like pixels to relative keywords like "small" and "large".
Syntax
font-size: value;
Available Values
The font-size property accepts several types of values:
- Absolute keywords: xx-small, x-small, small, medium, large, x-large, xx-large
- Relative keywords: smaller, larger
- Length units: pixels (px), points (pt), ems (em), rems (rem)
- Percentage: relative to parent element's font size
Example: Different Font Sizes
<!DOCTYPE html> <html> <head> <title>Font Size Examples</title> </head> <body> <p style="font-size: 12px;">This font size is 12 pixels</p> <p style="font-size: 18px;">This font size is 18 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: x-large;">This font size is extra large</p> <p style="font-size: 150%;">This font size is 150% of parent</p> </body> </html>
Example: Using CSS Classes
<!DOCTYPE html>
<html>
<head>
<style>
.small-text { font-size: 14px; }
.medium-text { font-size: 18px; }
.large-text { font-size: 24px; }
.responsive-text { font-size: 2em; }
</style>
</head>
<body>
<p class="small-text">Small text using CSS class</p>
<p class="medium-text">Medium text using CSS class</p>
<p class="large-text">Large text using CSS class</p>
<p class="responsive-text">Responsive text using em units</p>
</body>
</html>
Comparison of Units
| Unit | Description | Best Use Case |
|---|---|---|
| px (pixels) | Absolute unit | Fixed layouts |
| em | Relative to parent font size | Component-based scaling |
| rem | Relative to root font size | Consistent scaling |
| % | Percentage of parent | Proportional sizing |
Conclusion
The font-size property offers flexible options for controlling text size. Use pixels for precise control, em/rem for responsive designs, and keywords for quick styling. Choose the unit that best fits your layout requirements.
Updated on: 2026-03-15T23:18:59+05:30
721 Views
Advertisements