[css] Font scaling based on width of container

I'm having a hard time getting my head around font scaling.

I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels.

I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16 pixels whether the window is resized down to a mobile width or full-blown widescreen desktop.

How can I make the text on my site scale in relation to its container? I tried using em, but this doesn't scale either.

My reasoning is that things like my menu become squished when you resize, so I need to reduce the px font-size of .menuItem among other elements in relation to the width of the container. (For example, in the menu on a large desktop, 22px works perfectly. Move down to tablet width and 16px is more appropriate.)

I'm aware I can add breakpoints, but I really want the text to scale as well as having extra breakpoints, otherwise, I'll end up with hundreds of breakpoints for every 100pixels decrease in width to control the text.

This question is related to css responsive-design font-size

The answer is


My own solution, jQuery-based, works by gradually increasing the font size until the container gets a big increase in height (meaning it got a line break).

It's pretty simple, but works fairly well, and it is very easy to use. You don't have to know anything about the font being used, everything is taken care of by the browser.

You can play with it on http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

The magic happens here:

var setMaxTextSize=function(jElement) {
    // Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData, fontSize);

    // Gradually increase font size until the element gets a big increase in height (i.e. line break)
    var i = 0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size", "" + (++fontSize) + "px");
    }
    while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)

    // Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize -= 1;
    jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");

    return fontSize;
};

This worked for me:

I try to approximate font-size based on a width/height got from setting `font-size: 10px`. Basically, the idea is "if I have 20 pixels width and 11 pixels height with `font-size: 10px`, so what would it be the maximum font-size to math a container of 50 pixels width and 30 pixels height?"

The answer is a double proportion system:

{ 20:10=50:X, 11:10=30:Y } = { X= (10*50)/20, Y= (10*30)/11 }

Now X is a font-size that will match width, and Y is a font-size that will match height; take the smallest value

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)
        parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)
        parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)
        el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)
        el_w = 0;

    // 0.5 is the error on the measure that JavaScript does
    // if the real measure had been 12.49 px => JavaScript would have said 12px
    // so we think about the worst case when could have, we add 0.5 to 
    // compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

NB: the argument of the function must be a span element or an element which is smaller than its parent, otherwise if children and parent have both the same width/height function will fail.


But what if the container is not the viewport (body)?

The real answer is in the transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

https://css-tricks.com/almanac/properties/t/transform/


Using vw, em & co. works for sure, but IMO it always needs a human's touch for fine-tuning.

Here's a script I just wrote based on @tnt-rox' answer that tries to automatize that human's touch:

