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
Usage of font-size property in CSS
The font-size property in CSS controls the size of text elements. It accepts various units and keywords to specify how large or small text should appear on a webpage.
Syntax
font-size: value;
Font Size 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), em, rem, points (pt)
- Percentage: relative to parent element's font size
Example: Different Font Size Values
<html>
<head>
<style>
.pixel-size { font-size: 18px; }
.keyword-small { font-size: small; }
.keyword-large { font-size: large; }
.em-size { font-size: 1.5em; }
.percent-size { font-size: 120%; }
</style>
</head>
<body>
<p style="font-size: 15px;">This font size is 15 pixels</p>
<p style="font-size: small;">This font size is small</p>
<p style="font-size: large;">This font size is large</p>
<p class="em-size">This font size is 1.5em</p>
<p class="percent-size">This font size is 120%</p>
</body>
</html>
Comparison of Font Size Units
| Unit Type | Example | Relative to | Use Case |
|---|---|---|---|
| Pixels (px) | 16px | Fixed size | Precise control |
| Em | 1.2em | Parent element | Scalable design |
| Percentage (%) | 120% | Parent element | Responsive text |
| Keywords | large | Browser default | Semantic sizing |
Best Practices
- Use
remunits for consistent scaling across the entire document - Use
emunits for components that should scale relative to their parent - Avoid very small sizes (below 12px) for readability
- Test font sizes across different devices and screen sizes
Conclusion
The font-size property offers flexible options for controlling text size using pixels, keywords, em units, or percentages. Choose the appropriate unit based on whether you need fixed sizing or responsive scaling.
Updated on: 2026-03-15T23:18:59+05:30
211 Views
Advertisements