Can I set font-size relative to page size?

Question

Is there a way to make font-size relative to the size of the page? Applying percentage as unit refers to the standard font size (like 90% of 12px, not 90% of the page!). This is different from the behaviour of most of the other tags.

Any way to make the page 'scale up and down' also with fonts? Should I rely on em?

Thanks

Answer 1

See the new vh and vw CSS units. Browser support isn't great yet.

http://snook.ca/archives/html_and_css/vm-vh-units

It landed in WebKit recently: https://bugs.webkit.org/show_bug.cgi?id=27160

In browsers that support it, 1 vh is 1% (1/100) of the viewport height, and 1 vw is 1% (1/100) of the viewport width. There are also vmin and vmax units, which represent the smaller of the two and the larger of the two, respectively.

Answer 2

No you cannot set the size of the font in a percentage relative to the size of the page.

Sizing in em is based on the size relative to how the font would normally render in 16 point.

If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.

That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.