CssHow-ToBeginner · 4 min read

How to Make Text Responsive in CSS: Simple Techniques

To make text responsive in CSS, use flexible units like rem, em, or viewport units such as vw. You can also use clamp() to set a scalable font size that adjusts between a minimum and maximum value based on the viewport width.

📐

Syntax

Here are common ways to set responsive font sizes in CSS:

rem and em: Relative units based on root or parent font size.
vw: Viewport width unit, 1vw equals 1% of the viewport width.
clamp(min, preferred, max): Sets font size that scales between a minimum and maximum value.

css

/* Using rem unit */
font-size: 1.5rem;

/* Using viewport width unit */
font-size: 5vw;

/* Using clamp for responsive scaling */
font-size: clamp(1rem, 2.5vw, 2rem);

💻

Example

This example shows text that grows and shrinks smoothly between 16px and 32px depending on the browser width using clamp(). It uses rem for base sizing and vw for scaling.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Text Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 2rem;
  }
  h1 {
    font-size: clamp(1rem, 5vw, 2rem);
    color: #2c3e50;
  }
  p {
    font-size: clamp(0.875rem, 2.5vw, 1.5rem);
    color: #34495e;
  }
</style>
</head>
<body>
  <h1>Responsive Heading</h1>
  <p>This paragraph text resizes smoothly as you change the browser width.</p>
</body>
</html>

Output

A webpage with a heading and paragraph text that changes size smoothly when resizing the browser window, heading text between 16px and 32px, paragraph text between 14px and 24px.

⚠️

Common Pitfalls

Common mistakes when making text responsive include:

Using fixed px units only, which do not scale on different screen sizes.
Using viewport units like vw without limits, causing text to become too small or too large on extreme screen sizes.
Not setting a base font size on the html element, which affects rem calculations.

Always combine flexible units with limits using clamp() or media queries for best results.

css

/* Wrong: fixed size, no scaling */
h1 {
  font-size: 24px;
}

/* Wrong: viewport unit without limits, can be too small or large */
h1 {
  font-size: 10vw;
}

/* Right: clamp limits scaling between 16px and 32px */
h1 {
  font-size: clamp(1rem, 5vw, 2rem);
}

📊

Quick Reference

Tips for responsive text sizing:

Use rem for consistent scaling based on root font size.
Use vw for scaling relative to viewport width.
Use clamp() to set minimum, preferred, and maximum font sizes.
Set a base font size on html (e.g., html { font-size: 16px; }).
Test on different screen sizes and devices.

✅

Key Takeaways

Use flexible units like rem, em, and vw to make text scale with screen size.

Clamp font sizes with clamp() to keep text readable on all devices.

Avoid fixed pixel sizes that do not adapt to different screens.

Set a base font size on the html element for consistent scaling.

Test responsive text by resizing the browser or using device simulators.