Parent element

Jason,

Is there a resource you could point us to which lists the default font sizes for the various elements (e.g. what's the default font size for h1, h2, h3, h4, p, etc...). I tried to look this up using some of the resources that Guil provided, but I wasn't able to find anything useful... likely I'm looking in the wrong places.

Also, any idea if these default values apply to all browsers, or does each browser have it's own standard?

Hi razmig pulurian

I'm not sure about heading tags and if the browsers are consistent in size, but the default body text size in browsers is 16px. In my opinion, it is always better if you style the heading tags yourself for 2 main reasons: 1-- You can be sure of consistency across browsers, and 2-- the right size might not be the same for all designs and layouts.

I did find a couple links for you...

Font Sizing - via W3Schools

Thread from StackOverflow

I hope these help. Keep Coding! :)

Hi Jason,

Thanks for the answer and the links. They definitely help!

A bit of background on why I asked this question in the first place...

I recently read a web article which describes the subtle the difference between setting absolute values (e.g. 16px) for fonts, versus using relative values (e.g., using 100%). You can find the article here: http://terrillthompson.com/blog/589

To summarize: Some users have difficulty reading text. Many browsers (e.g., firefox?) allow the user to override the default browser font size to make websites easier to read. If designers use relative values, the browser will resize the text according to the font size the user chooses in their browser settings. If designers use absolute values, the browser will not resize text. So, even though 100% and 16px body text has the same display output (100% = 16px), the browser handles resizing of the text differently.

The reason I asked about default browser font sizes for various browsers: If all browsers had the same, or similar, default text values for things like headers, the choice of absolute versus relative values is made easily (for me, at least). I would always use relative values.

However, after reading the stack overflow link you provided, it looks like this is not the case at all. Browsers have vastly different default sizes for their headings. I guess in this case, I would go with your suggestion.

• Use absolute values for larger text elements (H1, H2, etc). You can control the appearance more and ensure it displays consistently across browsers. Users will probably have less need to override headings as they are large to begin with.

• Use relative values for body and paragraph texts. This allows the user to resize the text if they need to. Since most browsers use 16px default for body anyway, it will likely display consistently across browsers.

Would be nice if all browsers used consistent settings, but I guess that will not be happening any time soon :)

And what happens if in your example, the h1 did not have a defined font-size and you set the p to 150%? It would be 150% of the h1's default font-size, which is defined either in a normalize.css/reset.css file that you include in your HTML, or if not availlable, the browser's default setting for h1?

http://stackoverflow.com/questions/6140430/what-are-the-most-common-font-sizes-for-h1-h6-tags - a useful resource for more information on how browsers interpret undefined h1-h6 tags.