how to set font size based on container size?

Question

I have a container that has a % width and height, so it scales depending on external factors. I would like the font inside the container to be a constant size relative to the size of containers. Is there any good way to do this using CSS? The font-size: x% would only scale the font according to the original font size (which would be 100%).

Solution 1

You may be able to do this with CSS3 using calculations, however it would most likely be safer to use JavaScript.

Here is an example: http://jsfiddle.net/8TrTU/

Using JS you can change the height of the text, then simply bind this same calculation to a resize event, during resize so it scales while the user is making adjustments, or however you are allowing resizing of your elements.

Solution 2

If you want to set the font-size as a percentage of the viewport width, use the vwunit:

#mydiv { font-size: 5vw; }

The other alternative is to use SVG embedded in the HTML. It will just be a few lines. The font-size attribute to the text element will be interpreted as "user units", for instance those the viewport is defined in terms of. So if you define viewport as 0 0 100 100, then a font-size of 1 will be one one-hundredth of the size of the svg element.

And no, there is no way to do this in CSS using calculations. The problem is that percentages used for font-size, including percentages inside a calculation, are interpreted in terms of the inherited font size, not the size of the container. CSS could use a unit called bw (box-width) for this purpose, so you could say div { font-size: 5bw; }, but I've never heard this proposed.

Solution 3

Another js alternative:

Working Example

fontsize = function () {
    var fontSize = $("#container").width() * 0.10; // 10% of container width
    $("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);

Or as stated in torazaburo's answer you could use svg. I put together a simple example as a proof of concept:

SVG Example

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>

Solution 4

I used Fittext on some of my projects and it looks like a good solution to a problem like this.

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Solution 5

It cannot be accomplished with css font-size

Assuming that "external factors" you are referring to could be picked up by media queries, you could use them - adjustments will likely have to be limited to a set of predefined sizes.

View more solutions

Comments

[Ming Slogar]

stackoverflow.com/questions/16056591/…

[lorefnon]

What browsers does vw work on ? I can't get it to work in firefox.

[Admin]

@lorefnon, this page caniuse.com/#feat=viewport-units says it will work in Firefox 19, meanwhile try Chrome.

[lorefnon]

@torazburo, Hmm, tried it in FF 17.0. Great find btw, had no idea something like this existed.

[tnajdek]

I've hacked together a piece of less code that will use vw where available and fallback predefined values for various media queries: gist.github.com/tnajdek/5143504

[vsync]

I came here because vw is the opposite of what I need, and found this answer...which has nothing to do with the question.. :(

[jampez77]

for anyone interested in the cross browser support of this: caniuse.com/viewport-units

[Milche Patern]

Just a comment, take a look how 'firefox' opens and display a .pdf file. It's javascriptly resizing the content. Quite heavy, but fully working.

[zelanix]

Note that vw is relative to the viewport, not to the container size. Probably useful in many cases, but svg worked better for me.

[Martijn Scheffer]

that's not going to work at all. all this does is set the font size relatively to the containers font size. (minus 0.3 em)

[Henry Howeson]

Try using: window.onresize = function(event) { yourFunctionHere(); }; as well, this way if the user decides to resize their page after it has loaded your font will resize appropriately

[alejandro]

This totally worked for me , now I just need to center the text vertically

[Auxiliary Joel]

Yep FitText is great and simple to setup

[Jonathan J. Pecany]

If the parent container's height or width is a percentage like 40% or 70%, what would we put down for vh or vw? That is what the question of this post asked about originally.