CSS
Which CSS Property Configures the Size of Text?
Typography is a crucial aspect of web design, impacting readability, accessibility, and user experience. In CSS, the font-size property is used to configure the size of text.
In this blog, we’ll explore how the font-size property works, the different units available for setting text size, and best practices for using it effectively in web design.
The font-size Property in CSS
The font-size property determines the height of text characters within an element. Adjusting text size is essential for creating visually appealing and readable content across different screen sizes and devices.
Syntax:
selector {
font-size: value;
}
Example: Setting a Font Size for Paragraph Text
p {
font-size: 18px;
}
<p>This text is 18 pixels in size.</p>
This will render the paragraph text with a font size of 18 pixels.
Different Units for font-size in CSS
CSS provides several units for defining text size. Choosing the right unit ensures flexibility and responsiveness in web design.
1. Absolute Units (Fixed Size)
| Unit | Description |
|---|---|
px (Pixels) | A fixed size that does not scale with screen size. |
Example: Using Pixels (px)
h1 {
font-size: 36px;
}
✅ Best for: Precise control over text size.
❌ Drawback: Not scalable for responsive designs.
2. Relative Units (Scalable & Responsive)
| Unit | Description |
|---|---|
em | Relative to the font size of the parent element. |
rem | Relative to the root (html) element’s font size. |
% | Percentage of the parent element’s font size. |
vw | Relative to the viewport width. |
vh | Relative to the viewport height. |
Example: Using em and rem
p {
font-size: 1.2em; /* 1.2 times the parent's font size */
}
h1 {
font-size: 2rem; /* 2 times the root font size */
}
✅ Best for: Responsive design, where text scales dynamically.
❌ Drawback: Requires understanding of inheritance and parent sizes.
3. Viewport-Based Units (vw, vh)
Viewport-based units scale text based on the screen size.
Example: Using vw (Viewport Width)
h1 {
font-size: 5vw; /* 5% of the viewport width */
}
✅ Best for: Making text scale with screen width.
❌ Drawback: Can become too small or too large on extreme screen sizes.
Using font-size in Responsive Web Design
A good approach to making text responsive is by using a combination of rem and media queries.
html {
font-size: 16px;
}
p {
font-size: 1rem; /* 16px */
}
/* Adjust font size for smaller screens */
@media (max-width: 600px) {
html {
font-size: 14px;
}
}
🔹 Why Use rem?
- Allows easy scaling of text by adjusting the root font size.
- Helps maintain consistency across different screen sizes.
Best Practices for Using font-size in CSS
✔ Use rem for Scalable Typography
- Keeps text sizes relative to the root and makes it easy to adjust across the entire site.
✔ Avoid Using Only Pixels (px)
- Fixed sizes can make text difficult to read on smaller or larger screens.
✔ Use Media Queries for Responsive Typography
- Adjust text size based on screen width for better user experience.
✔ Test Across Devices
- Check how text appears on different devices to ensure readability.
✔ Consider Accessibility
- Ensure text sizes are large enough for all users, including those with visual impairments.
Conclusion
The font-size property in CSS is essential for controlling text size on web pages. Using relative units like rem and em ensures scalability and responsiveness, while viewport-based units (vw, vh) can create dynamic text effects.
By following best practices, you can create an accessible and user-friendly design that works across all devices.