5

Is it possible to set a font size to a percentage of the container size? I have a list of items which have an image, a header and a description. The image resizes automatically as the user resizes the window. I would like the header font to do the same.

edit: Javascript/JQuery is fine.

Improve this question
3
  • By container size, do you mean including the padding, including the padding and border, or including the padding, border, and margin? Commented Jul 16, 2012 at 20:58
  • 1
    Also, IMO, I discourage you of resizing the font size based on the viewport/window size. It prevents readability majorly. Commented Jul 16, 2012 at 21:21
  • container, window, padding, whatever. I just want it to be able to be resized automatically relative to anything else that changes when the window, and thus the layout, is resized... Commented Jul 16, 2012 at 21:54

5 Answers 5

Reset to default
11

In CSS3, there is the vw unit, which stands for 1/100 of the viewport width. For example,

h1 { font-size: 5.5vw; }

sets the heading font size to 5.5% of the viewport width.

However, this seems to work on IE 9 (Standards Mode) only so far. Moreover, IE 9 does not dynamically change the value of the unit when the browser window is resized, only on reload.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This isn't relative the container's size, though.
This gives the same effect, but any changes to the size of the container whether it be by JavaScript or by changing the CSS, this will not work quite right. One would have to remember to update this upon changing the size of the container.
5

Just to expand on Tyler's answer, this is what javascript is meant for, though I'm tad sure you can achieve the same feat using CSS3 viewports, you will be better off using jQuery (it's usually in the cache of most browser's and always hosted on Google so no need to worry :)

If you have a css like this:

#body #mytext { font-size: 50%; }

you can dynamically resize in jQuery like this:

$(window).resize(function(){ $('#body #mytext').css('font-size',($(window).width()*0.5)+'px'); });
Improve this answer

5 Comments

Just an FYI, you don't have to specify that #mytext is a descendant of #body unless you are trying to increase the specificity value (which quite frankly is the wrong way to go if you are using id's).
It depends on the scenario, there's nothing wrong about using CSS in this way. Albeit, it's just a demo...
Well, each value in an id attribute must be unique. Therefore, #mytext can only refer to one element at most. With that said, there is not much need to specify any of its ascendants in the CSS rule.
Oh my, just got what you were actually trying to explain. Yes indeed, but I was just providing an example :)
I couldn't get this to work on jsfiddle but I'll take your word for it :)
3

No, this can only be done in JavaScript.

Improve this answer

1 Comment

just as Tyler said, fonts are calculated in relation to the current set fontsize of the browser, if you use dynamic font sizes like "em" or "%" values. You have to calculate the font size with javascript if you want to get a size depending on a tag's height / width
1

Is jquery is an option?

Super easy if it is: fiddle

<div id="container"> <p>HELLO WORLD!</p> </div>​ <script> $(document).ready(function() { var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */ $('p').css('font-size', sizeMe); }; </script>
Improve this answer

3 Comments

There are many other attributes that would theoretically need to be changed (i.e. text-indent, line-height, etc.).
But then again, the OP didn't ask about that. :)
That's because he/she didn't put the JS in the onresize handler. If you put it in there, it should work.
-1

I've done it with jquery in the past. Check out this article if it's of any interest to you. You can also use CSS to detect device width (not browser, and it's not supported in older browsers).

http://css-tricks.com/resolution-specific-stylesheets/

Improve this answer

Comments