Font size woes

I am trying to create a truly liquid / scalable page.

I have a site that has a few elements in it all based on percentage. In either 1920px or 1024px, they display exactly as they should. I also have a large header tag <h1> at the top. I set it to 4em, since that is the "elastic" way to do it. But the font was the same size (pixelwise) in the small and large browser -- losing its scalability. So I addedhtml{ font-size:100%; }
body {font-size:1em;} and that did nothing. I played around some more, and couldn't figure it out.

I am just looking for a way to display the font so that it scales with the browser, along with the rest of the elements. Example, it would technically show as 30px in a 1024px wide setting and show as a larger (40px?) when the browser size is larger.

Is this doable with font?

Is this doable with font?Without scripting, I don't think this is currently possible in a cross-browser-compatible way.

The CSS3 Values and Units module offers vh, vw, and vm units (http://dev.w3.org/csswg/css3-values/#viewport-relative-lengths) that are relative to the viewport dimensions, but I believe Internet Explorer 9 is the only browser that supports these three units at the moment.

Thanks for your reply. That's too bad. Hopefully in the future they can use a % based on screen width or height, not based off of pixel size or em.

Hopefully in the future they can use a % based on screen width or height, not based off of pixel size or em.If you're referring to the vh, vw, and vm units, they are percentage-based. For example, 100vh is equivalent to 100% of the height of the viewport. (If you're not familiar with the term "viewport," it refers to area available for site rendering in a Web browser.)

The units won't help you if, by "screen," you literally mean the total screen area on a device though. For that, you'll need scripting.