NYCPHP Meetup

[Dan Cech]

Michael B Allen wrote:
> On 8/8/07, Tom Sartain <tomsartain at gmail.com> wrote:
>> As far as the AAA controls, the easiest way I've seen to do this is to
>> have alternate style sheets for each font size, then use javascript to
>> switch between them. I'm hoping you have a few sites to refer to and
>> figure out the logistics of it all, but that's the basic concept.
> 
> Changing the font-size of the body has no effect on text within td
> elements. Changing the font-size on td elements has no effect on form
> input elements like buttons. Etc, etc, etc. This problem can't be
> *that* hard. Is there really no better way to control font-size of all
> page elements simultaneously?

My personal preference is to use the following rule:

* {
  font-size: 100%;
}

to reset the size of all fonts to 100% of the parent element, then set a
size on the body tag as your baseline, eg:

body {
  font-size: small;
}

Now everything will have the same font size, and changing the font size
on the body will affect everything.

Obviously some things need to have larger or smaller fonts, so you can
set them up as well, eg:

h1 {
  font-size: 150%;
}

At this point you can set the size of everything by overriding the
font-size of the body, and everything else will scale accordingly.

HTH,

Dan