CSS: Which Property Controls the Text Size?

Typography is a vital part of web design. Whether you’re designing a landing page, a blog, or a navigation bar, choosing the right text size is essential for readability, aesthetics, and responsiveness.

If you’re wondering which CSS property controls the size of text, the answer is simple:

👉 font-size

✅ The Property: font-size

The font-size property in CSS defines the size of the text inside an HTML element.

📌 Basic Syntax:

selector {
  font-size: value;
}

• value can be in various units such as px, em, rem, %, vw, etc.

✅ Example 1: Set Font Size in Pixels

p {
  font-size: 16px;
}

This sets the paragraph text to 16 pixels high, which is a common default for body text.

✅ Example 2: Use Relative Units (Responsive)

h1 {
  font-size: 2em;
}

Here, the heading size is 2 times the size of its parent element’s font size.

Other common relative units:

• em: Relative to the parent element
• rem: Relative to the root element (html)
• %: Relative to the parent element
• vw: Relative to the viewport width

Example with rem:

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* = 32px */
}

✅ Example 3: Responsive Text with calc() or clamp()

.title {
  font-size: clamp(1rem, 5vw, 3rem);
}

This ensures the font size adapts to screen size, while staying within a defined range.

🧾 Summary

🧠 Conclusion

The font-size property is the primary CSS tool for controlling text size. Whether you’re using fixed or responsive values, it allows you to fine-tune typography for clarity, accessibility, and visual impact.

Pro Tip: Use rem units for consistent scaling and better accessibility—especially when paired with a scalable root font size.