Is there a way to set the text size as a percentage of the window size using CSS?

Question

Is there a way to set the text size as a percentage of the browser window? For instance:

h1 { height: 15%; /* in my ideal world this would be 15% of the window (or parent) size rather than inherited font-size */ } 

Answer 1

In CSS3:

 h1{ font-size: 15vw; // relative to the viewport width font-size: 15vh; // relative to the viewport height font-size: 15vm; // relative to the ratio width/height of the viewport } 

But of course, this does not work in all browsers.

Please see here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Answer 2

there is a great jquery solution at http://fittextjs.com/ if you don't mind js

Answer 3

It won't be perfect, but using media queries may come close.

 @media screen and (max-height: 50px) { body { font-size: 7.5px; } } @media screen and (max-height: 100px) { body { font-size: 15px; } } @media screen and (max-height: 150px) { body { font-size: 22.5px; } } @media screen and (max-height: 200px) { body { font-size: 30px; } } 

Etc. You will need to determine when you need to make a “break” point and how far you can take it at the low and high end.