Font Sizes

[autoace]

What is the best way to maintain uniform font sizes on my website using the stylesheet.?

The reason I ask is that it seems if you make a modification here and there, you get different font sizes in different places. and it does not look uniform at all.

I know that there are different sizing methods (i.e. em, px, pt, %). I also know that w/ZC, right at the top of the standard stylesheet there is font-size: 62.5%; within the 'body' element.

With all this said is it best to use 'px' to keep the font size a fixed size vs em - if you need (or want) to make an adjustment? How does it all work?

Thank you.

[rstevenson]

With all this said is it best to use 'px' to keep the font size a fixed size vs em - if you need (or want) to make an adjustment?

This question has been debated ad nauseum on the web in many different forums, including this one. I can tell you what's best, and someone else will tell you something else is best. You'd better Google for this and spend an hour or so reading about it. No need to rehash it here, again.

The reason I ask is that it seems if you make a modification here and there, you get different font sizes in different places. and it does not look uniform at all.

To get a specific answer you'll need to include a link to your site and a note about what you're trying to do. I don't understand from that general description.

Rob

[autoace]

This question has been debated ad nauseum on the web in many different forums, including this one. I can tell you what's best, and someone else will tell you something else is best. You'd better Google for this and spend an hour or so reading about it. No need to rehash it here, again.



To get a specific answer you'll need to include a link to your site and a note about what you're trying to do. I don't understand from that general description.

Rob

I'm not trying to do anything specific. The only thing I am trying to figure out is how to keep the font sizes uniform throughout the store.

Maybe I should rephrase the question: What is the easiest way (or some best practices per the ZC way) to keep the font size uniform throughout one's store? Another question is what does this code actually do in the stylesheet:
body {
margin: 0;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #ffffff;/*e5edf5*/
}

Would w3schools.com be a reliable source to get the facts(and best practices) when it comes to font sizes and the different sizing methods?

All I really want to do is keep the majority of all text and links thru-out my store at a size 12px(or its equivalent) and keep the copyright at say 10px/or its equivalent). Thats it!

Thanks for your help

[rstevenson]

Hi,

There are many differnt font sizes in the default style sheet, for different elements. That's normal and reasonable. But you still shouldn't be seeing anything that might be described as unusual or out of place sizes, so a description of where you're seeing this would help. A link to your site would be even better.

As for the font-size: 62.5%; bit in the stylesheet, that's a debatable fix to a problem from the past (mostly.) (But as I implied above, that's just my opinion. I usually reset this to 80%, by the way.) You'll notice that above that in the stylesheet you see this...
font-size: 100%; /* to fix IE font bugs */

Having set the font size to 100% (of what, you might well ask) the devs chose to reset it to 62.5% of that. That will create what some people call a reasonable size for all body text and anything that is not otherwise re-sized. From that point on sizes of certain elements can be changed using EMs or % to adjust up or down fluidly, according to the user's preferences as much as anything else.

But if you insert pixel sizes later in the stylesheet, you are, for some users and some browsers, locking in a size which may be difficult for them to view.

But much of this is either old news which browsers have worked around anyway in recent versions or is irrelevant to your issue, which still needs more clarification. Where are you seeing sizes you don't like?

(You might want to take a look at some of the posts below this, down in the Similar Threads area.)

Rob

[autoace]

Thanks for the explanation. Now I understand a little better. I have a few links that are either smaller or a bit larger than what I would like and I am not sure why. I did not change the default global setting for the font size:

font-size: 62.5%;

all I did was make most of the

font-size:1.2em

. However some of my links are 10px (category links in the center column) and some are even larger (15.6px) on the product listing page and I can not seem to figure out why?

Also most of the category links in the center column are 10px when I believe I set them to 1.2em, and the same goes for 'home' and 'login' in the upper right hand corner.

BTW, I do not have the

font-size:100%;11 fixes IE font bugs

above the other code. Should I add that in there?

I have the Web Developer addon for FF, but still learning how to use it - Im still a newb at all this.

Any suggestions? Please take a look, if you would, http://www.a u t o m o t i v e a c e.com

Thanks for your help.

[rstevenson]

Hi again. I've been away for several days, not ignoring you! ;-)

