gouri - 8:02 pm on Aug 8, 2012 (gmt 0)
I did some further reading on font size after reading some of your most recent posts (all of which have added a lot to my knowledge) and also looked at my template again.
After doing this, a couple of questions came up, the answers to which I think will really help me to put this together.
My template is structured in the following way:
At the top there is a box for the page header, then a box for the heading (although it may not specifically say h1), after that there is a box for the body text and then a box for the footer. All of these boxes, I believe, are divs. (I am not sure if this affects anything; Just wanted to mention it in case that it does.)
I looked at the CSS stylesheet and saw that there is no specified definition for the h1 tag and for the paragraph tag. The way that it is set up, there is a font family, font color, font size and font weight for the heading box, the body text box and the other boxes as well. The specifications for each box varies and on the stylesheet, it is indicated which box the various coding is for.
I think that I would have to create definitions for my h1 tag, h2 tag, paragraph tag, etc. It is not a matter of changing some of the specifications for these tags, and I think that this is one of the things that I would like to have a better understanding of.
At the moment, if I create an h1 tag, for instance, and use a percentage (e.g. 125%) for the font-size, would the base value be the font-size mentioned in the CSS stylesheet for the heading box, which I believe is 16px, and would the text that I type be 125% larger than 16px?
Or is the default size for the h1 tag and other elements determined by the browser? If I know which one is used, then I can decide what percentage to use for the font-size.
For paragraphs, should I use inline CSS and specify that I want my paragraphs to be font-family Arial and font-size 13pt, or should I indicate font-family Arial and font-size 125% (or another percentage if thatís what makes the font-size 13pt) and the size of the text will be based on some default size (Would the default size be that which is set by the browser or the body text box in my template?)? Would both options resize if someone (1) zooms in on the whole page and (2) zooms in on the text only?
Another thing that I noticed, and this is something that I have been trying to figure out for some time but haven't been able to, is that the text (font size 3 [using html at the moment], but have seen this same thing happen on websites using CSS for font-size) on the pages of the site that I am working on appears smaller when I look at it on the site than when I copy and paste it into Microsoft word? Can you please tell me why this is occurring? I want the text size on the website to be the same size as it appears on Microsoft Word. This would make the text easier for visitors to read. Maybe this is happening because of how the font size is defined (using exact sizes instead of percentages), but I am not sure. Would really like to figure this out.
I appreciate your help with this and all that you have already helped me with.