Hi, Is there a way to make te size of a font relative to the size of the page? Applying % as size measure 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
I recommend you use YUI reset to unify the font rendering across different browsers. Then check YUI Font Size. After this you can rely on your fonts to display correctly.
When you say "relative to the size of the page", what exactly do you mean with "size of the page"?
The browser window? Then your fonts would change size when the user resizes the window - definitely not what anyone would expect, and pretty bad for usability. People don't resize windows to see a larger or smaller representation of the whole site, they enlarge them to see a larger section of the site, and make windows smaller to see a specific small section and have space for other windows next to the browser.
If you mean the size of the screen, that's even worse since it would mean huge fonts on a 30" screen. But people don't buy 30" screens so they can see huge fonts, they buy them to see multiple windows side by side.
All in all, using em or something similay is the only sensible way to make a scaleable website, since it will scale relative to the default size, which is/should be relative to what the user can comfortably read.
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.
At least for Firefox, 1em can be used to set the font size related to the font size of the parent. So if you set font-size of body to a value that is in ratio to the size of the page. All fonts under body that use 'em' as unit will be in relation to the page.
To do that, you must set the size of the body in relation to the page like height: 100% or width if you want to relate the size to the width.
Then, you will have to constantly synchronize the body height with the font size. This can be done with 'onResize'.
See more detail in the following link.