0
0
CSSmarkup~5 mins

Responsive typography in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Responsive typography makes text easy to read on any screen size. It adjusts the size of text so it looks good on phones, tablets, and computers.

When you want your website text to be readable on small phones and large desktop screens.
When you want to improve user experience by avoiding text that is too small or too big.
When designing a website that works well on different devices without separate stylesheets.
When you want to keep your design consistent and flexible across screen sizes.
Syntax
CSS
html {
  font-size: clamp(minimum, preferred, maximum);
}

/* or using media queries */
@media (max-width: 600px) {
  html {
    font-size: smaller-size;
  }
}

@media (min-width: 601px) {
  html {
    font-size: larger-size;
  }
}

The clamp() function sets a font size that grows between a minimum and maximum value based on the screen width.

Media queries let you set different font sizes for different screen widths manually.

Examples
This sets the font size to never be smaller than 1rem, grow with 2% of the viewport width, but not exceed 1.5rem.
CSS
html {
  font-size: clamp(1rem, 2vw, 1.5rem);
}
This uses media queries to set font size smaller on narrow screens and larger on wide screens.
CSS
@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 601px) {
  html {
    font-size: 18px;
  }
}
Here, the body text is normal size on small screens and bigger on tablets and up.
CSS
body {
  font-size: 1rem;
}

@media (min-width: 768px) {
  body {
    font-size: 1.25rem;
  }
}
Sample Program

This example uses clamp() to make the base font size adjust between 1rem and 1.5rem depending on the screen width. The heading and paragraphs scale accordingly.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Typography Example</title>
  <style>
    html {
      font-size: clamp(1rem, 2vw, 1.5rem);
      font-family: Arial, sans-serif;
      line-height: 1.5;
      padding: 1rem;
    }
    h1 {
      font-size: 2em;
      margin-bottom: 0.5em;
    }
    p {
      margin-bottom: 1em;
    }
  </style>
</head>
<body>
  <h1>Responsive Typography</h1>
  <p>This text will resize smoothly between small and large screens.</p>
  <p>Try resizing your browser window to see the font size change.</p>
</body>
</html>
OutputSuccess
Important Notes

Time complexity: Not applicable for CSS, but responsive typography improves user experience efficiently.

Common mistake: Using fixed font sizes like pixels only, which do not adapt to different screen sizes.

Tip: Use relative units like rem and functions like clamp() for smooth scaling.

Summary

Responsive typography adjusts text size for different screen sizes automatically.

Use clamp() or media queries to set flexible font sizes.

This improves readability and user experience on all devices.