Which CSS Property Controls the Text Size?

Text size is a fundamental aspect of web design, directly impacting readability, accessibility, and overall user experience. In CSS (Cascading Style Sheets), the font-size property controls the size of the text in an HTML document.

In this blog, we’ll explore how the font-size property works, the different units available, and best practices for setting text sizes in a responsive and accessible manner.

The font-size Property: The Key to Text Sizing in CSS

The font-size property in CSS determines the size of text within an element. Its basic syntax is:

selector {
    font-size: value;
}

Example: Setting the Font Size for Paragraphs

p {
    font-size: 16px;
}

<p>This paragraph has a font size of 16 pixels.</p>

By default, most browsers set the base font size of body text to 16 pixels (px) unless overridden.

---

Units for Defining Font Size in CSS

CSS offers multiple units for setting text size. Each unit has its own advantages depending on the design and responsiveness needs.

1. Absolute Units (Fixed Size)

These units do not scale relative to the screen size or user settings.

Unit	Description	Example
px (pixels)	Fixed size, commonly used for precision.	font-size: 20px;
pt (points)	Used in print media, equivalent to 1/72 of an inch.	font-size: 12pt;
cm, mm, in	Rarely used, based on real-world measurements.	font-size: 1cm;

✅ Best for: Static layouts where text size consistency is required.
❌ Not ideal for: Responsive design, as it doesn’t scale with screen size.

---

2. Relative Units (Scalable & Responsive)

These units adjust based on parent elements or user preferences, making them more flexible.

Unit	Description	Example
%	Relative to the parent element’s font size.	font-size: 120%;
em	Relative to the font size of the parent element.	font-size: 1.5em;
rem	Relative to the root (html) font size.	font-size: 2rem;
vw, vh	Relative to the viewport width/height.	font-size: 5vw;

✅ Best for: Responsive designs, accessibility, and scalability.
❌ Watch out for: Nested em values, which can cause unintended scaling effects.

---

Example: Using Different Units for Font Size

body {
    font-size: 16px; /* Base font size */
}

h1 {
    font-size: 2rem; /* Twice the root font size (32px) */
}

p {
    font-size: 1.2em; /* 1.2 times the parent font size */
}

.small-text {
    font-size: 80%; /* 80% of the parent font size */
}

<h1>Main Heading</h1>
<p>This is a paragraph with 1.2em font size.</p>
<p class="small-text">This is smaller text.</p>

---

Using font-size with Responsive Design

For modern web design, it’s best to use relative units like em, rem, or viewport-based units (vw, vh) to ensure text scales properly across different screen sizes.

Example: Responsive Typography with rem and vw

html {
    font-size: 16px; /* Default root font size */
}

h1 {
    font-size: 3rem; /* 3 × 16px = 48px */
}

p {
    font-size: 1.5vw; /* Scales with the viewport width */
}

This approach ensures that text remains readable on both large screens and small mobile devices.

---

Best Practices for Setting Font Size in CSS

1. Use rem for Consistency
   • Since rem is based on the root element (html), it ensures consistent scaling across the entire website.
   • Example: font-size: 1.5rem;
2. Avoid Using px for Body Text
   • Fixed sizes can cause accessibility issues for users who need larger text.
3. Set a Responsive Base Font Size
   • Use media queries to adjust font sizes dynamically.
   • Example: @media (max-width: 768px) { body { font-size: 14px; } }
4. Ensure Readability and Accessibility
   • Follow WCAG (Web Content Accessibility Guidelines) and aim for a minimum font size of 16px for body text.
   • Use tools like the WebAIM Contrast Checker to ensure good readability.

---

Conclusion

The font-size property in CSS is the key to controlling text size on a webpage. While absolute units like px provide precision, relative units like em, rem, and vw offer better scalability for responsive design.

By following best practices, you can create an accessible and user-friendly website with optimal text readability.