Font Sizes

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.

autoace:

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.

autoace:

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

rstevenson:

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

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

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

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.

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

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

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!

autoace:

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.

autoace:

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

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.

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.

Jay Gee:

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.

Thank you for the information, I am going to try it out and report later!

The only comment I would make about this suggestion is that using named sizes gives you only 7 sizes, whereas using ems gives you pretty much infinite control. An excellent article explaining the way to make it all work (and revealing the wisdom of the Zen developers along the way) is here.

Rob)

rstevenson:

The only comment I would make about this suggestion is that using named sizes gives you only 7 sizes, whereas using ems gives you pretty much infinite control. An excellent article explaining the way to make it all work (and revealing the wisdom of the Zen developers along the way) is here.

Rob)

Not wanting to be too argumentative on the subject (-' the beauty of named sizes is that they give you the ability to present a completely uniform effect from page to page which makes reading text easier on the viewer.

While it is unlikely that a developer interested in giving a customer a pleasant shopping experience needs to use twelve or fifteen font sizes to get the information across accurately, percentages allow the developer control only to the extent that they are reviewing content on their machines with their browsers.

I don't disagree that having a nice storefront look helps sell merchandise or services, but I suggest that navigational ease is enhanced by fewer type face sizes because it makes reading things easier for the visitor. And, navigational ease helps sell merchandise on the Internet.

I understand that the wide variety of sizes declared in the Zencart stylesheet makes it possible to stuff incredible amounts of information into a single web page and that is why the styles are set up that way.

For a Zencart user who does not need complete page cramming, named faces are much easier to keep track of.

Jay