How to scaling font size based on size of container

CSS provides several methods for adjusting font size based on container size. Here are several primary approaches:

1. Using Viewport Units

Using viewport units such as vw, vh, vmin, and vmax, you can achieve responsive font scaling. For example, vw represents a percentage of the viewport width, and vh represents a percentage of the viewport height.

css
.container {
  font-size: 2vw; /* Font size is 2% of the viewport width */
}

A drawback is that the font size is directly tied to the viewport size rather than the container size.

2. Using Media Queries

By leveraging media queries, you can apply different style rules for various screen sizes. This enables setting distinct font sizes based on viewport width.

css
.container {
  font-size: 16px; /* Default font size */
}

@media (max-width: 600px) {
  .container {
    font-size: 14px; /* Font size reduces when viewport width is below 600px */
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .container {
    font-size: 18px; /* Font size increases when viewport width is between 601px and 1200px */
  }
}

3. Using the CSS calc() Function

The calc() function allows performing calculations to determine CSS property values. You can combine fixed sizes with viewport units for greater control over font size.

css
.container {
  font-size: calc(12px + 1vw);
}

4. Using rem Units and html's font-size

If container sizing relies on rem units, you can indirectly adjust font size within the container by modifying the font-size of the html element.

css
html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

.container {
  font-size: 1.5rem; /* 1.5 times the font size of the html element */
}

5. Using JavaScript

In scenarios requiring fine-grained control, JavaScript can listen for window size changes and dynamically adjust font size based on container dimensions.

javascript
function adjustFontSize() {
  const container = document.querySelector('.container');
  const containerWidth = container.offsetWidth;
  const fontSize = containerWidth / 100; /* Base font size assumed as 1% of container width */
  container.style.fontSize = `${fontSize}px`;
}

window.addEventListener('resize', adjustFontSize);
adjustFontSize();

JavaScript offers the most flexible solution but introduces performance overhead and may fail in environments without JavaScript.

By implementing these methods, you can adjust font size according to container size for responsive design. Each approach has specific use cases and limitations, so select the most suitable method based on your requirements.

In one of my projects, I used a combination of vw and vh units to adjust font size according to my requirements, for example:

css
font-size: calc(3vw + 3vh);

I know this doesn't directly address the OP's question, but it might serve as a solution for others.

SVG Solution:

shell
.resizeme {
  resize: both;
  margin: 0;
  padding: 0;
  height: 75px;
  width: 500px;
  background-color: lightblue;
  overflow: hidden;
}

<div class="resizeme">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 500 75"
    preserveAspectRatio="xMinYMid meet"
    style="background-color:green"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
        <text
          x="0"
          y="75"
          font-size="75"
          fill="black"
        >Resize This</text>
      </svg>
</div>

Run code snippet (Hide results)

Expand snippet

SVG and Text Wrapping Solution with foreignObject:

shell
.resizeme {
  resize: both;
  margin: 0;
  padding: 0;
  height: 200px;
  width: 500px;
  background-color: lightblue;
  overflow: hidden;
}

<div class="resizeme">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 500 200"
    preserveAspectRatio="xMinYMin meet"
  >
      <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
        <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;">
          <h1>heading</h1>
          <p>Resize the blue box.</p>
        </div>
      </foreignObject>
    </svg>
</div>

Run code snippet (Hide results)

Expand snippet