Change font size according to resolution

[malcster2]

hello

i am putting together a web site that i would like to be virtually identical in all screen resolutions.

99% of the elements have % widths and height, rather than px measurements. so this is not the problem.

the problem i have is with font sizes.

does anyone know the best code to use change the fontsize according to the screen resoluiton?

malc

[acoder]

Use smaller/larger or a percentage - see this link.

Is this a JavaScript problem?

[malcster2]

well, i thought i would need to write a javascript to change the fontsize after finding the window.screen.w idth/height.

[malcster2]

i have changed the % of the font size in my css file, but in the lower resolutions the text(in this case, links) go of the bottom of the div(which in this case is a sidebar)

i know this is not neccesarily a javascript prob, but don't really want to have to start a new thread elsewhere.

is there not a clever way that the text can be clerverly resized depending on the res size?

[hsriat]

So you can use screen.availHei ght to calculate a constant value which you can multiply with the font size.

Say for example:[code=javascript]
window.onload = function () {
document.body.s tyle.fontSize = (Math.ceil(scre en.availHeight * parseInt(docume nt.body.style.f ontSize) / 600) + 'px';
}[/code]

[acoder]

It may be a good idea to make everything relative using larger/smaller, so you only need to change a few sizes, though it depends on how the page is laid out.

For units, use relative ones so users can zoom in/out/change text size using the browser.

As for the best code, I'm not sure. Experiment with different resolutions and see which looks best. To change font size, use elem.style.font Size=...

Edit: hey, where did those appear from? :p

[malcster2]

thanks for all your help. i've come to the conclusion this problem is not as easy to solve as it should be just using a css percentage to make the font size proportional.

i am new to web developement, and i was wondering if this is a common problem, or are most sites developed with just a single resolution in mind?

[acoder]

i am new to web developement, and i was wondering if this is a common problem, or are most sites developed with just a single resolution in mind?

No, good sites are developed with all resolutions in mind. You make your code independent of resolution. It may not look exactly the same, but it looks OK in all browsers/resolutions. If you need it to look exactly the same, then you'll need to use fixed widths/sizes.

[malcster2]

so it's like a resolution compromise?

[rnd me]

dont forgret that browsers often resize the text to fit the user's zoom level.
firfox3 even rescales the images, so give up now trying to fit everything in one box.

besides, how can/ why should a page look the same on an iphone as a 22" monitor ?

[malcster2]

thats why i've done all my sizes/measurements in percentages rather than pixels, it's just the text sizes that are the problem.

so am i going about this the wrong way?
am i better of doing all measurements in pixel size, and let the user adjust their resolutions?

please advice, as i am new to web design, and am very much in the trial and error stage.

also, common sense, and several sites and books, says that when you design a website, design in a low resolution,e.g 800x600, so horizontal scrolling is not needed.

but almost every website, including this one, allows horizontal scrolling at 800x600.

[rnd me]

rather than code for a low res that fits without scroll (which pisses off people with a 22" widescreen lcd), use relative sizes for everything (%,em,cm).

overall, there is a balance of control and compatibility you must, as a designer, find for yourself.

[acoder]

See this usability article by Jakob Nielsen. Bear in mind that it's not just screen resolution, but you also have to take browser size into account. Not all users keep their browsers maximised.

If you want changes based on resolution, here are some links that you could look at:

http://www.themaninblue.com/writing/perspective/2006/01/19/

http://www.alistapart.com/articles/switchymclayout

http://particletree.com/features/dynamic-resolution-dependent-layouts/

[acoder]

...use relative sizes for everything (%,em,cm).

That's true, though cm would be an absolute size. You can use absolute sizes, e.g. pt, cm, in, mm, when you know the output medium, e.g. a printer. See this link.

Note that em/ex refers to the parent element for font-size. For all other properties, it refers to the element itself - see this link.

[rnd me]

my two cents:

for my javascript console, i used a triage approach:

i made one version for 1024X768 (more than half of users last year).
i made one for anything smaller than that, and one for anything larger.
i recently made a second large version for widescreen monitors, bringing the version count to four, which seem to cover most people quite well.

i wouldnt worry about each rez (mac and win are different too), but make big, little, and wide versions, and a 1024X768 one that looks perfect for half your users.

a really simple way is to have diffrent <Style> sections for each rez, all disabled.
then use javascript to un-disable the one you need according to 'screen.width'.


the big limit ive noticed now is with scaling, not resoulution. ive been meaning to write a script that tells me how many pixels tall a 100% tahoma normal would appear. then, you could really get exact control, knowing exactly what the user is dealing with.