I see your site has up to 9 different stylesheets being loaded at one time. That's going to make debugging a real problem. I also see one of them is stylesheet_tpp.css, which I believe is a Template Monster stylesheet. That makes it even more difficult, since TM customizes Zen Cart in unfortunate ways.

I would suggest looking through the many stylesheets to see where there are duplicate definitions, and trying to remove them.

And yes, you should have that 100% definition in there. Have a look at the default stylesheet.css file (from a fresh download of ZC, if you don't have one handy)to see where to put it.

Rob

[autoace]

Hi again. I've been away for several days, not ignoring you! ;-)

I see your site has up to 9 different stylesheets being loaded at one time. That's going to make debugging a real problem. I also see one of them is stylesheet_tpp.css, which I believe is a Template Monster stylesheet. That makes it even more difficult, since TM customizes Zen Cart in unfortunate ways.

I would suggest looking through the many stylesheets to see where there are duplicate definitions, and trying to remove them.

And yes, you should have that 100% definition in there. Have a look at the default stylesheet.css file (from a fresh download of ZC, if you don't have one handy)to see where to put it.

Rob

Hi Rob, no problem - hope your time away was good!

Actually the stylesheet_tpp.css is from the addon Tabbed Products Pro - not Template Monster. I don't have a template from the addons or a 3rd party. Just my own that I highly customized from the standard template.

I will go ahead and add the 100% def in there for IE.

To be honest, I did not know I had 9 stylesheets being loaded (all from addons that I have installed). You probably right, simply going thru the different stylesheets to see where I have duplicate defs should solve the problem.

Now my only question to you is, when I do find duplicate defs, do I simply comment them out in the main stylesheet or do I comment them out in the page specific stylesheet?

Thanks for your help!

[clydejones]

Hi Rob, no problem - hope your time away was good!

Actually the stylesheet_tpp.css is from the addon Tabbed Products Pro - not Template Monster. I don't have a template from the addons or a 3rd party. Just my own that I highly customized from the standard template.

I will go ahead and add the 100% def in there for IE.

To be honest, I did not know I had 9 stylesheets being loaded (all from addons that I have installed). You probably right, simply going thru the different stylesheets to see where I have duplicate defs should solve the problem.

Now my only question to you is, when I do find duplicate defs, do I simply comment them out in the main stylesheet or do I comment them out in the page specific stylesheet?

Thanks for your help!

You might find this article helpful It explains how to size your text using ems.

[rstevenson]

Now my only question to you is, when I do find duplicate defs, do I simply comment them out in the main stylesheet or do I comment them out in the page specific stylesheet?

The stylesheets are being loaded in alphabetical order, so comment out the "earlier" one if they're identical, just so you'll know which one to edit if you want to later. If they're not the same, then choose which one does what you need.

More likely, you'll find a mixture, where the definition for one element includes aspects that another definition for the same element does not contain, and perhaps with some overlap. If that arises, you'll just have to decide which pieces you want, consolidate them into one definition, and then delete the parts you don't want or that are redundant.

Rob

[Jay Gee]

What is the best way to maintain uniform font sizes on my website using the stylesheet.?

The reason I ask is that it seems if you make a modification here and there, you get different font sizes in different places. and it does not look uniform at all.

I know that there are different sizing methods (i.e. em, px, pt, %). I also know that w/ZC, right at the top of the standard stylesheet there is font-size: 62.5%; within the 'body' element.

With all this said is it best to use 'px' to keep the font size a fixed size vs em - if you need (or want) to make an adjustment? How does it all work?

Thank you.

After reading all the messages in this thread I wanted to pass along a suggestion that might simplify things if you are looking to maintain uniform type face sizes for the customers visiting your store.

Use the named sizes defined in the HTML and CSS standards. They are:

xx-large
x-large
large
medium
small
x-small
xx-small

Because the perception of a font's size is controlled by the monitor definition settings on individual web users' computers, specifiying a 12px font looks larger to someone with 800x600 screen size than to someone with1024x768 screen size if they are using the same 21" monitor.

Browsers automatically set the font size using a visitor's preferences or default settings when named sizes are declared.

It also mekes keeping track of your settings easier to follow when reading through the stylesheet.