_x000D_
_x000D_
$('#controller').click(function(){_x000D_
    $('h2').each(function(){_x000D_
        var_x000D_
            $el = $(this),_x000D_
            max = $el.get(0),_x000D_
            el = null_x000D_
        ;_x000D_
        max =_x000D_
            max_x000D_
            ? max.offsetWidth_x000D_
            : 320_x000D_
        ;_x000D_
        $el.css({_x000D_
            'font-size': '1em',_x000D_
            'display': 'inline',_x000D_
        });_x000D_
        el = $el.get(0);_x000D_
_x000D_
        el.get_float = function(){_x000D_
            var_x000D_
                fs = 0_x000D_
            ;_x000D_
            if (this.style && this.style.fontSize) {_x000D_
                fs = parseFloat(this.style.fontSize.replace(/([\d\.]+)em/g, '$1'));_x000D_
            }_x000D_
            return fs;_x000D_
        };_x000D_
_x000D_
        el.bigger = function(){_x000D_
            this.style.fontSize = (this.get_float() + 0.1) + 'em';_x000D_
        };_x000D_
_x000D_
        while (el.offsetWidth < max) {_x000D_
            el.bigger();_x000D_
        }_x000D_
_x000D_
        // Finishing touch._x000D_
        $el.css({_x000D_
            'font-size': ((el.get_float() -0.1) +'em'),_x000D_
            'line-height': 'normal',_x000D_
            'display': '',_x000D_
        });_x000D_
    });  // end of (each)_x000D_
});    // end of (font scaling test)
_x000D_
div {_x000D_
  width: 50%;_x000D_
  background-color: tomato;_x000D_
  font-family: 'Arial';_x000D_
}_x000D_
_x000D_
h2 {_x000D_
  white-space: nowrap;_x000D_
}_x000D_
_x000D_
h2:nth-child(2) {_x000D_
  font-style: italic;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<input type="button" id="controller" value="Apply" />_x000D_
<div>_x000D_
  <h2>Lorem ipsum dolor</h2>_x000D_
  <h2>Test String</h2>_x000D_
  <h2>Sweet Concatenation</h2>_x000D_
  <h2>Font Scaling</h2>_x000D_
</div>
_x000D_
_x000D_
_x000D_

It basically reduces the font-size to 1em and then starts incrementing by 0.1 until it reaches maximum width.

JSFiddle


This web component changes the font size so the inner text width matches the container width. Check the demo.

You can use it like this:

<full-width-text>Lorem Ipsum</full-width-text>

Use CSS Variables

No one has mentioned CSS variables yet, and this approach worked best for me, so:

Let's say you've got a column on your page that is 100% of the width of a mobile user's screen, but has a max-width of 800px, so on desktop there's some space on either side of the column. Put this at the top of your page:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

And now you can use that variable (instead of the built-in vw unit) to set the size of your font. E.g.

p {
  font-size: calc( var(--column-width) / 100 );
}

It's not a pure CSS approach, but it's pretty close.


Take look at my code. It makes the font size smaller to fit whatever there.

But I think this doesn't lead to a good user experience

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    // Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
    $(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

Result


But what if the container is not the viewport (body)?

This question is asked in a comment by Alex under the accepted answer.

That fact does not mean vw cannot be used to some extent to size for that container. Now to see any variation at all one has to be assuming that the container in some way is flexible in size. Whether through a direct percentage width or through being 100% minus margins. The point becomes "moot" if the container is always set to, let's say, 200px wide--then just set a font-size that works for that width.

Example 1

With a flexible width container, however, it must be realized that in some way the container is still being sized off the viewport. As such, it is a matter of adjusting a vw setting based off that percentage size difference to the viewport, which means taking into account the sizing of parent wrappers. Take this example:

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

Assuming here the div is a child of the body, it is 50% of that 100% width, which is the viewport size in this basic case. Basically, you want to set a vw that is going to look good to you. As you can see in my comment in the above CSS content, you can "think" through that mathematically with respect to the full viewport size, but you don't need to do that. The text is going to "flex" with the container because the container is flexing with the viewport resizing. UPDATE: here's an example of two differently sized containers.

Example 2

You can help ensure viewport sizing by forcing the calculation based off that. Consider this example:

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

The sizing is still based off viewport, but is in essence set up based off the container size itself.

Should Size of the Container Change Dynamically...

If the sizing of the container element ended up changing dynamically its percentage relationship either via @media breakpoints or via JavaScript, then whatever the base "target" was would need recalculation to maintain the same "relationship" for text sizing.

Take example #1 above. If the div was switched to 25% width by either @media or JavaScript, then at the same time, the font-size would need to adjust in either the media query or by JavaScript to the new calculation of 5vw * .25 = 1.25. This would put the text size at the same size it would have been had the "width" of the original 50% container been reduced by half from viewport sizing, but has now been reduced due to a change in its own percentage calculation.

A Challenge

With the CSS3 calc() function in use, it would become difficult to adjust dynamically, as that function does not work for font-size purposes at this time. So you could not do a pure CSS 3 adjustment if your width is changing on calc(). Of course, a minor adjustment of width for margins may not be enough to warrant any change in font-size, so it may not matter.


Always have your element with this attribute:

JavaScript: element.style.fontSize = "100%";

or

CSS: style = "font-size: 100%;"

When you go fullscreen, you should already have a scale variable calculated (scale > 1 or scale = 1). Then, on fullscreen:

document.body.style.fontSize = (scale * 100) + "%";

It works nicely with little code.


There is a big philosophy for this issue.

The easiest thing to do would be to give a certain font-size to body (I recommend 10), and then all the other element would have their font in em or rem. I'll give you an example to understand those units. Em is always relative to its parent:

body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels  = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */

Rem is always relative to body:

body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */

And then you could create a script that would modify font-size relative to your container width. But this isn't what I would recommend. Because in a 900 pixels width container for example you would have a p element with a 12 pixels font-size let's say. And on your idea that would become an 300 pixels wide container at 4 pixels font-size. There has to be a lower limit.

Other solutions would be with media queries, so that you could set font for different widths.

But the solutions that I would recommend is to use a JavaScript library that helps you with that. And fittext.js that I found so far.


I was very frustrated trying to achieve a fitty-like tight text wrapping so I ended up using a canvas-based method which I arrived at by unsuccessfully trying other methods. What I was aiming for looks like the attached which turns out to be surprisingly difficult (for me). Hopefully one day we will have a simple CSS-only way of doing this. Downsides of this approach is the text is treated more like an image, but for some use cases this is fine.

https://codesandbox.io/s/create-a-canvas-tightly-holding-a-word-st2h1?file=/index.html

This image is a screenshot of a CSS Grid layout of four full-bleed canvases.

enter image description here


I don't see any answer with reference to CSS flex property, but it can be very useful too.


Try http://simplefocus.com/flowtype/. This is what I use for my sites, and it has worked perfectly.


I've prepared a simple scale function using CSS transform instead of font-size. You can use it inside of any container, you don't have to set media queries, etc. :)

Blog post: Full width CSS & JS scalable header

The code:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

Working demo: https://codepen.io/maciejkorsan/pen/BWLryj


Pure-CSS solution with calc(), CSS units and math

This is precisely not what OP asks, but may make someone's day. This answer is not spoon-feedingly easy and needs some researching on the developer end.

I came finally to get a pure-CSS solution for this using calc() with different units. You will need some basic mathematical understanding of formulas to work out your expression for calc().

When I worked this out, I had to get a full-page-width responsive header with some padding few parents up in DOM. I'll use my values here, replace them with your own.

To mathematics

You will need:

  • Nicely adjusted ratio in some viewport. I used 320 pixels, thus I got 24 pixels high and 224 pixels wide, so the ratio is 9.333... or 28 / 3
  • The container width, I had padding: 3em and full width so this got to 100wv - 2 * 3em

X is the width of container, so replace it with your own expression or adjust the value to get full-page text. R is the ratio you will have. You can get it by adjusting the values in some viewport, inspecting element width and height and replacing them with your own values. Also, it is width / heigth ;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

And bang! It worked! I wrote

font-size: calc((75vw - 4.5rem) / 7)

to my header and it adjusted nicely in every viewport.

But how does it work?

We need some constants up here. 100vw means the full width of viewport, and my goal was to establish full-width header with some padding.

The ratio. Getting a width and height in one viewport got me a ratio to play with, and with ratio I know what the height should be in other viewport width. Calculating them with hand would take plenty of time and at least take lots of bandwidth, so it's not a good answer.

Conclusion

I wonder why no-one has figured this out and some people are even telling that this would be impossible to tinker with CSS. I don't like to use JavaScript in adjusting elements, so I don't accept JavaScript (and forget about jQuery) answers without digging more. All in all, it's good that this got figured out and this is one step to pure-CSS implementations in website design.

I apologize of any unusual convention in my text, I'm not native speaker in English and am also quite new to writing Stack Overflow answers.

It should also be noted that we have evil scrollbars in some browsers. For example, when using Firefox I noticed that 100vw means the full width of viewport, extending under scrollbar (where content cannot expand!), so the fullwidth text has to be margined carefully and preferably get tested with many browsers and devices.


Try to use the fitText plugin, because Viewport sizes isn't the solution of this problem.

Just add the library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

And change font-size for correct by settings the coefficient of text:

$("#text_div").fitText(0.8);

You can set maximum and minimum values of text:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

Solution with SVG:

_x000D_
_x000D_
.resizeme {_x000D_
  resize: both;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  height: 75px;_x000D_
  width: 500px;_x000D_
  background-color: lightblue;_x000D_
  overflow: hidden;_x000D_
}
_x000D_
<div class="resizeme">_x000D_
  <svg_x000D_
    width="100%"_x000D_
    height="100%"_x000D_
    viewBox="0 0 500 75"_x000D_
    preserveAspectRatio="xMinYMid meet"_x000D_
    style="background-color:green"_x000D_
    xmlns="http://www.w3.org/2000/svg"_x000D_
    xmlns:xlink="http://www.w3.org/1999/xlink"_x000D_
  >_x000D_
        <text_x000D_
          x="0"_x000D_
          y="75"_x000D_
          font-size="75"_x000D_
          fill="black"_x000D_
        >¦Resize This¦</text>_x000D_
      </svg>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Solution with SVG and text-wrapping using foreignObject:

_x000D_
_x000D_
.resizeme {_x000D_
  resize: both;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  height: 200px;_x000D_
  width: 500px;_x000D_
  background-color: lightblue;_x000D_
  overflow: hidden;_x000D_
}
_x000D_
<div class="resizeme">_x000D_
  <svg_x000D_
    width="100%"_x000D_
    height="100%"_x000D_
    viewBox="0 0 500 200"_x000D_
    preserveAspectRatio="xMinYMin meet"_x000D_
  >_x000D_
      <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">_x000D_
        <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;">_x000D_
          <h1>heading</h1>_x000D_
          <p>Resize the blue box.</p>_x000D_
        </div>_x000D_
      </foreignObject>_x000D_
    </svg>_x000D_
</div>
_x000D_
_x000D_
_x000D_


Here is the function:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

Then convert all your documents child element font sizes to em's or %.

Then add something like this to your code to set the base font size.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/


My problem was similar, but related to scaling text within a heading. I tried Fit Font, but I needed to toggle the compressor to get any results, since it was solving a slightly different problem, as was Text Flow.

So I wrote my own little plugin that reduced the font size to fit the container, assuming you have overflow: hidden and white-space: nowrap so that even if reducing the font to the minimum doesn't allow showing the full heading, it just cuts off what it can show.

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });
  };
})(jQuery);

