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
How to use small font in HTML?
To create small font text in HTML, use the CSS font-size property with the style attribute. Since HTML5 deprecated the <font> tag, CSS is the modern standard for controlling font sizes. You can specify font size in various units like pixels (px), em, rem, or percentages.
The inline style attribute overrides any global styles defined in external CSS files or within <style> tags in the document head.
Syntax
Following is the syntax for setting small font using inline CSS −
<p style="font-size: value;">Content</p>
Where value can be specified in pixels (px), em units, rem units, or percentages (%).
Using Pixels for Small Font
Pixels provide precise control over font size. Common small font sizes range from 10px to 14px, with 16px being the typical default size for most browsers.
Example
Following example demonstrates how to create small font text using pixel values −
<!DOCTYPE html> <html> <head> <title>HTML Small Font with Pixels</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h1>Normal Heading</h1> <p>This is normal paragraph text (default size).</p> <p style="font-size: 12px;">This text is 12px - smaller than default.</p> <p style="font-size: 10px;">This text is 10px - very small.</p> </body> </html>
The output shows progressively smaller text sizes −
Normal Heading This is normal paragraph text (default size). This text is 12px - smaller than default. This text is 10px - very small.
Using Relative Units for Small Font
Relative units like em and rem scale proportionally. Using 0.8em makes text 80% of the parent element's font size, while rem units are relative to the root element.
Example − Using Em Units
<!DOCTYPE html>
<html>
<head>
<title>Small Font with Em Units</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div style="font-size: 18px;">
<p>Parent div text at 18px</p>
<p style="font-size: 0.8em;">Child text at 0.8em (80% of 18px = 14.4px)</p>
<p style="font-size: 0.6em;">Child text at 0.6em (60% of 18px = 10.8px)</p>
</div>
</body>
</html>
The relative units automatically scale based on the parent element's font size −
Parent div text at 18px Child text at 0.8em (80% of 18px = 14.4px) Child text at 0.6em (60% of 18px = 10.8px)
Using CSS Classes for Small Font
For better maintainability, define small font styles in CSS classes rather than using inline styles repeatedly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Small Font with CSS Classes</title>
<style>
.small-text { font-size: 12px; color: #666; }
.tiny-text { font-size: 10px; color: #999; }
.fine-print { font-size: 11px; font-style: italic; color: #777; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Product Information</h2>
<p>HTML5 Complete Course - Learn web development basics.</p>
<p class="small-text">Additional details and specifications.</p>
<p class="tiny-text">Technical requirements and compatibility.</p>
<p class="fine-print">Terms and conditions apply. See website for details.</p>
</body>
</html>
This approach provides consistent styling and easier maintenance across multiple elements −
Product Information HTML5 Complete Course - Learn web development basics. Additional details and specifications. (12px, gray) Technical requirements and compatibility. (10px, light gray) Terms and conditions apply. See website for details. (11px, italic, gray)
Font Size Comparison
Following table shows common font sizes and their typical use cases −
| Font Size | Description | Common Use |
|---|---|---|
| 10px | Very small, minimal readability | Fine print, copyright notices |
| 12px | Small but readable | Captions, metadata, secondary text |
| 14px | Small to normal | Mobile text, compact layouts |
| 16px | Standard default size | Regular paragraph text |
| 0.8em | 80% of parent size | Relative scaling, responsive design |
Best Practices for Small Fonts
-
Accessibility − Avoid fonts smaller than 10px for better readability, especially for users with visual impairments.
-
Responsive design − Use relative units (em, rem) for better scaling across different screen sizes.
-
Consistency − Define font sizes in CSS classes rather than inline styles for easier maintenance.
-
Context − Reserve very small fonts (10-11px) for secondary information like captions, metadata, or fine print.
Conclusion
Use the CSS font-size property with values like 12px, 0.8em, or percentages to create small font text in HTML. For maintainable code, prefer CSS classes over inline styles, and ensure small text remains readable for accessibility.
5K+ Views
