<big>

Definition and Usage

The <big> tag was used in HTML 4 to make text one font size larger than the surrounding text. It was removed from the HTML5 specification.

In older versions of HTML, the <big> tag would increase the text size relative to the default text size, similar to how <small> decreases it.

Old Usage (HTML 4)

How the <big> tag was used in HTML 4 (for reference only):

<!-- Old HTML 4 way (DEPRECATED) -->
<p>This is normal text, <big>this is bigger text</big>.</p>

Modern CSS Alternatives

Using font-size: larger

The larger keyword makes text one size larger, similar to the old <big> tag:

<style>
  .bigger {
    font-size: larger;
  }
</style>

<p>This is normal text, <span class="bigger">this is bigger text</span>.</p>

Using Relative Units (em)

Use em units for size relative to the parent element:

<style>
  .bigger {
    font-size: 1.2em;  /* 20% larger than parent */
  }

  .much-bigger {
    font-size: 1.5em;  /* 50% larger than parent */
  }
</style>

<p>Normal text, <span class="bigger">bigger text</span>,
   <span class="much-bigger">much bigger text</span>.</p>

Using Percentage

Percentages provide similar control to em units:

<style>
  .bigger {
    font-size: 120%;  /* 20% larger than parent */
  }
</style>

<p>This is normal text, <span class="bigger">this is 120% size</span>.</p>

Using Absolute Units (px)

Specify exact pixel sizes for precise control:

<style>
  .bigger {
    font-size: 18px;
  }

  .much-bigger {
    font-size: 24px;
  }
</style>

<p>Normal 16px text, <span class="bigger">18px text</span>,
   <span class="much-bigger">24px text</span>.</p>

Using rem Units (Root-Relative)

Use rem for sizes relative to the root element:

<style>
  .bigger {
    font-size: 1.125rem;  /* 18px if root is 16px */
  }

  .much-bigger {
    font-size: 1.5rem;    /* 24px if root is 16px */
  }
</style>

<p>Normal text, <span class="bigger">bigger text</span>,
   <span class="much-bigger">much bigger text</span>.</p>

Modern Responsive Approach

Use CSS custom properties and clamp() for responsive text sizing:

<style>
  :root {
    --text-base: 16px;
    --text-lg: clamp(18px, 4vw, 22px);
  }

  p {
    font-size: var(--text-base);
  }

  .bigger {
    font-size: var(--text-lg);
  }
</style>

<p>Normal text, <span class="bigger">responsive bigger text</span>.</p>

Complete Migration Example

Side-by-side comparison of old vs. new approach:

<!-- OLD WAY (Don't use) -->
<p>Regular text <big>bigger text</big> <big><big>much bigger</big></big></p>

<!-- NEW WAY (Modern CSS) -->
<style>
  .text-lg {
    font-size: 1.2em;
  }

  .text-xl {
    font-size: 1.5em;
  }

  /* Or use inline styles */
</style>

<p>Regular text <span class="text-lg">bigger text</span>
   <span class="text-xl">much bigger</span></p>

<!-- Or with inline CSS -->
<p>Regular text <span style="font-size: 1.2em;">bigger text</span>
   <span style="font-size: 1.5em;">much bigger</span></p>

Try it Yourself

CSS Font-Size Units Comparison

Best Practices for Modern Text Sizing

• Use rem for consistent sizing: Base your typography on rem units for predictable scaling
• Use em for component-specific sizing: When elements need to scale relative to their parent
• Avoid px for body text: Pixels don't respect user browser settings for font size
• Use semantic HTML: Use proper heading tags (h1-h6) instead of just making text bigger
• Consider accessibility: Ensure text can be resized by users without breaking layouts
• Use CSS custom properties: Create a consistent typography scale using variables
• Test responsiveness: Ensure text sizes work well across different screen sizes
• Use clamp() for fluid typography: Modern approach for responsive text sizing

Why Was <big> Removed?

Related Tags and Properties

• <small>

  Defines smaller text (still supported)

• <span>

  Inline container for styling

• <h1> - <h6>

  Semantic heading tags

• <strong>

  Defines important text