fixing font sizes...

[ristenk1]

I feel like I keep running into this topic again and again. I create my sites using pixels (which I know isn't as helpful as ems) but it gives me a standard look....but I still run across user settings that completely distort the sites because of text enlarging (and sometimes it looks like it is only my sites that are getting so wildly distorted). Is there any code or anything ELSE I can do to try and keep the sites from being distorted (even if it's not making it accessable to everyone). Thank you.

[chandrika]

It used to be a bit controversial to do such, because of discrimination against the visually impaired. But now that IE and firefox, as well as opera have a zoom option, that zooms the whole page, without changing the layout, it seems that it wouldnt be a problem for anyone and can be done in css as follows...

Define a style class to fix the text to say 14 pixels:

<style>
  .fixedfont { font-size : 14px }
</style>

Then use that style on any section of text by placing the text inside a DIV tag...

<div class="fixedfont">
This text is fixed at a font size of 14 pixels
</div>

[ristenk1]

This seems like an easy and good solution Do most websites use this method?

Thanks Chandrika

[weegillis]

Do most websites use this method?

Methods vary widely. It falls to the author what methods they use. This method of assigning a font size property to a class is very specific, and perhaps would not do (in and of itself) in a larger production, as there may be unnecessary repetition.

Say for instance you want all paragraphs in the content section of your page to have one size:

CSS
#content p {font-size: 14px;}

While I am in favor of proportional font-size, screen zooming as opposed to only text zooming has made the case for scaling a moot point... to some degree. However, I argue for proportional because it aligns the entire document to the user's own scale when the page opens. Eg.,

CSS
body {
 font-size: 100%;
}
#content p {
 font-size: 80%;
}

The first accepts the user's system font size as a base.
The second knocks it down 20% to fit more in line with typical prose text.

We could apply it to lists in similar fashion. Eg.,

CSS
#content p, li {
  font-size: 80%;
}
li li {
 font-size: 100%;
}

The second in this case forces nested lists to adopt the font size inherited from the parent, without further scaling (which would become 64% of the base in the first nest, 51% in the second nest, and on down if we didn't stop it in its tracks with this rule).

[DaveSawers]

It used to be a bit controversial to do such, because of discrimination against the visually impaired. But now that IE and firefox, as well as opera have a zoom option, that zooms the whole page, without changing the layout, it seems that it wouldnt be a problem for anyone ...

I would say it's still controversial.

Firefox has an option to only zoom the text and to leave the images at their original size. This can distort layouts that don't expect this.

[astro]

I would say it's still controversial.

Firefox has an option to only zoom the text and to leave the images at their original size. This can distort layouts that don't expect this.

Agreed.

Why would you want to dictate or over ride anyone's personal preferences whilst browsing your site anyway? It is their choice what their browser is set to, by dictating to them what font size they see you may spoil that person's ability to surf your site or annoy and they will leave your site.

It is discrimination and you are imposing your values upon another person

/astro

[PoisonJam]

I'm sure the people that increase text sizes would rather see broken design with larger text than not being able to resize at all. Users don't really care about your design.

As someone else already mentioned, with the most modern browsers promoting zoom more than increasing text size (a good thing IMO) it's even less of an issue.

[Bernd]

Firefox has an option to only zoom the text and to leave the images at their original size. This can distort layouts that don't expect this.

Yes users can set a minimum fontsize in FF and Opera.

It is not very wise to rule against the users needs.