Font scaling based on width of container

Question

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

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

I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16px 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. (E.g 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 100px decrease in width to control the text.

Answer 1

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>

Answer 2

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})

Answer 3

I've prepared 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: https://blog.polarbits.co/2017/03/07/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

Answer 4

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 script

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

Answer 5

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/

Answer 6

Try to use fitText plugin, cause Viewport sizes isn't the solution of this problem. Just add library

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

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

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

you can set max and min values of text:

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