Overriding pre-set text/font size

Can anyone tell me the easiest way to override browser-set text/font size?

Use the CSS font-size property.

I should point out that if a user wants to over-ride this, they can.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

My advice is to set your font-family in the BODY part of your css, then set the font-size: to between 70 and 80% (depending on font)

Then in the other styles use EM font sizes based on 1 (1 being the same size as the 70%-80% of the font)

Example:

BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 76%;
color: #000;
}

H1 { 1.4em } /* header 1 is 140% size of standard text */
H2 { 1.25em } /* header 2 is 125% size of standard text */
H3 { 1.1em } /* header 2 is 110% size of standard text */

As you build your page, resize the text to check that it doesn't break the layout.

thanks, D3mon. I actually tried a CSS style trick I found online. So far I think it's okay... text is set to pixels instead of pts. I even set the browser text to largest and the font stayed the same (crossing fingers that it's okay, the way I did it).

Thanks a mil, though. I copied and pasted that to notepad for future reference.

If the resize on your browser doesn't work with your page, then that would be a bad thing. Your website then become partially in-accessible.

I do understand that.... but it's just for one of my sites (I have 3). This site's design is done with image slices that would break apart if the text were resized to a large text size.

Oh dear. Time for a re-design then!

Why's that? Even Flash's text can't be controlled by IE. Also, when I got this laptop a couple weeks ago IE was set to default settings with a text size of medium. Some of the sites I previously visited with my old machine (IE set to my specifications with smaller text) looked awful... sliced images breaking apart, etc. And these were very well done, professional web sites, too.

Also, if you set IE to text size of "largest" while on this forum... the text stays the same. :wink:

Flash is really a whole different issue. It's generally assumed that Flash sites aren't accessible anyway, so HTML alternatives should be provided.

What D3mon is saying, is that you should be able to change the text size and that it shouldn't break your design.

Although to be fair, there are browsers out there, such as Opera which resize the entire page, not just text. Personally I think if anyone has bad eyesight then they should use a similiar tool as, if they can't see the text at a particular size, then they probably can't see much else on the page either, including images? Again though, that's another argument!

I understand what you're saying. Makes sense. But if a page is built with sliced images using tables (or even using CSS which can align the images as well), when the text is increased the cells increase and break images apart.

I'll see if I can find an example page... I know there are a few in my favorites folder.... I'll send them along shortly....

I can't believe this, but all the links i went to (with my browser text set to largest) stayed the same! They're set not to resize. So, I then left the settings on largest and went surfing. The only sites I ran across where the test resized were ones done in 1st generation design. Even the American Legion web site's text didn't resize to the browser specifications! LOL

Updated Post

Okay, I went surfing around a bit and looked at the code on pages who have design similar to mine... to find out why the images, etc. on tables wouldn't break apart when the text size was increased by the browser....

I don't understand how it's done really, using multiple tables, but my page is in ONE table, whereas these other pages/designs have tables on top of one another, AND the one containing text inside frames (which allows the text to scroll)...

Is there a good, understandable tutorial out there for doing this?? I imagine if I switch my design over that I'll be forced to re-slice the images??

here's an example of one page that does this:

http://www.pywacket.org/adored.html

Here's the site I'm attempting to revamp. The splash page sucks, but I haven't decided yet what I want to do with it (flash or non-flash). Anyway, you can sort of see where I want the text to be and "scroll" (if possible, in frames or whatever)....

http://www.autumnwhisperstome.com