You may be you looking for something like this:

http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/

I have used flowtype, and it's working great (however it's JavaScript and not a pure CSS solution):

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});

Inside your CSS, try adding this at the bottom changing the 320 pixels width for wherever your design starts breaking:

    @media only screen and (max-width: 320px) {

        body { font-size: 1em; }

    }

Then give the font-size in "px" or "em" as you wish.


As a JavaScript fallback (or your sole solution), you can use my jQuery Scalem plugin, which lets you scale relative to the parent element (container) by passing the reference option.


In case it's helpful to anyone, most of the solutions in this thread were wrapping text into multiple lines, form e.

But then I found this, and it worked:

https://github.com/chunksnbits/jquery-quickfit

Example usage:

$('.someText').quickfit({max:50,tolerance:.4})


Straight up media queries seems like a much simpler and more understandable solution to resizing font based on container sizes that may be dynamic.

The below resizes the font to the size of the container, whether the container is scaled to the size of the viewport, or if it's reached its max value. If you have non-100% wide containers, you could adjust the vw accordingly.

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

There is a way to do this without JavaScript!

You can use an inline SVG image. You can use CSS on an SVG if it is inline. You have to remember that using this method means your SVG image will respond to its container size.

Try using the following solution...

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>
  </svg>
</div>

CSS

