CSS Responsive Text

Master fluid typography techniques that make your text look perfect on every device

Why Responsive Text Matters

Responsive text is crucial for modern web design. It ensures your content remains readable and visually appealing across all devices, from mobile phones to large desktop monitors. With the right techniques, you can create typography that scales smoothly and maintains perfect proportions.

Key Benefits of Responsive Text:

Perfect readability on any screen size
Reduced need for media queries
Smooth scaling instead of abrupt jumps
Better user experience and accessibility
Future-proof designs
Consistent visual hierarchy

Fluid Typography with clamp()

The clamp() function is the modern solution for fluid typography. It allows you to set a minimum, preferred, and maximum value for font sizes.

/* Basic clamp syntax */
font-size: clamp(min, preferred, max);

/* Practical example */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

/* This means: */
/* - Never smaller than 2rem */
/* - Ideal size is 5% of viewport width */
/* - Never larger than 4rem */

Fluid Typography Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fluid Typography with CSS</title>
  <style>
    :root {
      --min-font-size: 16px;
      --max-font-size: 24px;
      --min-screen: 320px;
      --max-screen: 1200px;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      color: #333;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    
    h1 {
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 800;
      background: linear-gradient(135deg, #667eea, #764ba2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    
    h2 {
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      color: #2d3748;
      margin: 2rem 0 1rem 0;
    }
    
    p {
      font-size: clamp(1rem, 2.5vw, 1.2rem);
      color: #4a5568;
      margin-bottom: 1.5rem;
    }
    
    .fluid-demo {
      background: #f7fafc;
      padding: 2rem;
      border-radius: 12px;
      border-left: 4px solid #667eea;
      margin: 2rem 0;
    }
    
    .size-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      background: #2d3748;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-family: monospace;
      font-size: 0.875rem;
    }
  </style>
</head>
<body>
  <div class="size-indicator" id="sizeIndicator">Resize me!</div>
  
  <div class="container">
    <h1>Fluid Typography Mastery</h1>
    <p>This text scales smoothly between different screen sizes using CSS clamp() function.</p>
    
    <div class="fluid-demo">
      <h2>Responsive Headings</h2>
      <p>Watch how this text adapts as you resize your browser window. The font size scales fluidly between minimum and maximum values based on the viewport width.</p>
    </div>
    
    <h2>How It Works</h2>
    <p>The magic happens with <code>clamp(min, preferred, max)</code> function:</p>
    <p><code>font-size: clamp(1rem, 2.5vw, 1.2rem);</code></p>
    <p>This ensures optimal readability across all devices without needing media queries.</p>
  </div>

  <script>
    function updateSizeIndicator() {
      const indicator = document.getElementById('sizeIndicator');
      const width = window.innerWidth;
      const height = window.innerHeight;
      indicator.textContent = `${width}px × ${height}px`;
    }
    
    updateSizeIndicator();
    window.addEventListener('resize', updateSizeIndicator);
  </script>
</body>
</html>

Viewport Units for Responsive Text

Viewport units (vw,vh,vmin,vmax) allow text to scale proportionally with the viewport dimensions.

vw (Viewport Width)

1vw = 1% of viewport width. Perfect for horizontal scaling.

font-size: 4vw;

/* Scales with viewport width */

vh (Viewport Height)

1vh = 1% of viewport height. Great for vertical rhythm.

font-size: 5vh;

/* Scales with viewport height */

vmin

Uses the smaller dimension of viewport. Excellent for square layouts.

font-size: 4vmin;

/* Scales with smaller dimension */

vmax

Uses the larger dimension of viewport. Good for immersive text.

font-size: 4vmax;

/* Scales with larger dimension */

Viewport Units Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Viewport Units for Responsive Text</title>
  <style>
    :root {
      --primary-color: #4f46e5;
      --secondary-color: #7c3aed;
      --accent-color: #ec4899;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      line-height: 1.6;
      color: #1f2937;
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .hero {
      text-align: center;
      padding: 4rem 2rem;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      border-radius: 20px;
      margin-bottom: 3rem;
      box-shadow: 0 20px 40px rgba(79, 70, 229, 0.3);
    }
    
    .hero h1 {
      font-size: 6vw;
      font-weight: 800;
      margin-bottom: 1rem;
      line-height: 1.1;
    }
    
    .hero p {
      font-size: 2vw;
      opacity: 0.9;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 3rem 0;
    }
    
    .card {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      border: 1px solid #e5e7eb;
    }
    
    .card h3 {
      font-size: 3vw;
      color: var(--primary-color);
      margin-bottom: 1rem;
      font-weight: 700;
    }
    
    .card p {
      font-size: 1.5vw;
      color: #6b7280;
      line-height: 1.6;
    }
    
    .demo-section {
      background: white;
      padding: 3rem;
      border-radius: 16px;
      margin: 2rem 0;
      border-left: 4px solid var(--accent-color);
    }
    
    .vw-demo {
      font-size: 3vw;
      font-weight: 700;
      color: var(--accent-color);
      text-align: center;
      margin: 2rem 0;
    }
    
    .vh-demo {
      font-size: 5vh;
      font-weight: 700;
      color: var(--secondary-color);
      text-align: center;
      margin: 2rem 0;
    }
    
    .vmin-demo {
      font-size: 4vmin;
      font-weight: 700;
      color: var(--primary-color);
      text-align: center;
      margin: 2rem 0;
    }
    
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 10vw;
      }
      
      .hero p {
        font-size: 4vw;
      }
      
      .card h3 {
        font-size: 6vw;
      }
      
      .card p {
        font-size: 4vw;
      }
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Viewport Magic</h1>
    <p>Text that scales with your viewport using vw, vh, and vmin units</p>
  </div>
  
  <div class="grid">
    <div class="card">
      <h3>vw Units</h3>
      <p>Viewport width units scale based on the width of the viewport. Perfect for responsive headings.</p>
      <div class="vw-demo">This text uses 3vw</div>
    </div>
    
    <div class="card">
      <h3>vh Units</h3>
      <p>Viewport height units scale based on the height of the viewport. Great for vertical rhythm.</p>
      <div class="vh-demo">This text uses 5vh</div>
    </div>
    
    <div class="card">
      <h3>vmin/vmax</h3>
      <p>Scale based on the smaller/larger viewport dimension. Excellent for square layouts.</p>
      <div class="vmin-demo">This text uses 4vmin</div>
    </div>
  </div>
  
  <div class="demo-section">
    <h2 style="font-size: 4vw; color: #1f2937; margin-bottom: 2rem;">Practical Usage</h2>
    <p style="font-size: 2vw; color: #6b7280;">
      Viewport units are perfect for creating text that needs to maintain proportion relative to the screen size. 
      They work exceptionally well for hero sections, banners, and any text that should feel "immersive."
    </p>
  </div>
</body>
</html>

Modular Scale Typography

Modular scales create harmonious typography by using mathematical ratios to generate a sequence of related sizes. This ensures visual consistency and hierarchy.

/* Define modular scale with CSS variables */

:root {

--ratio: 1.25;

--base-size: 1rem;

--scale-0: calc(var(--base-size) * pow(var(--ratio), 0));

--scale-1: calc(var(--base-size) * pow(var(--ratio), 1));

--scale-2: calc(var(--base-size) * pow(var(--ratio), 2));

--scale-3: calc(var(--base-size) * pow(var(--ratio), 3));

}

/* Apply scales */

h1 { font-size: var(--scale-3); }

h2 { font-size: var(--scale-2); }

p { font-size: var(--scale-1); }

Common Ratios for Beautiful Typography:

1.067

Minor Second

1.125

Major Second

1.200

Minor Third

1.250

Major Third

1.333

Perfect Fourth

1.414

Augmented Fourth

1.500

Perfect Fifth

1.618

Golden Ratio

Modular Scale Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modular Scale Typography</title>
  <style>
    :root {
      --ratio: 1.25;
      --base-size: 1rem;
      --scale-0: calc(var(--base-size) * pow(var(--ratio), 0));
      --scale-1: calc(var(--base-size) * pow(var(--ratio), 1));
      --scale-2: calc(var(--base-size) * pow(var(--ratio), 2));
      --scale-3: calc(var(--base-size) * pow(var(--ratio), 3));
      --scale-4: calc(var(--base-size) * pow(var(--ratio), 4));
      --scale-5: calc(var(--base-size) * pow(var(--ratio), 5));
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Georgia', serif;
      line-height: 1.6;
      color: #2d3748;
      background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
      min-height: 100vh;
      padding: 3rem 2rem;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 4rem;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    
    h1 {
      font-size: var(--scale-5);
      font-weight: 700;
      color: #2d3748;
      margin-bottom: 2rem;
      line-height: 1.1;
    }
    
    h2 {
      font-size: var(--scale-3);
      font-weight: 600;
      color: #4a5568;
      margin: 2rem 0 1rem 0;
    }
    
    h3 {
      font-size: var(--scale-2);
      font-weight: 600;
      color: #718096;
      margin: 1.5rem 0 0.5rem 0;
    }
    
    p {
      font-size: var(--scale-1);
      color: #4a5568;
      margin-bottom: 1.5rem;
      line-height: 1.7;
    }
    
    .scale-display {
      background: #f7fafc;
      padding: 2rem;
      border-radius: 12px;
      margin: 2rem 0;
      border-left: 4px solid #e53e3e;
    }
    
    .scale-item {
      display: flex;
      align-items: center;
      margin: 1rem 0;
      padding: 1rem;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .scale-size {
      font-family: monospace;
      background: #e53e3e;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      margin-right: 1rem;
      min-width: 100px;
      text-align: center;
    }
    
    .scale-preview {
      font-weight: 600;
    }
    
    .ratio-controls {
      background: #edf2f7;
      padding: 1.5rem;
      border-radius: 8px;
      margin: 2rem 0;
    }
    
    .ratio-controls label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: #2d3748;
    }
    
    .ratio-controls input {
      width: 100%;
      margin-bottom: 1rem;
    }
    
    @media (max-width: 768px) {
      :root {
        --base-size: 0.9rem;
      }
      
      .container {
        padding: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Modular Scale Typography</h1>
    <p>Modular scale creates harmonious typography by using a ratio to generate a sequence of related sizes.</p>
    
    <div class="scale-display">
      <h2>Current Scale (1.25 ratio)</h2>
      <div class="scale-item">
        <div class="scale-size">Scale 5</div>
        <div class="scale-preview" style="font-size: var(--scale-5)">Heading 1 - Major Headlines</div>
      </div>
      <div class="scale-item">
        <div class="scale-size">Scale 4</div>
        <div class="scale-preview" style="font-size: var(--scale-4)">Heading 2 - Section Titles</div>
      </div>
      <div class="scale-item">
        <div class="scale-size">Scale 3</div>
        <div class="scale-preview" style="font-size: var(--scale-3)">Heading 3 - Subheadings</div>
      </div>
      <div class="scale-item">
        <div class="scale-size">Scale 2</div>
        <div class="scale-preview" style="font-size: var(--scale-2)">Heading 4 - Minor Headings</div>
      </div>
      <div class="scale-item">
        <div class="scale-size">Scale 1</div>
        <div class="scale-preview" style="font-size: var(--scale-1)">Body Text - Paragraph Content</div>
      </div>
      <div class="scale-item">
        <div class="scale-size">Scale 0</div>
        <div class="scale-preview" style="font-size: var(--scale-0)">Small Text - Captions, Metadata</div>
      </div>
    </div>
    
    <h2>How Modular Scale Works</h2>
    <p>A modular scale is a sequence of numbers that relate to one another through a rational ratio. 
       This creates visual harmony and rhythm in your typography system.</p>
    
    <h3>Common Ratios</h3>
    <p>• Minor Second: 1.067</p>
    <p>• Major Second: 1.125</p>
    <p>• Minor Third: 1.200</p>
    <p>• Major Third: 1.250</p>
    <p>• Perfect Fourth: 1.333</p>
    <p>• Augmented Fourth: 1.414</p>
    <p>• Perfect Fifth: 1.500</p>
    <p>• Golden Ratio: 1.618</p>
  </div>

  <script>
    function updateScale(ratio) {
      document.documentElement.style.setProperty('--ratio', ratio);
    }
    
    // Add ratio controls dynamically
    const ratioControls = `
      <div class="ratio-controls">
        <label for="ratioSlider">Adjust Scale Ratio: <span id="ratioValue">1.25</span></label>
        <input type="range" id="ratioSlider" min="1.067" max="1.618" step="0.001" value="1.25" 
               oninput="updateRatio(this.value)">
      </div>
    `;
    
    document.querySelector('.scale-display').insertAdjacentHTML('afterend', ratioControls);
    
    function updateRatio(value) {
      document.getElementById('ratioValue').textContent = value;
      updateScale(value);
    }
  </script>
</body>
</html>

Advanced Responsive Text Techniques

Responsive Line Height

Line height should also scale with text size for optimal readability.

h1 {

font-size: clamp(2rem, 5vw, 4rem);

line-height: clamp(1.1, 2vw, 1.2);

}

p {

font-size: clamp(1rem, 2.5vw, 1.2rem);

line-height: clamp(1.5, 3vw, 1.7);

}

Container Queries for Text

Size text based on container width instead of viewport for component-based design.

.card {

container-type: inline-size;

}

@container (min-width: 400px) {

.card h3 {

font-size: 1.5rem;

}

Fluid Spacing System

Create consistent spacing that scales with your typography.

:root {

--space-xs: clamp(0.5rem, 1vw, 0.75rem);

--space-sm: clamp(0.75rem, 1.5vw, 1rem);

--space-md: clamp(1rem, 2vw, 1.5rem);

--space-lg: clamp(1.5rem, 3vw, 2rem);

--space-xl: clamp(2rem, 4vw, 3rem);

}

.section {

padding: var(--space-xl) var(--space-md);

margin-bottom: var(--space-lg);

}

Complete Responsive Text System

Advanced Responsive Text with All Features

This example combines clamp(), viewport units, and modular scales into a complete responsive text system that works perfectly on all devices.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complete Responsive Text System</title>
  <style>
    :root {
      /* Typography Scale */
      --text-xs: clamp(0.75rem, 0.75vw, 0.875rem);
      --text-sm: clamp(0.875rem, 1vw, 1rem);
      --text-base: clamp(1rem, 1.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1.5vw, 1.25rem);
      --text-xl: clamp(1.25rem, 2vw, 1.5rem);
      --text-2xl: clamp(1.5rem, 3vw, 2rem);
      --text-3xl: clamp(2rem, 4vw, 2.5rem);
      --text-4xl: clamp(2.5rem, 5vw, 3rem);
      --text-5xl: clamp(3rem, 6vw, 4rem);
      
      /* Colors */
      --primary: #3b82f6;
      --secondary: #8b5cf6;
      --accent: #ec4899;
      --dark: #1f2937;
      --light: #f8fafc;
      --gray: #6b7280;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      color: var(--dark);
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      min-height: 100vh;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    /* Header */
    .header {
      text-align: center;
      padding: 4rem 2rem;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      border-radius: 20px;
      margin-bottom: 3rem;
      box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
    }
    
    .header h1 {
      font-size: var(--text-5xl);
      font-weight: 800;
      margin-bottom: 1rem;
      line-height: 1.1;
    }
    
    .header p {
      font-size: var(--text-xl);
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
    }
    
    /* Grid System */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin: 3rem 0;
    }
    
    .card {
      background: white;
      padding: 2.5rem;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      border: 1px solid #e5e7eb;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .card h2 {
      font-size: var(--text-2xl);
      color: var(--primary);
      margin-bottom: 1rem;
      font-weight: 700;
    }
    
    .card p {
      font-size: var(--text-base);
      color: var(--gray);
      line-height: 1.7;
    }
    
    /* Demo Sections */
    .demo-section {
      background: white;
      padding: 3rem;
      border-radius: 16px;
      margin: 2rem 0;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    
    .demo-section h2 {
      font-size: var(--text-3xl);
      color: var(--dark);
      margin-bottom: 2rem;
      text-align: center;
    }
    
    .typography-scale {
      display: grid;
      gap: 1.5rem;
      margin: 2rem 0;
    }
    
    .scale-level {
      padding: 1.5rem;
      background: var(--light);
      border-radius: 8px;
      border-left: 4px solid var(--primary);
    }
    
    .scale-level h3 {
      font-size: var(--text-lg);
      color: var(--dark);
      margin-bottom: 0.5rem;
      font-weight: 600;
    }
    
    .scale-level p {
      font-size: var(--text-sm);
      color: var(--gray);
      margin: 0;
    }
    
    /* Fluid Text Demo */
    .fluid-demo {
      text-align: center;
      padding: 2rem;
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
      border-radius: 12px;
      margin: 2rem 0;
    }
    
    .fluid-large {
      font-size: var(--text-4xl);
      font-weight: 700;
      color: var(--primary);
      margin: 1rem 0;
    }
    
    .fluid-medium {
      font-size: var(--text-xl);
      color: var(--gray);
      margin: 1rem 0;
    }
    
    .fluid-small {
      font-size: var(--text-sm);
      color: var(--gray);
      margin: 1rem 0;
    }
    
    /* Breakpoint Indicator */
    .breakpoint-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--dark);
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-family: monospace;
      font-size: var(--text-sm);
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .container {
        padding: 1rem;
      }
      
      .header {
        padding: 3rem 1.5rem;
      }
      
      .card {
        padding: 2rem;
      }
      
      .demo-section {
        padding: 2rem;
      }
    }
    
    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: var(--text-4xl);
      }
    }
  </style>
</head>
<body>
  <div class="breakpoint-indicator" id="breakpoint">Resize to see magic!</div>
  
  <div class="container">
    <header class="header">
      <h1>Responsive Text System</h1>
      <p>Fluid typography that adapts beautifully to every screen size</p>
    </header>
    
    <div class="grid">
      <div class="card">
        <h2>Clamp Function</h2>
        <p>Using CSS clamp() for fluid typography that scales between minimum and maximum values based on viewport width.</p>
        <div class="fluid-demo">
          <div class="fluid-large">Clamp Magic</div>
          <div class="fluid-medium">Smooth scaling</div>
          <div class="fluid-small">No media queries needed</div>
        </div>
      </div>
      
      <div class="card">
        <h2>Viewport Units</h2>
        <p>Leveraging vw, vh, vmin, and vmax units for text that scales proportionally with the viewport dimensions.</p>
        <div class="fluid-demo">
          <div style="font-size: 4vw; font-weight: 700; color: var(--secondary);">4vw Scale</div>
          <div style="font-size: 2vw; color: var(--gray);">Viewport relative</div>
        </div>
      </div>
      
      <div class="card">
        <h2>Modular Scale</h2>
        <p>Harmonious typography using mathematical ratios to create a consistent scale across all text elements.</p>
        <div class="fluid-demo">
          <div style="font-size: var(--text-3xl); font-weight: 700; color: var(--accent);">Scale 3xl</div>
          <div style="font-size: var(--text-base); color: var(--gray);">Consistent ratios</div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Complete Typography Scale</h2>
      <div class="typography-scale">
        <div class="scale-level">
          <h3 style="font-size: var(--text-5xl);">Heading 1 (5xl)</h3>
          <p>font-size: var(--text-5xl); /* clamp(3rem, 6vw, 4rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-4xl);">Heading 2 (4xl)</h3>
          <p>font-size: var(--text-4xl); /* clamp(2.5rem, 5vw, 3rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-3xl);">Heading 3 (3xl)</h3>
          <p>font-size: var(--text-3xl); /* clamp(2rem, 4vw, 2.5rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-2xl);">Heading 4 (2xl)</h3>
          <p>font-size: var(--text-2xl); /* clamp(1.5rem, 3vw, 2rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-xl);">Subheading (xl)</h3>
          <p>font-size: var(--text-xl); /* clamp(1.25rem, 2vw, 1.5rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-lg);">Large Body (lg)</h3>
          <p>font-size: var(--text-lg); /* clamp(1.125rem, 1.5vw, 1.25rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-base);">Body Text (base)</h3>
          <p>font-size: var(--text-base); /* clamp(1rem, 1.25vw, 1.125rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-sm);">Small Text (sm)</h3>
          <p>font-size: var(--text-sm); /* clamp(0.875rem, 1vw, 1rem) */</p>
        </div>
        
        <div class="scale-level">
          <h3 style="font-size: var(--text-xs);">Extra Small (xs)</h3>
          <p>font-size: var(--text-xs); /* clamp(0.75rem, 0.75vw, 0.875rem) */</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    function updateBreakpointIndicator() {
      const width = window.innerWidth;
      const indicator = document.getElementById('breakpoint');
      
      if (width >= 1200) {
        indicator.textContent = "Desktop (≥1200px)";
        indicator.style.background = "#10b981";
      } else if (width >= 1024) {
        indicator.textContent = "Large Tablet (≥1024px)";
        indicator.style.background = "#3b82f6";
      } else if (width >= 768) {
        indicator.textContent = "Tablet (≥768px)";
        indicator.style.background = "#8b5cf6";
      } else if (width >= 480) {
        indicator.textContent = "Mobile (≥480px)";
        indicator.style.background = "#ec4899";
      } else {
        indicator.textContent = "Small Mobile (<480px)";
        indicator.style.background = "#ef4444";
      }
    }
    
    updateBreakpointIndicator();
    window.addEventListener('resize', updateBreakpointIndicator);
  </script>
</body>
</html>

Best Practices for Responsive Text

✅ Do

Use clamp() for most text elements
Establish a modular scale for consistency
Test on real devices and screen sizes
Consider accessibility and readability
Use relative units (em, rem) for flexibility
Scale line-height with font-size
Implement a fluid spacing system

❌ Don't

Use fixed pixel sizes for body text
Forget about mobile readability
Create text that's too small on mobile
Ignore line-length constraints
Use vw units without minimum sizes
Forget to test with zoomed text
Overcomplicate with too many breakpoints

Master Responsive Text Today!

Experiment with our comprehensive responsive text examples that showcase fluid typography, viewport units, and modular scales. See how your text adapts in real-time as you resize the browser!

< Previous Next >