CSS
Which CSS Property Controls the Text Size?
Typography plays a crucial role in web design, impacting readability, accessibility, and user experience. In CSS, the font-size property controls the size of text on a webpage. Understanding how to use it effectively can improve the visual hierarchy and ensure content is legible across different devices.
1. What Is the font-size Property?
The font-size property in CSS determines the size of text displayed on a webpage. It can be set using different units, such as pixels (px), em, rem, percentages (%), and more.
Syntax:
selector {
font-size: value;
}
Example: Setting Font Size for Paragraphs
p {
font-size: 18px;
}
This sets all paragraph text (<p>) to 18 pixels in size.
2. Different Units for font-size
CSS provides multiple units to define text size, each serving a specific purpose.
1. Absolute Units (Fixed Size)
| Unit | Description | Example |
|---|---|---|
px | Pixels (Fixed size) | font-size: 16px; |
pt | Points (Used in print) | font-size: 12pt; |
cm, mm, in | Centimeters, Millimeters, Inches | font-size: 1cm; (Rarely used in web design) |
✅ Best for: Maintaining consistent text size across devices.
⛔ Limitation: Doesn’t scale dynamically with screen size or user preferences.
2. Relative Units (Responsive & Scalable)
| Unit | Description | Example |
|---|---|---|
% | Percentage of the parent element’s font size | font-size: 120%; |
em | Relative to the parent element’s font size | font-size: 1.2em; |
rem | Relative to the root element (<html>) | font-size: 1.5rem; |
vw | Percentage of the viewport width | font-size: 5vw; |
vh | Percentage of the viewport height | font-size: 5vh; |
✅ Best for: Making text responsive and user-friendly.
✅ Recommended: rem is preferred because it scales relative to the root element.
3. Best Practices for Using font-size
✅ Use rem for scalable, accessible typography
- It ensures text size scales based on the root font size.
- Works well with user browser settings for accessibility.
✅ Avoid using only px for responsive designs
- Fixed sizes (
px) don’t adjust for different screen sizes or zoom levels.
✅ Use media queries to adjust font sizes for different screens
body {
font-size: 16px; /* Default size */
}
@media (max-width: 768px) {
body {
font-size: 14px; /* Smaller text for mobile */
}
}
✅ Consider clamp() for flexible scaling
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
- Ensures text stays within a minimum and maximum range while scaling dynamically.
4. Full Example: Applying font-size in a Website
body {
font-size: 1rem; /* Scalable base size */
line-height: 1.6;
}
h1 {
font-size: 2.5rem; /* Larger for headings */
}
p {
font-size: 1rem; /* Default paragraph size */
}
This setup ensures:
✔ Consistent typography across the website.
✔ Responsive scaling for different devices.
✔ Better readability with appropriate line spacing.
5. Conclusion
The font-size property is essential for controlling text size in CSS. Choosing the right unit ensures readability, accessibility, and responsiveness.
Quick Recap:
✅ font-size sets text size in CSS.
✅ Use relative units (rem, em) for better scalability.
✅ Avoid fixed units (px) for responsive designs.
✅ Utilize media queries and clamp() for adaptive typography.
By following these best practices, you can create text that is both beautiful and user-friendly across all devices.