div {
  width: 50%; /* Set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;
}

Example: https://jsfiddle.net/k8L4xLLa/32/

Want something more flashy?

SVG images also allow you to do cool stuff with shapes and junk. Check out this great use case for scalable text...

https://jsfiddle.net/k8L4xLLa/14/


This may not be super practical, but if you want a font to be a direct function of the parent, without having any JavaScript that listens/loops (interval) to read the size of the div/page, there is a way to do it. Iframes.

Anything within the iframe will consider the size of the iframe as the size of the viewport. So the trick is to just make an iframe whose width is the maximum width you want your text to be, and whose height is equal to the maximum height * the particular text's aspect ratio.

Setting aside the limitation that viewport units can't also come along side parent units for text (as in, having the % size behave like everyone else), viewport units do provide a very powerful tool: being able to get the minimum/maximum dimension. You can't do that anywhere else - you can't say...make the height of this div be the width of the parent * something.

That being said, the trick is to use vmin, and to set the iframe size so that [fraction] * total height is a good font size when the height is the limiting dimension, and [fraction] * total width when the width is the limiting dimension. This is why the height has to be a product of the width and the aspect ratio.

For my particular example, you have

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0, 0, 0, 0);
  border-style: none;
  transform: translate3d(-50%, -50%, 0);
}

The small annoyance with this method is that you have to manually set the CSS of the iframe. If you attach the whole CSS file, that would take up a lot of bandwidth for many text areas. So, what I do is attach the rule that I want directly from my CSS.

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

You can write small function that gets the CSS rule / all CSS rules that would affect the text area.

I cannot think of another way to do it without having some cycling/listening JavaScript. The real solution would be for browsers to provide a way to scale text as a function of the parent container and to also provide the same vmin/vmax type functionality.

JSFiddle: https://jsfiddle.net/0jr7rrgm/3/ (click once to lock the red square to the mouse, and click again to release)

Most of the JavaScript in the fiddle is just my custom click-drag function.


HTML

<div style="height:100px; width:200px;">
  <div id='qwe'>
    test
  </div>
</div>

JavaScript code for maximizing font-size:

var fontSize, maxHeight, maxWidth, textElement, parentElement;
textElement = document.getElementById('qwe');
parentElement = textElement.parentElement;    
maxHeight = parentElement.clientHeight;
maxWidth = parentElement.clientWidth;
fontSize = maxHeight;
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
  textElement.style.fontSize = `${fontSize}px`;
  if (textElement.offsetHeight < maxHeight && textElement.offsetWidth <= maxWidth) {
    minFS = fontSize;
  } else{
    maxFS = fontSize;
  }
  fontSize = Math.floor((minFS + maxFS)/2);
}
textElement.style.fontSize = `${minFS}px`;

Artistically, if you need to fit two or more lines of text within the same width regardless of their character count then you have nice options.

It's best to find a dynamical solution so whatever text is entered we end up with a nice display.

Let's see how we may approach.

_x000D_
_x000D_
var els     = document.querySelectorAll(".divtext"),_x000D_
refWidth    = els[0].clientWidth,_x000D_
refFontSize = parseFloat(window.getComputedStyle(els[0],null)_x000D_
                               .getPropertyValue("font-size"));_x000D_
_x000D_
els.forEach((el,i) => el.style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px")
_x000D_
#container {_x000D_
  display: inline-block;_x000D_
  background-color: black;_x000D_
  padding: 0.6vw 1.2vw;_x000D_
}_x000D_
.divtext {_x000D_
  display: table;_x000D_
  color: white;_x000D_
  font-family: impact;_x000D_
  font-size: 4.5vw;_x000D_
}
_x000D_
<div id="container">_x000D_
  <div class="divtext">THIS IS JUST AN</div>_x000D_
  <div class="divtext">EXAMPLE</div>_x000D_
  <div class="divtext">TO SHOW YOU WHAT</div>_x000D_
  <div class="divtext">YOU WANT</div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

All we do is to get the width (els[0].clientWidth) and the font size (parseFloat(window.getComputedStyle(els[0],null).getPropertyValue("font-size"))) of the first line as a reference and then just calculate the subsequent lines font size accordingly.


In one of my projects I use a "mixture" between vw and vh to adjust the font size to my needs, for example:

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

I know this doesn't answer the OP's question, but maybe it can be a solution to anyone else.


In order to make font-size fit its container, rather than the window, see the resizeFont() function I have shared in this question (a combination of other answers, most of which are already linked here). It is triggered using window.addEventListener('resize', resizeFont);.

Vanilla JavaScript: Resize font-awesome to fit container

JavaScript:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

You could perhaps use vw/vh as a fallback, so you dynamically assign em or rem units using JavaScript, ensuring that the fonts do scale to the window if JavaScript is disabled.

Apply the .resize class to all elements containing text you wish to be scaled.

Trigger the function prior to adding the window resize event listener. Then, any text which doesn't fit its container will be scaled down when the page loads, as well as when it is resized.

NOTE: The default font-size must be set to either em,rem or % to achieve proper results.


100% is relative to the base font size, which, if you haven't set it, would be the browser's user-agent default.

To get the effect you're after, I would use a piece of JavaScript code to adjust the base font size relative to the window dimensions.


I just created a demo how to do it. It uses transform:scale() to achieve that with some JS that watches element resizing. Works nicely for my needs.


For dynamic text, this plugin is quite useful:

http://freqdec.github.io/slabText/

Simply add CSS:

.slabtexted .slabtext
{
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
}
.slabtextinactive .slabtext
{
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
}
.slabtextdone .slabtext
{
    display: block;
}

And the script:

$('#mydiv').slabText();

If the issue is font getting too big on widescreen desktop, I think the easiest CSS method would be something like this (assuming wrapper maximum 1000 pixels wide)

.specialText{
    font-size: 2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width: 24px;
    }
}

So it is auto sized for any screen smaller than the maximum width of your container, and fixed size when the screen is wider (like virtually all desktop and laptops).


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to responsive-design

How to make flutter app responsive according to different screen size? Bootstrap 4: responsive sidebar menu to top navbar How to make canvas responsive Putting -moz-available and -webkit-fill-available in one width (css property) Bootstrap 3 - Responsive mp4-video Change hover color on a button with Bootstrap customization iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? Bootstrap full responsive navbar with logo or brand name text Bootstrap 3 truncate long text inside rows of a table in a responsive way Responsive Bootstrap Jumbotron Background Image

Examples related to font-size

Specifying Font and Size in HTML table How can I set the font-family & font-size inside of a div? How to change Bootstrap's global default font size? How to set min-font-size in CSS Is there such a thing as min-font-size and max-font-size? How can I change the font-size of a select option? Font scaling based on width of container Auto-fit TextView for Android Responsive font size in CSS increase font size of hyperlink text html