Which CSS Property Controls the Text Size?

Text plays a crucial role in web design — from headings to body content and buttons. Ensuring that your text is readable and well-sized across devices is key to good user experience.

In CSS, the font-size property is used to control the size of the text.

In this blog, you’ll learn what the font-size property does, how to use it effectively, and explore different units for responsive and scalable design.

Table of Contents

🎯 The CSS Property: `font-size`

The font-size property in CSS is used to define the size of the text in an HTML element.

✅ Basic Syntax:

selector {
  font-size: value;
}

selector: The HTML element (e.g., p, h1, .title)
value: The size of the text, using a valid CSS unit like px, em, rem, %, or newer methods like clamp().

📐 Common Units for `font-size`

Unit	Description	Example
`px`	Pixels (absolute size)	`font-size: 16px;`
`em`	Relative to parent font size	`font-size: 1.5em;`
`rem`	Relative to root (`html`) font size	`font-size: 1rem;`
`%`	Percentage of parent size	`font-size: 120%;`
`vw`	Relative to viewport width	`font-size: 5vw;`
`clamp()`	Responsive between min and max	`font-size: clamp(1rem, 2vw, 2rem);`

🧾 Example: Setting Font Size

HTML:

<p class="text-large">This is large text.</p>

CSS:

.text-large {
  font-size: 24px;
}

This sets the text size of the paragraph to 24 pixels.

🧠 Responsive Text with `clamp()`

The clamp() function lets you define flexible font sizes that scale with screen size.

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

This means the heading will:

Never be smaller than 1.5rem
Scale based on 5vw (5% of the viewport width)
Never exceed 3rem

🔧 Inheritance Behavior

The font-size property is inherited by child elements unless otherwise specified.

body {
  font-size: 16px;
}

.container {
  font-size: 1.2em; /* 1.2 * 16px = 19.2px */
}

💡 Best Practices

Use rem or em units for scalable, accessible design.
Avoid hardcoding all font sizes in px for responsive layouts.
Use media queries or clamp() for better control across devices.

📌 Conclusion

The CSS property that controls the text size is:

font-size

Whether you’re building a mobile-friendly site or a desktop-first interface, understanding how font-size works is essential to writing clean, responsive, and accessible CSS.

🎯 The CSS Property: font-size