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

Inside your CSS try adding this at the bottom changing the 320px 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.

Answer 2

Updated because I got a down vote.

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/

Answer 3

are 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 js and not pure css solution)

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

Answer 4

This may not be super practical, but if you want font to be a direct function of the parent, without having any JS 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 min/max 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 heigh 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 JS. 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.

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

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

Answer 5

What I do in one of my projects is a "mixture" between vw and vh to adjust the font size to my needs, eg.:

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.

Answer 6

take look at my code it make the font size smaller to fit whatever there

but I think this doesn't led to good user experience

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

items.each(function(){
    //display value depend 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);
    }
});

hope this help you