How do you change the size of text in CSS?

LowEasyCss

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse CSS interview questions Explore interview tracks Browse company questions

Quick Answer

You can control the size of text using the font-size property in CSS. This property defines how large or small the text content appears on a web page and supports both absolute and relative units for flexible design scaling. Font sizing impacts accessibility and layout, so test with user zoom and different root sizes.

Answer

Overview

The font-size property sets the height of text characters. It is one of the most frequently used CSS properties and affects the readability, hierarchy, and overall layout of a webpage. You can specify font size in fixed or relative units depending on your design needs.

Unit	Type	Description
px	Absolute	Fixed pixel value. Common for precise control in static layouts.
em	Relative	Scales based on the parent element’s font size.
rem	Relative	Scales based on the root element (<html>) font size.
%	Relative	Percentage relative to the parent’s font size.
vw / vh	Viewport	Scales with viewport width or height — great for responsive text.

Common font-size units and their behavior

Example: Basic Text Size

CSS

p {
  font-size: 16px;
}

h1 {
  font-size: 2em; /* twice the size of parent font */
}

h2 {
  font-size: 1.5rem; /* 1.5 times the root font size */
}

Here, em and rem units make typography more adaptive to the overall design structure.

Responsive Typography Tip
Modern CSS allows clamp() for fluid scaling:
font-size: clamp(1rem, 2vw, 2rem); — ensures text stays readable across devices.

Practical scenario
Adjust typography for a card title and body text across breakpoints.

Common pitfalls

Setting fixed px sizes that ignore user zoom.
Using em and accidentally compounding sizes.
Not testing line-height alongside font-size.

Trade-off or test tip
Rem keeps sizes consistent but less local. Test with root font-size changes and accessibility zoom.

Still so complicated?

Think of font-size as a zoom level for your text — pixels are rigid, but rem and em scale flexibly with user preferences and layouts.

Summary

Use font-size to control text height.
Prefer relative units (rem, em) for accessibility.
Use clamp() for fluid, responsive text.
Adjust font-size to maintain visual hierarchy and readability.