Which CSS Property Controls the Text Size?

Typography is a core part of web design, and one of the most important aspects of typography is text size. Whether you’re designing a headline, a paragraph, or a call-to-action button, controlling how large or small the text appears is essential. In CSS, the property that controls the size of text is:

font-size

Table of Contents

The CSS Property: `font-size`

The font-size property sets the size of the text for an HTML element. It can be applied to any element that contains text — like headings, paragraphs, buttons, or links.

Syntax:

selector {
  font-size: value;
}

selector: The HTML element you want to style (e.g., p, h1, .button).
value: The desired font size (using units like px, em, rem, %, etc.).

Example:

<p class="intro">Welcome to my blog!</p>

.intro {
  font-size: 18px;
}

This sets the font size of the paragraph text to 18 pixels.

Common Units for `font-size`

px – Pixels (absolute size)
em – Relative to the element’s parent font size
rem – Relative to the root (html) font size
% – Relative to the parent element
vw, vh – Relative to the viewport size (useful for responsive typography)

Example with `rem`:

body {
  font-size: 1rem; /* Usually equals 16px by default */
}

h1 {
  font-size: 2.5rem; /* 2.5 × 16px = 40px */
}

Responsive Font Sizing (Advanced Tip)

You can combine media queries or use modern techniques like clamp() for responsive text sizing:

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

This makes the font size scale based on screen width — a great option for mobile-friendly design.

Summary

To control the size of text in CSS, use the font-size property:

element {
  font-size: value;
}

This property is fundamental to creating accessible, attractive, and readable web interfaces.

The CSS Property: font-size